// Owithu — pages
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

/* HOMEPAGE */
function HomePage({ onOpenCollection }) {
  useReveal();
  const audiences = [
    {
      id: 'restaurante', n: '01', title: 'Restaurante',
      desc: 'Servicii complete pentru o prezentare unitară, rezistentă și ușor de întreținut. Pentru meniuri à la carte, prânz de business, fine dining.',
      tags: ['Service complet', 'Compatibil cuptor', 'Gres durabil'],
      img: IMG('iris-marron', 4)
    },
    {
      id: 'cafenele', n: '02', title: 'Cafenele',
      desc: 'Căni, espresso, lungo, farfurioare de desert. Texturi tactile care construiesc identitatea vizuală a locației.',
      tags: ['Espresso + lungo', 'Tactil', 'Identitate'],
      img: IMG('magma-menthe', 3)
    },
    {
      id: 'hoteluri', n: '03', title: 'Hoteluri',
      desc: 'Servicii de 48 sau 60 de piese pentru mic dejun, restaurant și room service. Coerență vizuală între spații.',
      tags: ['48–60 piese', 'Mic dejun', 'Coerență'],
      img: IMG('genesis-plus-terre', 2)
    }
  ];

  const featured = ['genesis-terre', 'iris-marron', 'magma-menthe', 'gourmet-onyx', 'scandi-olive', 'genesis-mer']
    .map(id => window.COLLECTIONS.find(c => c.id === id));

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="eyebrow reveal" style={{ marginBottom: 24 }}><span className="dot"></span>Veselă profesională · HoReCa</div>
              <h1 className="display reveal">
                Colecții complete<br/>
                pentru mese <span className="accent">coerente.</span>
              </h1>
              <p className="lead hero-lead reveal">
                Owithu furnizează seturi de veselă profesională pentru restaurante, cafenele și hoteluri. Comanda se face pe colecție, nu pe piesă — printr-o cerere de ofertă personalizată.
              </p>
              <div className="hero-ctas reveal">
                <button className="btn btn-primary" onClick={() => navigate('/oferta')}>
                  Cere ofertă <span className="arr">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => navigate('/colectii')}>
                  Vezi colecțiile
                </button>
              </div>
              <div className="hero-meta reveal">
                <div><span className="mono">24</span><span>colecții complete</span></div>
                <div><span className="mono">30–60</span><span>piese per serviciu</span></div>
                <div><span className="mono">2 ani</span><span>garanție inclusă</span></div>
              </div>
            </div>
            <div className="hero-image reveal">
              <img src={IMG('genesis-terre', 2)} alt="Serviciu de masă Genesis" />
              <div className="corner-tag">COLECȚIE GENESIS · TERRE</div>
            </div>
          </div>
        </div>
        <div className="hero-marquee">
          <div className="hero-marquee-track">
            <span>
              Service Complet <span className="sep">·</span>
              Gres cu email reactiv <span className="sep">·</span>
              Compatibil cuptor <span className="sep">·</span>
              Stivuibil <span className="sep">·</span>
              Garanție 2 ani <span className="sep">·</span>
              Livrare națională <span className="sep">·</span>
              Service Complet <span className="sep">·</span>
              Gres cu email reactiv <span className="sep">·</span>
              Compatibil cuptor <span className="sep">·</span>
              Stivuibil <span className="sep">·</span>
              Garanție 2 ani <span className="sep">·</span>
              Livrare națională <span className="sep">·</span>
            </span>
          </div>
        </div>
      </section>

      {/* AUDIENCES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="reveal">
              <div className="eyebrow"><span className="dot"></span>Segmente</div>
              <h2 style={{ marginTop: 18 }}>Spune-ne ce tip de locație ai.</h2>
            </div>
            <p className="reveal">
              Fiecare segment are nevoi diferite — de la piese, dimensiuni și texturi, până la frecvența de utilizare. Mai jos găsești recomandările noastre pentru fiecare.
            </p>
          </div>

          <div className="audience-grid">
            {audiences.map(a => (
              <button key={a.id} className="audience-card reveal" onClick={() => navigate('/' + a.id)}>
                <div className="ac-img"><img src={a.img} alt={a.title} /></div>
                <div className="ac-body">
                  <div className="ac-num">SEGMENT · {a.n}</div>
                  <div className="ac-title">{a.title}</div>
                  <div className="ac-desc">{a.desc}</div>
                  <div className="ac-tags">{a.tags.map(t => <span key={t}>{t}</span>)}</div>
                  <span className="ac-cta">Vezi soluții pentru {a.title.toLowerCase()} →</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CAPABILITY STRIP */}
      <section style={{ background: 'var(--bg-elevated)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="capabilities">
            <div>
              <div className="n">01</div>
              <h4>Colecții, nu piese</h4>
              <p>Comanzi un serviciu complet: farfurii, boluri, căni — totul în aceeași tonalitate.</p>
            </div>
            <div>
              <div className="n">02</div>
              <h4>Cerere de ofertă</h4>
              <p>Fără preț afișat, fără coș. O ofertă personalizată pentru locația ta.</p>
            </div>
            <div>
              <div className="n">03</div>
              <h4>Material durabil</h4>
              <p>Gres cu email reactiv. Compatibil mașină de vase, microunde și cuptor.</p>
            </div>
            <div>
              <div className="n">04</div>
              <h4>2 ani garanție</h4>
              <p>Acoperire pentru utilizare profesională cotidiană în mediu HoReCa.</p>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED COLLECTIONS */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="reveal">
              <div className="eyebrow"><span className="dot"></span>Colecții</div>
              <h2 style={{ marginTop: 18 }}><span className="italic-serif">Service Complet</span> — selecție.</h2>
            </div>
            <p className="reveal">
              Fiecare colecție conține tot ce e nevoie pentru un dressage complet — de la 30 până la 60 de piese, pentru 4 sau 6 persoane. Alege după tonalitate, finisaj sau profilul locației.
            </p>
          </div>

          <div className="collections-grid">
            {featured.map(c => <CollectionCard key={c.id} c={c} onOpen={onOpenCollection} />)}
          </div>

          <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center' }} className="reveal">
            <button className="btn btn-ghost" onClick={() => navigate('/colectii')}>
              Vezi toate colecțiile <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* CALLOUT */}
      <section style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="callout reveal">
            <div>
              <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot" style={{ background: 'var(--mustard)' }}></span>Cum lucrăm</div>
              <h2>O singură <em>cerere de ofertă.</em><br/>Răspuns în 24 de ore.</h2>
              <p style={{ color: 'rgba(255,255,255,0.72)', maxWidth: '40ch', marginTop: 24, marginBottom: 32, fontSize: 16 }}>
                Trimite-ne câteva detalii despre locația ta și colecția preferată. Revenim cu o ofertă personalizată: cantități, termen de livrare, condiții comerciale.
              </p>
              <button className="btn btn-mustard" onClick={() => navigate('/oferta')}>Începe acum <span className="arr">→</span></button>
            </div>
            <div className="grid">
              <div>
                <div className="mono">01</div>
                <div className="t">Identifici segmentul și colecția care se potrivește locației.</div>
              </div>
              <div>
                <div className="mono">02</div>
                <div className="t">Completezi cererea cu detaliile operaționale: locuri, mese, frecvență.</div>
              </div>
              <div>
                <div className="mono">03</div>
                <div className="t">Primești ofertă personalizată în maxim 24 de ore lucrătoare.</div>
              </div>
              <div>
                <div className="mono">04</div>
                <div className="t">Confirmi, livrăm — și revenim cu reaprovizionare la cerere.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PHASE 2 NOTE */}
      <section className="section">
        <div className="container">
          <div className="phase-note reveal">
            <div>
              <span className="eyebrow">Faza următoare</span>
              <div><strong>Catalog complet și comandă online</strong> — în roadmap-ul Owithu pentru clienții recurenți. Faza 1 este dedicată poziționării și generării de cereri de ofertă.</div>
            </div>
            <button className="btn-link" onClick={() => navigate('/despre')}>Citește despre noi →</button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* INDUSTRY LANDING (shared component) */
