/* global React, HOUSE, D3_LISTINGS, Silk, SectionHeader, PageHero, Detail */
// ============== SERVICE PAGES: Founders, Appointments, Contact ==============

const { useState: useStateSvc } = React;

// -------- FOUNDERS --------
function FoundersPage({ setRoute }) {
  const [who, setWho] = useStateSvc('mc');
  return (
    <div className="page" data-screen-label="08 Founders">
      <PageHero
        eyebrow="The founders"
        title={<>Two hands.<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>One house.</span></>}
        sub="A creative direction from Manila by way of Dubai, partnered with a Dubai-based business hand. The independent Michael Cinco label was formalised by the end of 2013."
      />

      <section className="shell" style={{ paddingBottom: 24 }}>
        <hr className="rule" style={{ marginBottom: 24 }} />
        <div style={{ display: 'flex', gap: 12 }}>
          <button className={`chip ${who === 'mc' ? 'active' : ''}`} onClick={() => setWho('mc')}>Michael Cinco · Creative Director</button>
          <button className={`chip ${who === 'sa' ? 'active' : ''}`} onClick={() => setWho('sa')}>Dr. Sayed Ali · Co-founder, CEO</button>
        </div>
      </section>

      <section className="section-tight shell">
        {who === 'mc' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
            <Silk label="Portrait · awaiting client supply" aspect="4/5" style={{ aspectRatio: '4/5' }} />
            <div>
              <div className="tag-num">Creative Director</div>
              <h2 className="display-l" style={{ marginTop: 12, marginBottom: 24 }}>Michael Cinco</h2>
              <p className="lede">
                Born in Samar. Trained in Fine Arts at the University of the Philippines Diliman.
                Refined his craft at Slim's Fashion and Arts School in Manila. Launched his first
                Haute Couture line in 2003.
              </p>
              <div style={{ marginTop: 32, display: 'grid', gap: 18, color: 'var(--ink-dim)' }}>
                <p>
                  His work sits at the seam of architecture and embroidery — long lines, crystal
                  weight, and a Filipino discipline of hand-finishing brought to a Dubai salon.
                </p>
                <p>
                  Pieces have appeared on public-record red carpets and editorial covers
                  internationally. The Archive page details those moments with attribution and
                  rights status.
                </p>
              </div>
              <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <Detail k="Discipline" v="Couture, Bridal Couture, Editorial" />
                <Detail k="Salon" v="Building 4, d3, Dubai" />
              </div>
            </div>
          </div>
        )}

        {who === 'sa' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
            <Silk label="Portrait · pending Dr. Sayed Ali approval" aspect="4/5" style={{ aspectRatio: '4/5' }} />
            <div>
              <div className="tag-num">Co-founder · Chief Executive</div>
              <h2 className="display-l" style={{ marginTop: 12, marginBottom: 24 }}>Dr. Sayed Ali</h2>
              <p className="lede">
                Co-founder, business partner and Chief Executive of the independent Michael Cinco
                label, formalised by the end of 2013 in Dubai.
              </p>
              <div style={{ marginTop: 32, display: 'grid', gap: 18, color: 'var(--ink-dim)' }}>
                <p>
                  Holds the operating side of the house — salon strategy, commercial direction,
                  partnerships and the Dubai Design District presence across couture, jewellery
                  and ready-to-wear locations.
                </p>
                <p className="body-sm" style={{ color: 'var(--ink-soft)' }}>
                  Public-facing biographical detail beyond his role appears here only with Dr. Sayed
                  Ali's confirmation. Photograph and extended biography will replace this block
                  once approval is provided.
                </p>
              </div>
            </div>
          </div>
        )}
      </section>

      {/* History nuance — explicit, museum label */}
      <section className="section" style={{ background: 'var(--surface)' }}>
        <div className="shell">
          <div className="kicker" style={{ marginBottom: 40 }}>
            <h3 className="display-l" style={{ margin: 0 }}>A house, in two acts.</h3>
            <div className="eyebrow">Establishment record</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
            {[
              { yr: '2003', t: 'First haute couture line', d: 'Michael Cinco launches his first Haute Couture line in Dubai.' },
              { yr: '2013', t: 'Independent label formalised', d: 'Sayed Ali and Michael Cinco establish the independent Michael Cinco label, formalised by year-end 2013.' },
            ].map((m, i) => (
              <div key={m.yr} style={{ padding: 48, borderRight: i === 0 ? '1px solid var(--rule)' : 'none', display: 'grid', gap: 18 }}>
                <span className="display-xl" style={{ fontSize: 'clamp(64px, 9vw, 140px)', margin: 0 }}>{m.yr}</span>
                <h4 className="display-s" style={{ margin: 0 }}>{m.t}</h4>
                <p className="body">{m.d}</p>
              </div>
            ))}
          </div>
          <p className="body-sm" style={{ marginTop: 24, color: 'var(--ink-soft)' }}>
            Older press sometimes compresses this history to "Dubai label since 2003." The
            two-date record above follows the official Founders page and is the precise version
            of the establishment story.
          </p>
        </div>
      </section>
    </div>
  );
}

