// BESPOKE — multi-step intake form
function BespokePage() {
  const { navigate } = useRouter();
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    occasion: '', motif: '', metal: '', budget: '', timeline: '',
    name: '', email: '', phone: '', notes: '',
  });
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const steps = [
    {
      title: 'The Occasion',
      subtitle: 'A wedding, an heir, a private anniversary, a gift to oneself.',
      content: (
        <div className="bsp__opts">
          {['Wedding / engagement','Anniversary','Heirloom for a child','Gift','Self','Other'].map((o) => (
            <button key={o} className={`bsp__opt ${data.occasion === o ? 'is-on' : ''}`} onClick={() => update('occasion', o)}>{o}</button>
          ))}
        </div>
      ),
    },
    {
      title: 'A Starting Motif',
      subtitle: 'Anchor the design in a line you already love, or start anew.',
      content: (
        <div className="bsp__opts">
          {[...COLLECTIONS.map((c) => c.name), 'No collection — fresh design'].map((o) => (
            <button key={o} className={`bsp__opt ${data.motif === o ? 'is-on' : ''}`} onClick={() => update('motif', o)}>{o}</button>
          ))}
        </div>
      ),
    },
    {
      title: 'Metal',
      subtitle: 'Gafla works primarily in 18K. Tell us which palette you live in.',
      content: (
        <div className="bsp__opts">
          {['Yellow gold (18K)','Rose gold (18K)','White gold (18K)','Two‑tone / mixed','Open to suggestion'].map((o) => (
            <button key={o} className={`bsp__opt ${data.metal === o ? 'is-on' : ''}`} onClick={() => update('metal', o)}>{o}</button>
          ))}
        </div>
      ),
    },
    {
      title: 'Budget Band',
      subtitle: 'A guiding range. We will work with you privately on the final figure.',
      content: (
        <div className="bsp__opts">
          {['AED 5,000 – 15,000','AED 15,000 – 30,000','AED 30,000 – 75,000','AED 75,000+','Open / advise me'].map((o) => (
            <button key={o} className={`bsp__opt ${data.budget === o ? 'is-on' : ''}`} onClick={() => update('budget', o)}>{o}</button>
          ))}
        </div>
      ),
    },
    {
      title: 'Timeline',
      subtitle: 'A bespoke piece moves at the pace of its drawing.',
      content: (
        <div className="bsp__opts">
          {['Within 4–6 weeks','Within 2–3 months','For a date later this year','No fixed deadline'].map((o) => (
            <button key={o} className={`bsp__opt ${data.timeline === o ? 'is-on' : ''}`} onClick={() => update('timeline', o)}>{o}</button>
          ))}
        </div>
      ),
    },
    {
      title: 'How shall we reach you',
      content: (
        <div className="bsp__fields">
          <input placeholder="Full name" value={data.name} onChange={(e) => update('name', e.target.value)} />
          <input placeholder="Email" type="email" value={data.email} onChange={(e) => update('email', e.target.value)} />
          <input placeholder="Phone or WhatsApp" value={data.phone} onChange={(e) => update('phone', e.target.value)} />
          <textarea placeholder="Anything we should know — references, inscriptions, stones already in family" rows="4" value={data.notes} onChange={(e) => update('notes', e.target.value)} />
        </div>
      ),
    },
  ];

  const cur = steps[step];
  const last = step === steps.length - 1;
  const submitted = step === steps.length;

  return (
    <div className="page-enter">
      <style>{`
        .bsp-hero {
          position: relative; height: 70vh; min-height: 540px; overflow: hidden;
        }
        .bsp-hero__img {
          position: absolute; inset: 0;
          background: url('media/bespoke-workprocess.webp') center 30%/cover no-repeat;
          filter: grayscale(0.1) contrast(1.05);
          animation: breathe 26s ease-in-out infinite;
        }
        .bsp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 30%, transparent), transparent 40%, color-mix(in oklab, var(--ink) 85%, transparent)); }
        .bsp-hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 80px; color: #F4EFE5; }
        .bsp-hero__title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(56px, 8vw, 120px); line-height: 0.95; max-width: 1000px; margin-top: 20px; }
        .bsp-hero__title em { color: var(--gold-soft); }

        .bsp-intro { padding: clamp(80px, 10vw, 130px) 0; border-top: 1px solid var(--rule); }
        .bsp-intro__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 100px); }
        @media (max-width: 760px) { .bsp-intro__grid { grid-template-columns: 1fr; } }
        .bsp-intro__body { font-size: 22px; font-family: var(--display, var(--serif)); line-height: 1.55; max-width: 720px; }
        .bsp-intro__body em { color: var(--accent); }

        .bsp-process { padding: 40px 0; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
        .bsp-process__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
        @media (max-width: 880px) { .bsp-process__inner { grid-template-columns: 1fr; } }
        .bsp-step { padding: 28px 24px; border-right: 1px solid var(--rule); }
        .bsp-step:last-child { border-right: none; }
        .bsp-step__num { font-family: var(--display, var(--serif)); font-size: 38px; color: var(--accent); line-height: 1; }
        .bsp-step__name { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 14px; }
        .bsp-step__desc { color: var(--fg-mute); font-size: 13px; margin-top: 8px; line-height: 1.55; }

        /* FORM */
        .bsp-form { padding: clamp(80px, 10vw, 130px) 0; }
        .bsp-form__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
        @media (max-width: 760px) { .bsp-form__grid { grid-template-columns: 1fr; } }
        .bsp-form__left { position: sticky; top: 110px; }
        .bsp-form__rail { display: flex; flex-direction: column; gap: 14px; }
        .bsp-form__rail__item { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--fg-mute); cursor: pointer; }
        .bsp-form__rail__num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-feature-settings: "tnum"; }
        .bsp-form__rail__item.is-on { color: var(--fg); }
        .bsp-form__rail__item.is-on .bsp-form__rail__num { background: var(--accent); color: var(--bg); border-color: var(--accent); }
        .bsp-form__rail__item.is-done .bsp-form__rail__num { color: var(--accent); border-color: var(--accent); }

        .bsp__kicker { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
        .bsp__step-title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 14px 0 12px; }
        .bsp__step-sub { color: var(--fg-mute); font-size: 16px; max-width: 540px; margin-bottom: 40px; }
        .bsp__opts { display: flex; flex-wrap: wrap; gap: 10px; }
        .bsp__opt {
          padding: 16px 22px;
          border: 1px solid var(--rule-strong);
          font-size: 14px;
          transition: all 0.2s;
        }
        .bsp__opt:hover { border-color: var(--accent); color: var(--accent); }
        .bsp__opt.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
        .bsp__fields { display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
        .bsp__fields input, .bsp__fields textarea {
          background: transparent; color: var(--fg);
          border: none; border-bottom: 1px solid var(--rule-strong);
          padding: 16px 0; font-family: var(--sans); font-size: 16px;
          outline: none; transition: border-color 0.2s;
        }
        .bsp__fields input:focus, .bsp__fields textarea:focus { border-color: var(--accent); }
        .bsp__fields textarea { resize: vertical; min-height: 100px; }

        .bsp__nav { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; }
        .bsp__back { color: var(--fg-mute); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
        .bsp__back:hover { color: var(--fg); }

        .bsp__done {
          padding: 80px 60px;
          text-align: center;
          background: var(--surface);
          border: 1px solid var(--rule);
        }
        .bsp__done h3 { font-family: var(--display, var(--serif)); font-size: 48px; margin-bottom: 18px; }
        .bsp__done h3 em { color: var(--accent); }
        .bsp__done p { color: var(--fg-mute); max-width: 460px; margin: 0 auto 30px; line-height: 1.7; }
      `}</style>

      <section className="bsp-hero">
        <div className="bsp-hero__img"></div>
        <div className="bsp-hero__overlay"></div>
        <div className="container bsp-hero__content">
          <div className="eyebrow" style={{ color: 'var(--gold-soft)' }}>Gafla Bespoke</div>
          <h1 className="bsp-hero__title">A piece, made only <em>once.</em></h1>
        </div>
      </section>

      <section className="bsp-intro">
        <div className="container bsp-intro__grid">
          <Reveal>
            <div className="eyebrow">The Service</div>
          </Reveal>
          <Reveal delay={80}>
            <div className="bsp-intro__body">
              Gafla combines technical expertise with a <em>highly tailored service</em> — translating personal ideas, family stories, and small inscriptions into fine jewellery that will outlast the conversation it began in.
            </div>
          </Reveal>
        </div>
      </section>

      <section className="bsp-process">
        <div className="container">
          <div className="bsp-process__inner">
            {[
              { n: '01', name: 'Conversation', d: 'Either at the Majlis or remotely — what the piece is for, who it is for.' },
              { n: '02', name: 'Drawing', d: 'Hand sketches from the studio in d3, refined together.' },
              { n: '03', name: 'CAD & wax', d: 'Detailed renders and a wax prototype to feel the form.' },
              { n: '04', name: 'Setting', d: 'Stones sourced and set by our atelier partners.' },
              { n: '05', name: 'Hand‑off', d: 'A private delivery at the Majlis or to your preferred address.' },
            ].map((s) => (
              <div key={s.n} className="bsp-step">
                <div className="bsp-step__num">{s.n}</div>
                <div className="bsp-step__name">{s.name}</div>
                <div className="bsp-step__desc">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bsp-form">
        <div className="container bsp-form__grid">
          <div className="bsp-form__left">
            <div className="eyebrow" style={{ marginBottom: 22 }}>Begin a Commission</div>
            <div className="bsp-form__rail">
              {steps.map((s, i) => (
                <div
                  key={i}
                  className={`bsp-form__rail__item ${i === step ? 'is-on' : ''} ${i < step ? 'is-done' : ''}`}
                  onClick={() => !submitted && setStep(i)}
                >
                  <div className="bsp-form__rail__num">{i + 1}</div>
                  <div>{s.title}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            {!submitted ? (
              <Reveal key={step}>
                <div className="bsp__kicker">Step {step + 1} of {steps.length}</div>
                <h2 className="bsp__step-title">{cur.title}</h2>
                {cur.subtitle && <p className="bsp__step-sub">{cur.subtitle}</p>}
                {cur.content}
                <div className="bsp__nav">
                  <button className="bsp__back" onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0} style={{ visibility: step === 0 ? 'hidden' : 'visible' }}>← Back</button>
                  <button className="btn btn--primary" onClick={() => setStep((s) => s + 1)}>
                    {last ? 'Send Commission' : 'Continue'}
                  </button>
                </div>
              </Reveal>
            ) : (
              <Reveal>
                <div className="bsp__done">
                  <h3>Received with <em>care.</em></h3>
                  <p>Thank you, {data.name || 'and welcome'}. A member of the Gafla atelier will reach out within two working days to begin the conversation.</p>
                  <button className="btn btn--ghost arrow" onClick={() => navigate('home')}>Return Home</button>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BespokePage });