function IndustryPage({ id, onOpenCollection }) {
  useReveal();
  const config = {
    restaurante: {
      crumb: 'Restaurante',
      h1: <span>Servicii complete pentru<br/>restaurante <em>care contează.</em></span>,
      lead: 'Pentru bucătării care servesc zilnic, vesela trebuie să se așeze pe masă coerent — și să reziste între ture. Lucrăm cu colecții complete: 36, 48 sau 60 de piese, în finisaje sobre, gata pentru cuptor și mașină de vase.',
      img: IMG('iris-marron', 4),
      tag: 'SEGMENT 01',
      points: [
        { n: '01', t: 'Dressage coerent pentru meniul tău', s: 'Farfurii plate, adânci, boluri, căni — toate din aceeași colecție, în aceeași tonalitate.' },
        { n: '02', t: 'Gres rezistent la utilizare zilnică', s: 'Material care suportă serviciu intensiv, mașină de vase de uz profesional și șocuri termice.' },
        { n: '03', t: 'Compatibil cuptor și microunde', s: 'Pentru regenerare, gratinare sau servire directă din vas.' },
        { n: '04', t: '2 ani garanție inclusă', s: 'Pentru utilizare HoReCa, nu uz casnic.' }
      ],
      featured: ['iris-marron', 'gourmet-onyx', 'genesis-plus-terre', 'magma-cobalt'],
      tone: 'restaurante'
    },
    cafenele: {
      crumb: 'Cafenele',
      h1: <span>Texturi tactile pentru<br/>cafele și <em>momente scurte.</em></span>,
      lead: 'În cafenea, vesela face parte din experiență. Cana stă în mână 20 de minute, farfurioara intră în cadru, finisajul construiește identitatea. Lucrăm cu colecții pentru espresso, lungo și dessert, în texturi care se simt.',
      img: IMG('magma-menthe', 2),
      tag: 'SEGMENT 02',
      points: [
        { n: '01', t: 'Set complet espresso + lungo', s: 'Genesis Plus include 12 căni espresso/lungo și 6 mug pentru cappuccino sau filtru.' },
        { n: '02', t: 'Finisaje reactive, tactile', s: 'Magma și Iris au texturi care se citesc tactil — o nuanță în plus pentru servire.' },
        { n: '03', t: 'Farfurioare de desert', s: 'Pentru cookies, biscotti, mini-prăjituri — în aceeași tonalitate cu cana.' },
        { n: '04', t: 'Stivuibil pentru tejghea', s: 'Scandi și Genesis se stivuiesc curat, vizibile clienților.' }
      ],
      featured: ['magma-menthe', 'scandi-olive', 'magma-cobalt', 'genesis-mer'],
      tone: 'cafenele'
    },
    hoteluri: {
      crumb: 'Hoteluri',
      h1: <span>Servicii coerente pentru<br/>operațiuni <em>de scară.</em></span>,
      lead: 'Hotelul are mai multe puncte de servire: mic dejun, restaurant, room service. Vesela trebuie să fie aceeași — sau cel puțin să arate ca atare. Colecțiile noastre Plus, 48–60 piese, sunt construite pentru asta.',
      img: IMG('genesis-plus-terre', 4),
      tag: 'SEGMENT 03',
      points: [
        { n: '01', t: 'Servicii Plus de 60 piese', s: 'Genesis Plus acoperă mic dejun, prânz și cafea în aceeași colecție.' },
        { n: '02', t: 'Coerență între spații', s: 'Aceeași tonalitate la breakfast buffet, restaurant și room service.' },
        { n: '03', t: 'Stivuibil pentru cărucior', s: 'Forme care se stivuiesc pentru transport rapid între etaje.' },
        { n: '04', t: 'Reaprovizionare ușoară', s: 'Colecțiile rămân în catalog. Comanzi piese suplimentare oricând.' }
      ],
      featured: ['genesis-plus-terre', 'genesis-terre', 'iris-marron', 'genesis-mer'],
      tone: 'hoteluri'
    }
  };
  const cfg = config[id];
  const featuredCols = cfg.featured.map(fid => window.COLLECTIONS.find(c => c.id === fid));

  return (
    <main>
      {/* Hero split */}
      <section className="industry-hero">
        <div className="industry-hero-text">
          <div className="crumb">
            <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>Acasă</a>
            <span className="sep">/</span>
            {cfg.crumb}
          </div>
          <div className="eyebrow reveal" style={{ marginBottom: 26 }}><span className="dot"></span>{cfg.tag}</div>
          <h1 className="reveal">{cfg.h1}</h1>
          <p className="lead reveal" style={{ marginTop: 28 }}>{cfg.lead}</p>
          <ul className="key-points reveal">
            {cfg.points.map(p => (
              <li key={p.n}>
                <span className="n">{p.n}</span>
                <span className="t">{p.t}<small>{p.s}</small></span>
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => navigate('/oferta?seg=' + id)}>
              Cere ofertă pentru {cfg.crumb.toLowerCase()} <span className="arr">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => {
              const el = document.getElementById('industry-collections');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}>Vezi colecțiile recomandate</button>
          </div>
        </div>
        <div className="industry-hero-img reveal">
          <div className="badge">PENTRU {cfg.crumb.toUpperCase()}</div>
          <img src={cfg.img} alt={cfg.crumb} />
        </div>
      </section>

      {/* Featured collections for this segment */}
      <section className="section" id="industry-collections">
        <div className="container">
          <div className="section-head">
            <div className="reveal">
              <div className="eyebrow"><span className="dot"></span>Recomandări</div>
              <h2 style={{ marginTop: 18 }}>Colecții potrivite pentru <em className="italic-serif">{cfg.crumb.toLowerCase()}</em>.</h2>
            </div>
            <p className="reveal">
              Selecția de mai jos este propunerea noastră de start. În cerere poți menționa altă colecție sau ne poți cere recomandare în funcție de profilul locației tale.
            </p>
          </div>

          <div className="collections-grid">
            {featuredCols.map(c => <CollectionCard key={c.id} c={c} onOpen={onOpenCollection} />)}
          </div>
        </div>
      </section>

      {/* Editorial split */}
      <section className="editorial reveal">
        <div className="e-img">
          <img src={IMG(cfg.featured[0], 3)} alt="" />
        </div>
        <div className="e-text">
          <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Material · Întreținere</div>
          <h2>Gres cu <em>email reactiv.</em></h2>
          <p>Majoritatea colecțiilor sunt din gres cu email reactiv — un material profesional, dens, cu suprafață ușor de curățat și rezistentă la șocuri termice.</p>
          <p>Toate sunt compatibile cu mașina de vase, microunde și cuptor (excepție rare, indicate explicit per colecție). Garanția standard este de 2 ani pentru utilizare HoReCa zilnică.</p>
          <div style={{ marginTop: 24 }}>
            <button className="btn-link" onClick={() => navigate('/despre')}>Despre Owithu →</button>
          </div>
        </div>
      </section>

      {/* RFQ */}
      <section className="form-section">
        <div className="container">
          <div className="form-grid">
            <div className="form-side reveal">
              <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Cerere de ofertă</div>
              <h2>Primește o recomandare<br/>pentru <em>locația ta.</em></h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Completează scurtul formular și revenim cu o ofertă personalizată în maxim 24 de ore lucrătoare.
              </p>
              <ul>
                <li><span className="n">01</span>Identificăm profilul operațional</li>
                <li><span className="n">02</span>Construim mix-ul de colecții potrivit</li>
                <li><span className="n">03</span>Calculăm cantitățile pentru locuri/mese</li>
                <li><span className="n">04</span>Trimitem ofertă și termen de livrare</li>
              </ul>
            </div>
            <RFQForm />
          </div>
        </div>
      </section>
    </main>
  );
}

/* COLLECTIONS INDEX */
function CollectionsPage({ onOpenCollection }) {
  useReveal();
  const [filter, setFilter] = useStateP('all');
  const [seg, setSeg] = useStateP('all');

  const filtered = useMemoP(() => {
    return window.COLLECTIONS.filter(c => {
      if (filter !== 'all' && c.name.toLowerCase() !== filter) return false;
      if (seg !== 'all' && !c.audiences.includes(seg)) return false;
      return true;
    });
  }, [filter, seg]);

  const collectionNames = ['all', ...new Set(window.COLLECTIONS.map(c => c.name.toLowerCase()))];

  return (
    <main>
      <section className="section" style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="container">
          <div className="crumb" style={{ fontSize: 12, color: 'var(--ink-mute)', marginBottom: 30, letterSpacing: '0.04em' }}>
            <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }} style={{ color: 'inherit' }}>Acasă</a>
            <span style={{ color: 'var(--line)', margin: '0 8px' }}>/</span>
            Colecții
          </div>
          <div className="eyebrow reveal" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Service Complet · {window.COLLECTIONS.length} colecții</div>
          <h1 className="reveal" style={{ marginBottom: 30, maxWidth: '14ch' }}>
            Toate colecțiile <span className="italic-serif" style={{ color: 'var(--mustard-deep)' }}>complete</span>.
          </h1>
          <p className="lead reveal" style={{ maxWidth: '54ch' }}>
            Filtrează după colecție sau după segmentul tău operațional. Click pe orice card pentru detalii — și pentru cerere de ofertă personalizată.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="filterbar reveal">
            <div className="label">Colecție</div>
            {collectionNames.map(name => (
              <button key={name} className={filter === name ? 'active' : ''} onClick={() => setFilter(name)}>
                {name === 'all' ? 'Toate' : name.toUpperCase()}
              </button>
            ))}
          </div>
          <div className="filterbar reveal" style={{ marginTop: -16 }}>
            <div className="label">Segment</div>
            {[['all', 'Toate'], ['restaurante', 'Restaurante'], ['cafenele', 'Cafenele'], ['hoteluri', 'Hoteluri']].map(([v, l]) => (
              <button key={v} className={seg === v ? 'active' : ''} onClick={() => setSeg(v)}>{l}</button>
            ))}
          </div>

          {filtered.length === 0 && (
            <div style={{ padding: 60, textAlign: 'center', color: 'var(--ink-soft)' }}>
              Nicio colecție nu se potrivește filtrelor curente.
            </div>
          )}
          <div className="collections-grid">
            {filtered.map(c => <CollectionCard key={c.id} c={c} onOpen={onOpenCollection} />)}
          </div>
        </div>
      </section>

      <section className="form-section">
        <div className="container">
          <div className="form-grid">
            <div className="form-side reveal">
              <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Cerere de ofertă</div>
              <h2>Nu știi exact <em>ce ți se potrivește?</em></h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Trimite-ne câteva detalii despre locație și revenim cu o recomandare personalizată — alegerea finală a colecției rămâne la tine.
              </p>
              <ul>
                <li><span className="n">01</span>Sub 30 de secunde de completat</li>
                <li><span className="n">02</span>Fără apel forțat, fără presiune</li>
                <li><span className="n">03</span>Răspuns în 24 de ore lucrătoare</li>
              </ul>
            </div>
            <RFQForm />
          </div>
        </div>
      </section>
    </main>
  );
}