// -------- APPOINTMENTS — interactive multi-step booking --------
function AppointmentsPage({ setRoute }) {
  const [step, setStep] = useStateSvc(1);
  const [form, setForm] = useStateSvc({
    service: '',
    occasion: '',
    timeframe: '',
    name: '',
    email: '',
    phone: '',
    city: '',
    visit: '',
    referredBy: '',
    notes: '',
  });
  const [errors, setErrors] = useStateSvc({});
  const [submitted, setSubmitted] = useStateSvc(false);

  const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validateStep = () => {
    const e = {};
    if (step === 1 && !form.service) e.service = 'Choose a service line.';
    if (step === 2) {
      if (!form.occasion) e.occasion = 'Tell us the moment this is for.';
      if (!form.timeframe) e.timeframe = 'Pick an indicative window.';
    }
    if (step === 3) {
      if (!form.name.trim()) e.name = 'Required.';
      if (!form.email.match(/.+@.+\..+/)) e.email = 'A valid email address, please.';
      if (!form.phone.match(/^[\d+\s\-()]{7,}$/)) e.phone = 'Include a contactable phone or WhatsApp number.';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const next = () => { if (validateStep()) setStep(s => Math.min(4, s + 1)); };
  const back = () => setStep(s => Math.max(1, s - 1));
  const submit = () => { if (validateStep()) setSubmitted(true); };

  if (submitted) {
    return (
      <div className="page" data-screen-label="09 Appointments — Confirmed">
        <section className="shell section" style={{ minHeight: '60vh' }}>
          <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', display: 'grid', gap: 28 }}>
            <div className="eyebrow" style={{ justifyContent: 'center' }}><span className="dot"></span>Request received</div>
            <h1 className="display-xl" style={{ margin: 0 }}>
              <span className="serif-it" style={{ color: 'var(--champagne-deep)' }}>Merci.</span>
            </h1>
            <p className="lede" style={{ margin: '0 auto', maxWidth: 560 }}>
              A salon coordinator will reply within one working day at <strong style={{ color: 'var(--ink)' }}>{form.email}</strong>
              {' '}or <strong style={{ color: 'var(--ink)' }}>{form.phone}</strong> to propose a private appointment in Dubai.
            </p>
            <div style={{ marginTop: 18, textAlign: 'left', background: 'var(--surface)', padding: 32, border: '1px solid var(--rule-soft)' }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Your request — reference RA-{Math.random().toString(36).slice(2,7).toUpperCase()}</div>
              <dl style={{ display: 'grid', gridTemplateColumns: '160px 1fr', columnGap: 24, rowGap: 10, fontSize: 14, margin: 0 }}>
                <dt className="tag-num">Name</dt><dd style={{ margin: 0 }}>{form.name}</dd>
                <dt className="tag-num">Service line</dt><dd style={{ margin: 0 }}>{form.service}</dd>
                <dt className="tag-num">Occasion</dt><dd style={{ margin: 0 }}>{form.occasion}</dd>
                <dt className="tag-num">Window</dt><dd style={{ margin: 0 }}>{form.timeframe}</dd>
                <dt className="tag-num">Visit</dt><dd style={{ margin: 0 }}>{form.visit || 'In salon, Dubai'}</dd>
              </dl>
            </div>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'center', marginTop: 8 }}>
              <button className="btn" onClick={() => setRoute('home')}>Return to the house <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setStep(1); setForm({ service:'',occasion:'',timeframe:'',name:'',email:'',phone:'',city:'',visit:'',referredBy:'',notes:'' }); }}>Make another request</button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page" data-screen-label="09 Appointments">
      <PageHero
        eyebrow="Private appointment"
        title={<>Begin the<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>conversation.</span></>}
        sub="Couture, bridal and jewellery appointments take place in our Dubai Design District salon. Ready-to-wear and fragrance can be served by appointment or online. The first conversation is always in person where it can be."
      />

      <section className="shell section-tight">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start' }}>
          {/* Step rail */}
          <aside className="step-rail" style={{ position: 'sticky', top: 100 }}>
            <StepRow n="01" label="Service" value={form.service} active={step === 1} complete={step > 1} onClick={() => setStep(1)} />
            <StepRow n="02" label="Occasion & window" value={[form.occasion, form.timeframe].filter(Boolean).join(' · ')} active={step === 2} complete={step > 2} onClick={() => form.service && setStep(2)} />
            <StepRow n="03" label="You" value={form.name && form.email ? `${form.name} · ${form.email}` : ''} active={step === 3} complete={step > 3} onClick={() => form.timeframe && setStep(3)} />
            <StepRow n="04" label="Review & send" value="" active={step === 4} complete={false} onClick={() => form.phone && setStep(4)} />
            <hr className="rule" style={{ margin: '32px 0' }} />
            <div className="eyebrow" style={{ marginBottom: 12 }}>Or speak directly</div>
            <div className="body" style={{ color: 'var(--ink)' }}>
              <div style={{ marginBottom: 6 }}>{HOUSE.appointmentMobile}</div>
              <div style={{ marginBottom: 14 }}><a className="link" href={`https://${HOUSE.whatsapp}`}>WhatsApp · {HOUSE.appointmentMobile}</a></div>
              <a className="link" href={`mailto:${HOUSE.email}`}>{HOUSE.email}</a>
            </div>
          </aside>

          {/* Step content */}
          <div style={{ background: 'var(--surface)', border: '1px solid var(--rule-soft)', padding: 'clamp(28px, 4vw, 56px)', minHeight: 540 }}>
            <div className="tag-num" style={{ marginBottom: 12 }}>Step {step} of 4</div>

            {step === 1 && (
              <div>
                <h2 className="display-m" style={{ marginTop: 0, marginBottom: 22 }}>Which service line is this for?</h2>
                <p className="body-lg" style={{ marginBottom: 36 }}>
                  This routes your request to the right salon — couture, bridal, ready-to-wear,
                  jewellery or fragrance.
                </p>
                <div style={{ display: 'grid', gap: 12 }}>
                  {[
                    'Haute Couture · Made-to-measure',
                    'Bridal · Atelier, Couture or RTW',
                    'Ready-to-Wear · Tailoring or salon viewing',
                    'Jewellery · Private session',
                    'Fragrance · Discovery',
                    'Editorial / Press · By representation',
                  ].map(s => (
                    <label key={s} style={{
                      display: 'flex', alignItems: 'center', gap: 18, cursor: 'pointer',
                      padding: '18px 22px',
                      border: '1px solid ' + (form.service === s ? 'var(--ink)' : 'var(--rule)'),
                      background: form.service === s ? 'var(--ink)' : 'transparent',
                      color: form.service === s ? 'var(--bg)' : 'var(--ink)',
                      transition: 'all .15s'
                    }}>
                      <input type="radio" name="service" checked={form.service === s} onChange={() => setF('service', s)} style={{ accentColor: 'var(--champagne-deep)' }} />
                      <span style={{ fontSize: 14, letterSpacing: '0.04em' }}>{s}</span>
                    </label>
                  ))}
                </div>
                {errors.service && <div className="err" style={{ marginTop: 18, color: 'var(--maroon)' }}>{errors.service}</div>}
              </div>
            )}

            {step === 2 && (
              <div>
                <h2 className="display-m" style={{ marginTop: 0, marginBottom: 22 }}>The occasion — and the window.</h2>
                <p className="body-lg" style={{ marginBottom: 36 }}>
                  An honest scope makes for a better first conversation. Both fields stay between
                  you and the salon team.
                </p>
                <div className={`field ${errors.occasion ? 'invalid' : ''}`} style={{ marginBottom: 28 }}>
                  <label>The occasion</label>
                  <input value={form.occasion} onChange={e => setF('occasion', e.target.value)} placeholder="A red-carpet appearance, a private wedding, an editorial commission…" />
                  {errors.occasion && <div className="err">{errors.occasion}</div>}
                </div>
                <div className={`field ${errors.timeframe ? 'invalid' : ''}`} style={{ marginBottom: 28 }}>
                  <label>Indicative window</label>
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 6 }}>
                    {['Within 6 weeks','2–3 months','4–6 months','6–9 months','Open / Exploratory'].map(w => (
                      <button key={w} type="button" className={`chip ${form.timeframe === w ? 'active' : ''}`} onClick={() => setF('timeframe', w)}>{w}</button>
                    ))}
                  </div>
                  {errors.timeframe && <div className="err">{errors.timeframe}</div>}
                </div>
                <div className="field">
                  <label>Anything we should know (optional)</label>
                  <textarea value={form.notes} onChange={e => setF('notes', e.target.value)} placeholder="Reference looks, fabric preferences, accessibility, the names of guests joining…" rows={4} />
                </div>
              </div>
            )}

            {step === 3 && (
              <div>
                <h2 className="display-m" style={{ marginTop: 0, marginBottom: 22 }}>Where shall we reach you?</h2>
                <p className="body-lg" style={{ marginBottom: 36 }}>
                  We reply within one working day, by your preferred channel.
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
                  <div className={`field ${errors.name ? 'invalid' : ''}`}>
                    <label>Full name</label>
                    <input value={form.name} onChange={e => setF('name', e.target.value)} placeholder="As you would like to be addressed" />
                    {errors.name && <div className="err">{errors.name}</div>}
                  </div>
                  <div className={`field ${errors.phone ? 'invalid' : ''}`}>
                    <label>Phone or WhatsApp</label>
                    <input value={form.phone} onChange={e => setF('phone', e.target.value)} placeholder="+971 …" />
                    {errors.phone && <div className="err">{errors.phone}</div>}
                  </div>
                  <div className={`field ${errors.email ? 'invalid' : ''}`}>
                    <label>Email</label>
                    <input value={form.email} onChange={e => setF('email', e.target.value)} placeholder="you@…" type="email" />
                    {errors.email && <div className="err">{errors.email}</div>}
                  </div>
                  <div className="field">
                    <label>City / country</label>
                    <input value={form.city} onChange={e => setF('city', e.target.value)} placeholder="Dubai · Riyadh · Paris …" />
                  </div>
                  <div className="field">
                    <label>Visit preference</label>
                    <select value={form.visit} onChange={e => setF('visit', e.target.value)}>
                      <option value="">—</option>
                      <option>In salon, Dubai (recommended)</option>
                      <option>Virtual first conversation</option>
                      <option>Atelier-to-you, by arrangement</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Referred by (optional)</label>
                    <input value={form.referredBy} onChange={e => setF('referredBy', e.target.value)} placeholder="A stylist, a previous client, a publication…" />
                  </div>
                </div>
              </div>
            )}

            {step === 4 && (
              <div>
                <h2 className="display-m" style={{ marginTop: 0, marginBottom: 22 }}>Review and send.</h2>
                <p className="body-lg" style={{ marginBottom: 36 }}>
                  Confirm the details below — we will reply within one working day.
                </p>
                <dl style={{ display: 'grid', gridTemplateColumns: '180px 1fr', columnGap: 24, rowGap: 14, fontSize: 14, margin: 0, borderTop: '1px solid var(--rule)', paddingTop: 24 }}>
                  <Review k="Service" v={form.service} />
                  <Review k="Occasion" v={form.occasion} />
                  <Review k="Window" v={form.timeframe} />
                  <Review k="Visit" v={form.visit || 'In salon, Dubai'} />
                  <Review k="Name" v={form.name} />
                  <Review k="Email" v={form.email} />
                  <Review k="Phone" v={form.phone} />
                  <Review k="City" v={form.city || '—'} />
                  <Review k="Referred by" v={form.referredBy || '—'} />
                  <Review k="Notes" v={form.notes || '—'} />
                </dl>
                <p className="body-sm" style={{ marginTop: 36, color: 'var(--ink-soft)' }}>
                  By sending this request you agree to be contacted by the Michael Cinco salon
                  team using the details above. No third-party sharing.
                </p>
              </div>
            )}

            {/* Nav buttons */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 56, paddingTop: 28, borderTop: '1px solid var(--rule)' }}>
              <button className="btn-line" onClick={back} disabled={step === 1} style={{ opacity: step === 1 ? 0.35 : 1 }}>
                ← Back
              </button>
              {step < 4
                ? <button className="btn" onClick={next}>Continue <span className="arrow">→</span></button>
                : <button className="btn btn-champagne" onClick={submit}>Send request <span className="arrow">→</span></button>}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function StepRow({ n, label, value, active, complete, onClick }) {
  return (
    <div className={`step-row ${active ? 'active' : ''} ${complete ? 'complete' : ''}`} onClick={onClick}>
      <span className="n">{n}</span>
      <div>
        <div className="label">{label}</div>
        {value && <div className="value" style={{ marginTop: 6 }}>{value}</div>}
      </div>
      <span style={{ color: 'var(--ink-soft)', fontSize: 14 }}>{complete ? '✓' : (active ? '·' : '')}</span>
    </div>
  );
}

