// Hi-fi RFQ standalone page + Success state preview + Despre/Contact page.

function RfqHi() {
  return (
    <HfPage>
      <HfHeader />

      {/* HEADER */}
      <section style={{ padding: '72px 56px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: hfBody, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2, marginBottom: 22 }}>
          <span>Acasă</span><span style={{ color: HF.ink3 }}>›</span><span style={{ color: HF.ink }}>Cerere ofertă</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'end' }}>
          <HfH1 style={{ fontSize: 108 }}>
            Cerere de <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>ofertă</em>.
          </HfH1>
          <HfLede dim style={{ maxWidth: 440 }}>
            Trimite-ne câteva detalii despre locația ta și colecțiile de interes. Un consultant revine cu o ofertă personalizată în maxim 24 de ore. Fără spam, fără call urmărit.
          </HfLede>
        </div>
      </section>

      {/* PROCESS STRIP */}
      <section style={{ padding: '48px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {[
            { n: '01', t: 'Completezi cererea', d: 'aprox. 2 minute' },
            { n: '02', t: 'Primești confirmare', d: 'pe email instant' },
            { n: '03', t: 'Te sună un consultant', d: 'în maxim 24h' },
            { n: '04', t: 'Primești oferta', d: 'cu colecțiile recomandate' },
          ].map((s, i) => (
            <div key={s.n} style={{
              paddingLeft: i > 0 ? 24 : 0, paddingRight: 24,
              borderLeft: i > 0 ? `1px solid ${HF.line}` : 'none',
            }}>
              <div style={{ fontFamily: hfDisplay, fontSize: 36, fontWeight: 400, color: 'var(--accent)', lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontFamily: hfDisplay, fontSize: 24, fontWeight: 500, color: HF.ink, marginTop: 16 }}>{s.t}</div>
              <HfText sm dim style={{ marginTop: 6 }}>{s.d}</HfText>
            </div>
          ))}
        </div>
      </section>

      {/* MAIN FORM */}
      <section style={{ padding: '88px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 56 }}>
          {/* Form */}
          <div>
            {/* Locație */}
            <HfEyebrow num="01">Datele locației</HfEyebrow>
            <HfH2 style={{ marginBottom: 32, fontSize: 40 }}>Despre tine și business-ul tău.</HfH2>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, columnGap: 32 }}>
              <HfField label="Nume firmă / locație" required hint="ex: Restaurant Doi Cocoși SRL" />
              <HfField label="Tip locație" required value="Restaurant" />
              <HfField label="Oraș" required hint="București" />
              <HfField label="Județ" hint="Ilfov" />
              <HfField label="Persoană contact" required hint="Maria Popescu" />
              <HfField label="Funcție" hint="manager, owner, F&B director" />
              <HfField label="Telefon" required hint="07XX XXX XXX" />
              <HfField label="Email" hint="opțional, util pentru ofertă scrisă" />
            </div>

            {/* Cerere */}
            <div style={{ marginTop: 56 }}>
              <HfEyebrow num="02">Detalii cerere</HfEyebrow>
              <HfH2 style={{ marginBottom: 32, fontSize: 40 }}>Spune-ne ce <em style={{ fontStyle: 'italic', fontWeight: 400 }}>cauți</em>.</HfH2>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, columnGap: 32 }}>
                <HfField label="Colecții de interes" hint="GENESIS Terre, IRIS Bleu nuit…" />
                <HfField label="Sau: tip produse" hint="cești espresso, farfurii, boluri" />
                <HfField label="Număr persoane / locuri" hint="40 locuri · 12 mese" />
                <HfField label="Buget orientativ" hint="opțional" />
                <HfField label="Termen necesar" hint="ex: până în iunie 2026" />
                <HfField label="Cum ai aflat de OwithU" hint="Google, recomandare, social media" />
              </div>
              <div style={{ marginTop: 32 }}>
                <HfTextarea label="Mesaj · detalii relevante" hint="ex: căutăm o colecție coerentă pentru deschiderea unui bistro mediterranean…" h={130} />
              </div>
            </div>

            {/* Consimțământ */}
            <div style={{
              marginTop: 40, padding: '20px 24px',
              border: `1px solid ${HF.line2}`, background: HF.paper2,
            }}>
              <label style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontFamily: hfBody, fontSize: 14, color: HF.ink, lineHeight: 1.5 }}>
                <span style={{ width: 18, height: 18, border: `1.5px solid ${HF.ink}`, marginTop: 2, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ width: 10, height: 10, background: 'var(--accent)' }}></span>
                </span>
                <span>Sunt de acord cu prelucrarea datelor în scopul ofertării <span style={{ color: HF.ink2 }}>(GDPR · politica de confidențialitate)</span>.</span>
              </label>
              <label style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontFamily: hfBody, fontSize: 14, color: HF.ink2, lineHeight: 1.5, marginTop: 14 }}>
                <span style={{ width: 18, height: 18, border: `1.5px solid ${HF.ink3}`, marginTop: 2, flex: '0 0 auto' }}></span>
                <span>Doresc să primesc periodic informații despre colecții noi <span style={{ color: HF.ink3 }}>(opțional)</span>.</span>
              </label>
            </div>

            {/* Submit */}
            <div style={{ marginTop: 36, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20 }}>
              <HfText sm dim style={{ maxWidth: 320, lineHeight: 1.45 }}>
                Datele rămân la OwithU. Folosim doar pentru ofertare — fără email marketing intruziv.
              </HfText>
              <div style={{ display: 'flex', gap: 14 }}>
                <HfBtn variant="outline" size="lg">Salvează ciornă</HfBtn>
                <HfBtn variant="accent" size="lg" arrow>Trimite cererea</HfBtn>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <div style={{ border: `1px solid ${HF.line2}`, padding: 32, background: HF.paper }}>
              <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 18 }}>Ce primești înapoi</div>
              <div style={{ display: 'grid', gap: 18 }}>
                {[
                  'confirmare instant pe email',
                  '2-3 recomandări de colecții, cu argumente',
                  'estimare piese pentru capacitatea ta',
                  'ofertă comercială pe email · TVA inclus',
                  'demo fizic la cerere · București / online',
                ].map((r, i) => (
                  <div key={r} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{ fontFamily: hfDisplay, fontSize: 20, fontWeight: 400, color: 'var(--accent)', minWidth: 26 }}>0{i + 1}</span>
                    <HfText sm style={{ fontSize: 14 }}>{r}</HfText>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ border: `1px solid ${HF.ink}`, padding: 32, background: HF.ink, color: '#fff' }}>
              <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 14 }}>Preferi telefonul?</div>
              <div style={{ fontFamily: hfDisplay, fontSize: 36, fontWeight: 400, color: '#fff' }}>+40 7XX XXX XXX</div>
              <HfText light sm dim style={{ marginTop: 8 }}>L-V, 9:00-18:00 · răspundem și pe WhatsApp Business</HfText>
              <div style={{ marginTop: 20, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.12)' }}>
                <HfText light sm dim style={{ fontSize: 13 }}>email — [ office@... · de completat ]</HfText>
              </div>
            </div>

            <div style={{
              padding: '18px 22px', background: 'var(--accent)',
              color: HF.ink,
            }}>
              <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase' }}>WhatsApp Business</div>
              <HfText sm style={{ marginTop: 4 }}>Răspundem mai rapid pe WhatsApp decât pe email.</HfText>
            </div>
          </aside>
        </div>
      </section>

      {/* SUCCESS STATE PREVIEW */}
      <section style={{ padding: '88px 56px', background: HF.paper2, borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 40 }}>
          <div>
            <HfEyebrow num="·">Stare după trimitere</HfEyebrow>
            <HfH2>Confirmare.</HfH2>
          </div>
          <HfText sm dim>previzualizare</HfText>
        </div>
        <div style={{
          background: HF.paper, padding: 64, textAlign: 'center',
          maxWidth: 760, margin: '0 auto',
          border: `1px solid ${HF.line2}`,
        }}>
          <div style={{
            width: 80, height: 80, borderRadius: '50%',
            background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto',
          }}>
            <svg width="36" height="36" viewBox="0 0 36 36" aria-hidden>
              <path d="M9 18 L15 24 L27 12" stroke={HF.ink} strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <HfH2 style={{ marginTop: 32, fontSize: 44 }}>Cererea a fost <em style={{ fontStyle: 'italic', fontWeight: 400 }}>înregistrată</em>.</HfH2>
          <HfLede dim style={{ marginTop: 18, maxWidth: 520, marginInline: 'auto' }}>
            Mulțumim, <strong style={{ color: HF.ink }}>Maria Popescu</strong>. Revenim cu o ofertă personalizată în maxim 24h. Vei primi și o confirmare pe email.
          </HfLede>
          <div style={{ marginTop: 28, fontFamily: hfBody, fontSize: 13, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: HF.ink2 }}>
            referință: <span style={{ color: HF.ink, fontFamily: hfDisplay, fontSize: 22, fontWeight: 500, letterSpacing: '0.02em', textTransform: 'none', marginLeft: 6 }}>#OWHRC-2026-0231</span>
          </div>
          <div style={{ marginTop: 32, display: 'flex', gap: 14, justifyContent: 'center' }}>
            <HfBtn variant="outline" href={HFRoutes.col}>Înapoi la colecții</HfBtn>
            <HfBtn variant="accent" arrow href={HFRoutes.col}>Vezi alte colecții</HfBtn>
          </div>
        </div>
      </section>

      <HfFooter />
    </HfPage>
  );
}