/* RFQ FULL PAGE */
function RFQPage() {
  useReveal();
  const hash = window.location.hash;
  const m = hash.match(/[?&]c=([^&]+)/);
  const preselected = m ? m[1] : '';

  return (
    <main>
      <section className="section" style={{ paddingTop: 72, paddingBottom: 24 }}>
        <div className="container">
          <div className="crumb" style={{ fontSize: 12, color: 'var(--ink-mute)', marginBottom: 30, letterSpacing: '0.04em' }}>
            <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }} style={{ color: 'inherit' }}>Acasă</a>
            <span style={{ color: 'var(--line)', margin: '0 8px' }}>/</span>
            Cerere de ofertă
          </div>
        </div>
      </section>

      <section className="form-section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="container" style={{ paddingTop: 'clamp(48px, 6vw, 96px)' }}>
          <div className="form-grid">
            <div className="form-side reveal">
              <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Cerere de ofertă</div>
              <h2>Cere o ofertă pentru<br/>colecție sau set complet.</h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Completează datele de mai jos. Revenim în maxim 24 de ore lucrătoare cu o ofertă personalizată — cantități, livrare, condiții comerciale.
              </p>
              <ul>
                <li><span className="n">→</span>Fără preț afișat — totul este personalizat per locație.</li>
                <li><span className="n">→</span>Nu te înscrii în niciun fel de listă de marketing.</li>
                <li><span className="n">→</span>Datele tale sunt folosite doar pentru ofertă.</li>
              </ul>
              <div className="mono" style={{ marginTop: 36, color: 'var(--mustard)', fontSize: 11, letterSpacing: '0.14em' }}>
                RĂSPUNS &lt; 24H · BUCUREȘTI · LIVRARE NAȚIONALĂ
              </div>
            </div>
            <RFQForm preselectedId={preselected} />
          </div>
        </div>
      </section>
    </main>
  );
}