function Review({ k, v }) {
  return (<>
    <dt className="tag-num" style={{ paddingTop: 6 }}>{k}</dt>
    <dd style={{ margin: 0, paddingBottom: 14, borderBottom: '1px solid var(--rule-soft)' }}>{v}</dd>
  </>);
}

// -------- CONTACT --------
function ContactPage({ setRoute }) {
  return (
    <div className="page" data-screen-label="10 Contact">
      <PageHero
        eyebrow="Contact"
        title={<>The atelier,<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>in writing.</span></>}
        sub="The fastest path to a salon coordinator is the appointment line — voice or WhatsApp. Service-line directory entries are listed below for reference; the salon team confirms which entrance to use for your appointment."
      />

      <section className="shell section-tight">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          <div>
            <h2 className="display-m" style={{ marginTop: 0, marginBottom: 32 }}>Primary lines</h2>
            <div style={{ display: 'grid', gap: 24 }}>
              <ContactRow k="Salon coordinator (voice + WhatsApp)" v={HOUSE.appointmentMobile} href={`tel:${HOUSE.appointmentMobile.replace(/\s/g,'')}`} />
              <ContactRow k="WhatsApp" v={HOUSE.appointmentMobile} href={`https://${HOUSE.whatsapp}`} />
              <ContactRow k="Email" v={HOUSE.email} href={`mailto:${HOUSE.email}`} />
              <ContactRow k="Atelier address" v={HOUSE.address} />
              <ContactRow k="Hours" v="By appointment · Monday to Saturday" />
            </div>
            <p className="body-sm" style={{ marginTop: 32, color: 'var(--ink-soft)', maxWidth: 480 }}>
              Closing time and service-line phone routing are being confirmed across the official
              site, d3 directory and 2GIS. Until then, the salon coordinator routes requests by
              service line.
            </p>
          </div>

          <div>
            <h2 className="display-m" style={{ marginTop: 0, marginBottom: 32 }}>Service-line directory · d3</h2>
            <div style={{ display: 'grid', gap: 0, border: '1px solid var(--rule)' }}>
              {D3_LISTINGS.map((d, i) => (
                <div key={d.id} style={{ padding: 24, borderBottom: i < D3_LISTINGS.length - 1 ? '1px solid var(--rule)' : 'none', display: 'grid', gap: 8 }}>
                  <div className="display-s" style={{ margin: 0 }}>Michael Cinco {d.name}</div>
                  <div className="body-sm">{d.entrance}</div>
                  <div className="body-sm">{d.phone}  ·  {d.hours}</div>
                </div>
              ))}
            </div>
            <p className="body-sm" style={{ marginTop: 24, color: 'var(--ink-soft)' }}>
              These directory entries are listed on Dubai Design District. The salon team
              confirms which entrance and which line corresponds to your appointment.
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
          <h3 className="display-l" style={{ margin: 0, color: 'var(--bg)' }}>Ready to begin the conversation?</h3>
          <button className="btn" style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }} onClick={() => setRoute('appointments')}>
            Request an appointment <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

function ContactRow({ k, v, href }) {
  return (
    <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 18 }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>{k}</div>
      {href
        ? <a className="display-s" href={href} style={{ borderBottom: '1px solid var(--rule)', display: 'inline-block', paddingBottom: 2 }}>{v}</a>
        : <div className="display-s" style={{ margin: 0 }}>{v}</div>}
    </div>
  );
}

Object.assign(window, { FoundersPage, AppointmentsPage, ContactPage });