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

function RfqHi() {
  // Pre-completare contextuală din butoanele „Cere ofertă" de pe paginile de
  // colecție / piesă: ?colectie=<nume>[&piesa=<nume piesă>]. Chip vizibil,
  // dismissibil; mesajul e pre-scris dar editabil. Vizita directă (fără
  // parametri) lasă formularul EXACT ca înainte.
  const [ctx, setCtx] = React.useState(() => {
    try {
      const sp = new URLSearchParams(window.location.search);
      const colectie = sp.get('colectie');
      return colectie ? { colectie, piesa: sp.get('piesa') || null } : null;
    } catch (e) { return null; }
  });
  const ctxMsg = ctx
    ? `Bună ziua, aș dori o ofertă pentru colecția ${ctx.colectie}${ctx.piesa ? ` — piesa ${ctx.piesa}` : ''}. Vă rog să reveniți cu detalii și disponibilitate. Mulțumesc!`
    : null;
  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: 96 }}>
            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>
            {/* CHIP CONTEXT — vizibil doar când cererea vine dintr-un buton
                contextual; dismissibil (revine la formularul standard). */}
            {ctx && (
              <div data-hf-rfq-context="" style={{
                display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
                padding: '14px 18px', marginBottom: 36,
                background: HF.paper, border: '1.5px solid var(--accent)',
              }}>
                <span aria-hidden style={{ display: 'inline-flex', color: 'var(--accent)' }}><HfIcon name="doc" size={16} /></span>
                <span style={{ fontFamily: hfBody, fontSize: 14, color: HF.ink, lineHeight: 1.5, flex: '1 1 auto' }}>
                  <strong style={{ fontWeight: 700 }}>Cerere pentru:</strong> Colecția {ctx.colectie}
                  {ctx.piesa && <> — piesa <strong style={{ fontWeight: 700 }}>{ctx.piesa}</strong></>}
                </span>
                <button onClick={() => setCtx(null)} aria-label="Renunță la contextul pre-completat" title="Renunță la context" style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 28, height: 28, flex: '0 0 auto', cursor: 'pointer',
                  background: 'transparent', border: `1px solid ${HF.line2}`, color: HF.ink, padding: 0,
                }}>
                  <svg width="12" height="12" viewBox="0 0 18 18" aria-hidden><path d="M3 3l12 12M15 3L3 15" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" /></svg>
                </button>
              </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 }}>
              {/* Tip locație — butoane cu bifă în loc de dropdown */}
              <HfChoiceGroup
                label="Tip locație" required
                options={['Restaurante și evenimente', 'Cafenele și bar', 'Hotel și pensiuni']}
                style={{ gridColumn: '1 / -1' }}
              />
              <HfField label="Nume firmă / locație" required hint="ex: Restaurant Doi Cocoși SRL" style={{ gridColumn: '1 / -1' }} />
              <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" value={ctx ? ctx.colectie : undefined} hint="GENESIS Terre, IRIS Bleu nuit…" />
                <HfField label="Sau: tip produse" value={ctx && ctx.piesa ? ctx.piesa : undefined} hint="cești espresso, farfurii, boluri" />
                <HfField label="Număr locuri / mese" 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} value={ctxMsg || undefined} />
              </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 746 970 194</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 — contact@owithu.ro</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>
  );
}

// 'Despre noi' a fost integrat în homepage (secțiunile #despre / #proces);
// site/despre.html redirecționează către site/index.html#despre.

Object.assign(window, { RfqHi });