/* ABOUT */
function AboutPage() {
  useReveal();
  return (
    <main>
      <section className="section" style={{ paddingTop: 80 }}>
        <div className="container">
          <div className="crumb" style={{ fontSize: 12, color: 'var(--ink-mute)', marginBottom: 30, letterSpacing: '0.04em' }}>
            <a href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }} style={{ color: 'inherit' }}>Acasă</a>
            <span style={{ color: 'var(--line)', margin: '0 8px' }}>/</span>
            Despre
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 6vw, 100px)', alignItems: 'start' }} className="about-grid">
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 26, display: 'block' }}><span className="dot"></span>Despre Owithu</div>
              <h1 style={{ marginBottom: 32 }}>Furnizor de veselă<br/><em className="italic-serif" style={{ color: 'var(--mustard-deep)' }}>profesională</em> pentru HoReCa.</h1>
              <p className="lead" style={{ marginBottom: 24 }}>
                Owithu furnizează colecții complete de veselă pentru restaurante, cafenele și hoteluri din România. Lucrăm pe bază de cerere de ofertă, nu prin checkout online.
              </p>
              <p style={{ color: 'var(--ink-soft)', maxWidth: '54ch', marginBottom: 20 }}>
                Modelul este simplu: alegi o colecție din catalog, ne spui despre locația ta, primești o ofertă cu cantități, livrare și termene. Nu există un preț pe etichetă pentru că fiecare cerere e diferită — număr de locuri, frecvență de utilizare, condiții de transport.
              </p>
              <p style={{ color: 'var(--ink-soft)', maxWidth: '54ch' }}>
                Catalogul actual conține peste 20 de colecții <span className="italic-serif" style={{ color: 'var(--ink)' }}>Service Complet</span>, în finisaje mate, reactive sau granitate, pentru 4 sau 6 persoane, în seturi de 30, 36, 42, 48 sau 60 de piese.
              </p>
            </div>
            <div className="reveal">
              <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--bg-elevated)', border: '1px solid var(--line)' }}>
                <img src={IMG('genesis-plus-terre', 6)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-elevated)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="capabilities">
            <div><div className="n">PE CINE SERVIM</div><h4>Restaurante</h4><p>De la bistro neighborhood la fine dining — service-uri 36–48 piese, finisaje sobre, gres durabil.</p></div>
            <div><div className="n">PE CINE SERVIM</div><h4>Cafenele</h4><p>Specialty coffee, brunch & dessert. Texturi tactile, espresso + lungo, farfurioare de desert.</p></div>
            <div><div className="n">PE CINE SERVIM</div><h4>Hoteluri</h4><p>Operațiuni de scară: mic dejun, restaurant, room service. Service-uri Plus 60 piese.</p></div>
            <div><div className="n">PE CINE SERVIM</div><h4>Alt HoReCa</h4><p>Cofetării, ceainării, evenimente. Te ascultăm și recomandăm setul potrivit.</p></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="reveal">
              <div className="eyebrow"><span className="dot"></span>Cum lucrăm</div>
              <h2 style={{ marginTop: 18 }}>Patru pași simpli.</h2>
            </div>
            <p className="reveal">
              Nu vindem prin checkout, nu trimitem prețuri publice, nu te punem într-o coadă de email-uri. Procesul este construit pentru achiziții HoReCa serioase.
            </p>
          </div>
          <div className="process reveal">
            <div>
              <div className="step-n">PASUL 01</div>
              <h4>Identifici colecția</h4>
              <p>Răsfoiești catalogul după segment sau finisaj. Reții colecția potrivită.</p>
            </div>
            <div>
              <div className="step-n">PASUL 02</div>
              <h4>Trimiți cererea</h4>
              <p>Completezi formularul: locație, contact, colecție, număr de locuri.</p>
            </div>
            <div>
              <div className="step-n">PASUL 03</div>
              <h4>Primești oferta</h4>
              <p>Răspuns în 24h lucrătoare cu cantități, preț per piesă, termen de livrare.</p>
            </div>
            <div>
              <div className="step-n">PASUL 04</div>
              <h4>Livrăm & susținem</h4>
              <p>Livrare națională. Reaprovizionarea aceleiași colecții la cerere.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="form-section">
        <div className="container">
          <div className="form-grid">
            <div className="form-side reveal">
              <div className="eyebrow" style={{ marginBottom: 22, display: 'block' }}><span className="dot"></span>Contact direct</div>
              <h2>Hai să <em>vorbim.</em></h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Trimite-ne câteva detalii — sau folosește datele de contact de mai jos pentru o conversație directă.
              </p>
              <ul>
                <li><span className="n">→</span>Email · contact@<span style={{ opacity: 0.6 }}>[domeniu de stabilit]</span></li>
                <li><span className="n">→</span>Telefon · 07xx xxx xxx</li>
                <li><span className="n">→</span>București · luni–vineri 09:00–18:00</li>
              </ul>
              <div className="mono" style={{ marginTop: 36, color: 'var(--mustard)', fontSize: 11, letterSpacing: '0.14em' }}>
                OWITHU MANAGEMENT · 2026
              </div>
            </div>
            <RFQForm />
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, IndustryPage, CollectionsPage, RFQPage, AboutPage });