function DespreHi() {
  return (
    <HfPage>
      <HfHeader active="desp" />

      {/* HERO */}
      <section style={{ padding: '88px 56px 96px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: hfBody, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2, marginBottom: 22 }}>
          <span>Acasă</span><span style={{ color: HF.ink3 }}>›</span><span style={{ color: HF.ink }}>Despre</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
          <HfH1 style={{ fontSize: 96, lineHeight: 0.98 }}>
            Furnizor B2B<br/>
            de <em style={{ fontStyle: 'italic', fontWeight: 400 }}>vesela profesională</em><br/>
            pentru <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>HoReCa</em>.
          </HfH1>
          <HfLede dim style={{ maxWidth: 420 }}>
            OwithU livrează colecții complete pentru restaurante, cafenele și hoteluri din România. Operăm prin cerere de ofertă, nu prin catalog public — așa ne putem concentra pe potrivirea colecției cu locația.
          </HfLede>
        </div>
      </section>

      {/* SPLIT EDITORIAL — Who we serve / What we provide */}
      <section style={{ borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <div style={{ padding: '80px 56px 80px 56px', borderRight: `1px solid ${HF.line}` }}>
            <HfEyebrow num="01">Pentru cine</HfEyebrow>
            <HfH2 style={{ marginBottom: 24 }}>Locații HoReCa <em style={{ fontStyle: 'italic', fontWeight: 400 }}>din toată țara</em>.</HfH2>
            <HfLede dim style={{ marginBottom: 32 }}>
              Restaurante de la bistro casual până la fine-dining gastronomic. Cafenele de tip specialty și brunch. Hoteluri boutique și city pentru breakfast, restaurant principal și room service. Alte locații HoReCa la cerere.
            </HfLede>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {['Restaurante', 'Cafenele', 'Hoteluri', 'Catering', 'Bistro-uri', 'Patiserii', 'Resort-uri'].map(t => (
                <span key={t} style={{
                  fontFamily: hfBody, fontSize: 13, fontWeight: 500,
                  padding: '8px 14px', border: `1px solid ${HF.line2}`,
                  color: HF.ink,
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div style={{ padding: '80px 56px' }}>
            <HfEyebrow num="02">Ce facem</HfEyebrow>
            <HfH2 style={{ marginBottom: 24 }}>Colecții complete + <em style={{ fontStyle: 'italic', fontWeight: 400 }}>sourcing pe ofertă</em>.</HfH2>
            <HfLede dim style={{ marginBottom: 32 }}>
              Lucrăm cu colecții complete între 28 și 60 piese, pentru 4-6 persoane. Nu vindem pe SKU individual în faza 1. Sourcing prin colaborarea cu producători europeni — stoneware cu email reactiv și porțelan pictat manual.
            </HfLede>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <HfSpec>Colecții complete</HfSpec>
              <HfSpec>Cerere ofertă &lt; 24h</HfSpec>
              <HfSpec>Estimare piese pentru capacitate</HfSpec>
              <HfSpec>Restock anual previzibil</HfSpec>
              <HfSpec>Producători europeni</HfSpec>
              <HfSpec>Demo fizic la cerere</HfSpec>
            </div>
          </div>
        </div>
      </section>

      {/* WORKING PHILOSOPHY — large editorial image + quote */}
      <section style={{ borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 520 }}>
          <HfImg src="img/h-zen.jpg" alt="ZEN Natural · table set" h="100%" />
          <div style={{
            background: HF.paper2, padding: '80px 56px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }}>
            <HfEyebrow num="03">Filozofie</HfEyebrow>
            <div style={{ fontFamily: hfDisplay, fontSize: 56, fontWeight: 400, fontStyle: 'italic', lineHeight: 1.12, color: HF.ink, maxWidth: 540 }}>
              „O colecție bună e una pe care o poți comanda din nou peste trei ani — și încă arată ca prima zi."
            </div>
            <HfText style={{ marginTop: 28, fontFamily: hfBody, fontSize: 13, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: HF.ink2 }}>
              · principiul Service Complet
            </HfText>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section style={{ padding: '96px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <HfEyebrow num="04">Cum lucrăm</HfEyebrow>
        <HfH2 style={{ marginBottom: 56, maxWidth: 760 }}>O singură cerere → o <em style={{ fontStyle: 'italic', fontWeight: 400 }}>ofertă personală</em>.</HfH2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${HF.line}` }}>
          {[
            { t: 'discovery', d: 'aflăm despre locația ta, meniu, capacitate, identitate vizuală' },
            { t: 'curare', d: 'selectăm 2-3 colecții potrivite din portofoliu' },
            { t: 'ofertă', d: 'estimăm piesele, propunem o ofertă comercială pe email' },
            { t: 'livrare', d: 'organizăm livrarea și planul de restock anual' },
          ].map((s, i) => (
            <div key={s.t} style={{
              padding: '36px 32px 36px 0',
              paddingLeft: i > 0 ? 32 : 0,
              borderRight: i < 3 ? `1px solid ${HF.line2}` : 'none',
            }}>
              <div style={{ fontFamily: hfDisplay, fontSize: 52, fontWeight: 400, color: 'var(--accent)', lineHeight: 1 }}>0{i + 1}</div>
              <HfH3 style={{ marginTop: 24, marginBottom: 12, textTransform: 'capitalize', fontSize: 26 }}>{s.t}</HfH3>
              <HfText dim sm>{s.d}</HfText>
            </div>
          ))}
        </div>
      </section>

      {/* PHASE 2 NOTE */}
      <section style={{ padding: '64px 56px', background: HF.paper2, borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56, alignItems: 'center' }}>
          <HfEyebrow num="05">Faza următoare · roadmap</HfEyebrow>
          <div>
            <HfH2 style={{ fontSize: 36, marginBottom: 18 }}>De la cerere de ofertă la <em style={{ fontStyle: 'italic', fontWeight: 400 }}>catalog complet</em>.</HfH2>
            <HfText dim style={{ maxWidth: 700 }}>
              În faza 2 vom adăuga: pagini per produs cu specificații complete, coș și plată online, comenzi recurente pentru restock automat, dashboard pentru contractanți cu istoric.
              Estimat după validarea fazei 1.
            </HfText>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section style={{ padding: '96px 56px', borderBottom: `1px solid ${HF.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64 }}>
          <div>
            <HfEyebrow num="06">Contact</HfEyebrow>
            <HfH1 style={{ fontSize: 80 }}>Hai să <em style={{ fontStyle: 'italic', fontWeight: 400 }}>vorbim</em>.</HfH1>
            <HfLede dim style={{ marginTop: 18, maxWidth: 480 }}>
              Cel mai rapid mod este cererea de ofertă. Dacă preferi să ne suni direct sau să ne scrii pe WhatsApp, suntem disponibili în zilele lucrătoare.
            </HfLede>
            <div style={{ marginTop: 40, borderTop: `1px solid ${HF.ink}` }}>
              {[
                { l: 'telefon', v: '+40 7XX XXX XXX', n: 'L-V, 9:00-18:00' },
                { l: 'email',   v: '[ office@... · de completat ]', n: 'răspundem în 24h' },
                { l: 'WhatsApp Business', v: '+40 7XX XXX XXX', n: 'cel mai rapid' },
                { l: 'showroom', v: '[ adresă · de completat ]', n: 'București · la cerere' },
              ].map(c => (
                <div key={c.l} style={{
                  display: 'grid', gridTemplateColumns: '0.4fr 1fr 0.5fr', gap: 28,
                  padding: '24px 0', borderBottom: `1px solid ${HF.line}`,
                  alignItems: 'baseline',
                }}>
                  <div style={{ fontFamily: hfBody, fontSize: 11, fontWeight: 700, letterSpacing: '0.20em', textTransform: 'uppercase', color: HF.ink2 }}>{c.l}</div>
                  <div style={{ fontFamily: hfDisplay, fontSize: 26, fontWeight: 500, color: HF.ink }}>{c.v}</div>
                  <HfText sm dim>{c.n}</HfText>
                </div>
              ))}
            </div>
          </div>
          <div>
            <HfImg src="img/h-genesis-plus.jpg" alt="GENESIS Plus · breakfast hotel" h={460} />
            <div style={{ marginTop: 28, padding: 28, border: `1px solid ${HF.ink}`, background: HF.paper }}>
              <HfEyebrow num="·">Cea mai rapidă cale</HfEyebrow>
              <HfH3>Trimite cerere de ofertă</HfH3>
              <HfText dim sm style={{ marginTop: 12, marginBottom: 22 }}>
                Câteva detalii și revenim cu 2-3 colecții potrivite. Toate datele rămân la OwithU.
              </HfText>
              <HfBtn variant="accent" arrow href={HFRoutes.rfq}>Cere ofertă</HfBtn>
            </div>
          </div>
        </div>
      </section>

      <HfFooter />
    </HfPage>
  );
}

Object.assign(window, { RfqHi, DespreHi });