/* global React, HOUSE, COUTURE_LOOKS, BRIDAL_LOOKS, RTW_PRODUCTS, FRAGRANCE, D3_LISTINGS, Silk, SectionHeader, PageHero, aed */
// ============== COLLECTION PAGES: Couture, Bridal, RTW, Jewellery, Fragrance ==============

const { useState: useStateColl, useMemo: useMemoColl } = React;

// -------- HAUTE COUTURE --------
function HauteCouturePage({ setRoute }) {
  const [look, setLook] = useStateColl(0);
  const current = COUTURE_LOOKS[look];
  return (
    <div className="page" data-screen-label="02 Haute Couture">
      <section className="shell" style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>Haute Couture · A/W 2026</div>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <h1 className="display-xl" style={{ margin: 0 }}>
            La <span className="serif-it" style={{ color: 'var(--ink-dim)' }}>cathédrale</span><br/>
            de soie.
          </h1>
          <p className="lede" style={{ margin: 0 }}>
            Twenty-eight made-to-measure pieces, presented by private salon in Dubai. Couture is
            shown by appointment and is not priced publicly — every commission is bespoke to the
            wearer and the occasion.
          </p>
        </div>
      </section>

      {/* Look viewer */}
      <section className="shell" style={{ paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }}>
          <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--ink)' }}>
            {current.image
              ? <img src={current.image} alt={current.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              : <Silk label={`Couture · ${current.id}`} aspect="4/5" style={{ aspectRatio: '4/5', border: 'none' }} />}
          </div>
          <div style={{ display: 'grid', gap: 28, alignSelf: 'center' }}>
            <div className="tag-num">Look {String(look+1).padStart(2,'0')} / {String(COUTURE_LOOKS.length).padStart(2,'0')}</div>
            <h2 className="display-l" style={{ margin: 0 }}>{current.name}</h2>
            <p className="lede" style={{ margin: 0 }}>{current.note}</p>
            <dl style={{ display: 'grid', gridTemplateColumns: '120px 1fr', columnGap: 24, rowGap: 14, marginTop: 8, borderTop: '1px solid var(--rule)', paddingTop: 24 }}>
              <dt className="eyebrow">Reference</dt><dd style={{ margin: 0 }}>{current.id}</dd>
              <dt className="eyebrow">Season</dt><dd style={{ margin: 0 }}>{current.season}</dd>
              <dt className="eyebrow">Métier</dt><dd style={{ margin: 0 }}>{current.category}</dd>
              <dt className="eyebrow">Lead time</dt><dd style={{ margin: 0 }}>16–24 weeks · By consultation</dd>
              <dt className="eyebrow">Salon</dt><dd style={{ margin: 0 }}>Dubai · Building 4 · Entrance A301</dd>
            </dl>
            <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
              <button className="btn" onClick={() => setRoute('appointments')}>Request this look <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => setRoute('appointments')}>Speak with an atelier director</button>
            </div>
          </div>
        </div>

        {/* Look navigator */}
        <div style={{ marginTop: 56 }}>
          <hr className="rule" style={{ marginBottom: 24 }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div className="eyebrow">Choose a look</div>
            <div style={{ display: 'flex', gap: 12 }}>
              <button className="chip" onClick={() => setLook((look - 1 + COUTURE_LOOKS.length) % COUTURE_LOOKS.length)}>← Prev</button>
              <button className="chip" onClick={() => setLook((look + 1) % COUTURE_LOOKS.length)}>Next →</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            {COUTURE_LOOKS.map((l, i) => (
              <button key={l.id} onClick={() => setLook(i)} style={{
                aspectRatio: '3/4',
                background: l.image ? `url(${l.image}) center/cover` : 'var(--surface-2)',
                border: i === look ? '2px solid var(--ink)' : '1px solid var(--rule)',
                padding: 0, cursor: 'pointer', position: 'relative'
              }}>
                {!l.image && <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-soft)' }}>{l.id}</span>}
                <span style={{ position: 'absolute', bottom: 6, left: 6, fontSize: 9, color: i === look ? 'var(--bg)' : 'var(--ink)', background: i === look ? 'var(--ink)' : 'rgba(244,238,227,0.85)', padding: '2px 6px', letterSpacing: '0.18em' }}>{String(i+1).padStart(2,'0')}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* The salon — process */}
      <section className="section" style={{ background: 'var(--surface)' }}>
        <div className="shell">
          <SectionHeader
            eyebrow="The commission"
            title={<>How a couture piece<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>begins, ages, leaves.</span></>}
            align="left"
          />
          <div className="grid cols-4">
            {[
              { n: 'I',   t: 'The salon',     d: 'A private conversation in Dubai. Sketches, fabrics, references — and an honest scope.' },
              { n: 'II',  t: 'The toile',     d: 'A cotton mock-up cut to your measure. The shape of the final piece, before silk.' },
              { n: 'III', t: 'The hand',      d: 'Embroidery, beadwork and finishing in our atelier. Documented every fitting.' },
              { n: 'IV',  t: 'Delivery',      d: 'Final fitting and travel-ready preparation. The piece arrives in custom storage.' },
            ].map(s => (
              <div key={s.n} style={{ borderTop: '1px solid var(--rule)', paddingTop: 22 }}>
                <span className="display-m" style={{ color: 'var(--ink-soft)' }}>{s.n}</span>
                <h4 className="display-s" style={{ margin: '12px 0 12px' }}>{s.t}</h4>
                <p className="body">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// -------- BRIDAL --------
function BridalPage({ setRoute }) {
  return (
    <div className="page" data-screen-label="03 Bridal">
      <PageHero
        eyebrow="Bridal · Atelier · Couture · RTW"
        title={<>For the<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>once-in-a-life</span> dress.</>}
        sub="The bridal house works in three programmes: a one-of-one couture commission from the atelier, a Bridal Couture made-to-order line, and a Bridal RTW capsule available in salon sizes. Every path begins with a private appointment in Dubai."
      />

      {/* Programmes */}
      <section className="section shell">
        <div className="grid cols-3">
          {[
            { tag: 'I · Bridal Atelier', title: 'One-of-One', d: 'A bespoke gown made to your measure. Six to nine months from first sketch.', cta: 'Begin a commission' },
            { tag: 'II · Bridal Couture', title: 'Made-to-Order', d: 'Signature silhouettes adjusted to your measurements in the Dubai atelier. Three to four months.', cta: 'Reserve a fitting' },
            { tag: 'III · Bridal RTW', title: 'Salon Sizes', d: 'Curated capsule available in five sizes, with light alterations in salon. By appointment only.', cta: 'Book the salon' },
          ].map(p => (
            <div key={p.tag} style={{ background: 'var(--surface)', border: '1px solid var(--rule-soft)', padding: 36, display: 'grid', gap: 16 }}>
              <div className="tag-num">{p.tag}</div>
              <h3 className="display-m" style={{ margin: '4px 0 4px' }}>{p.title}</h3>
              <p className="body" style={{ flex: 1, marginBottom: 12 }}>{p.d}</p>
              <button className="btn-line" onClick={() => setRoute('appointments')} style={{ justifySelf: 'start' }}>{p.cta} →</button>
            </div>
          ))}
        </div>
      </section>

      {/* Looks gallery */}
      <section className="section shell" style={{ paddingTop: 0 }}>
        <SectionHeader eyebrow="From the bridal salon" title="Looks of the season" note="A selection from the current Bridal Couture portfolio. Appointment-only — public prices are not published." />
        <div className="grid cols-2">
          {BRIDAL_LOOKS.map(b => (
            <div key={b.id}>
              <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--surface-2)' }}>
                {b.image
                  ? <img src={b.image} alt={b.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <Silk label={`Bridal · ${b.id}`} aspect="4/5" style={{ aspectRatio: '4/5', border: 'none' }} />}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 18, paddingBottom: 24, borderBottom: '1px solid var(--rule)' }}>
                <div>
                  <div className="display-s" style={{ marginBottom: 6 }}>{b.name}</div>
                  <div className="tag-num">{b.house} · {b.id}</div>
                </div>
                <button className="btn-line" onClick={() => setRoute('appointments')}>Enquire</button>
              </div>
              <p className="body" style={{ marginTop: 14, maxWidth: 460 }}>{b.note}</p>
            </div>
          ))}
        </div>
      </section>

      {/* What to expect */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
            <div>
              <div className="eyebrow" style={{ color: 'rgba(244,238,227,0.5)' }}><span className="dot"></span>What to expect</div>
              <h2 className="display-l" style={{ marginTop: 18, marginBottom: 0, color: 'var(--bg)' }}>Your bridal appointment.</h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, color: 'rgba(244,238,227,0.78)' }}>
              <p>The first conversation runs around 90 minutes — sketches, fabric stories, an honest read of timeline and scope. Bring a single inspiration image if you have one.</p>
              <p>The atelier hosts up to two guests with you. We provide tea, water and a quiet room for any conversation that is private. The salon is in Building 4, d3, by appointment only.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// -------- READY-TO-WEAR --------
function ReadyToWearPage({ setRoute }) {
  const CATS = ['All', 'Evening', 'Cocktail', 'Day', 'Resort', 'Outerwear'];
  const [cat, setCat] = useStateColl('All');
  const [bag, setBag] = useStateColl([]);
  const list = useMemoColl(() => cat === 'All' ? RTW_PRODUCTS : RTW_PRODUCTS.filter(p => p.category === cat), [cat]);
  const inBag = id => bag.includes(id);
  const toggle = id => setBag(b => b.includes(id) ? b.filter(x => x !== id) : [...b, id]);
  const subtotal = bag.reduce((s, id) => s + (RTW_PRODUCTS.find(p => p.id === id)?.priceAED || 0), 0);

  return (
    <div className="page" data-screen-label="04 Ready-to-Wear">
      <section className="shell" style={{ paddingTop: 72, paddingBottom: 48 }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>Ready-to-Wear · Live commerce · AED</div>
        <h1 className="display-xl" style={{ margin: 0 }}>The seasonal capsule.</h1>
        <p className="lede" style={{ maxWidth: 720, marginTop: 24 }}>
          Live prices from the Dubai atelier in AED. Light alterations in salon are included on
          any gown above AED 9,000. The salon confirms availability and tailoring within two
          working days of order.
        </p>
      </section>

      <section className="shell" style={{ paddingBottom: 36 }}>
        <hr className="rule" style={{ marginBottom: 28 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {CATS.map(c => (
              <button key={c} className={`chip ${cat === c ? 'active' : ''}`} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="tag-num">Showing {list.length} of {RTW_PRODUCTS.length}</div>
        </div>
      </section>

      <section className="shell section-tight">
        <div className="grid cols-4">
          {list.map(p => (
            <div key={p.id} className="product" onClick={() => toggle(p.id)}>
              <div className="product-img">
                {p.image
                  ? <img src={p.image} alt={p.name} />
                  : <Silk label={`Look · ${p.id}`} aspect="3/4" style={{ border: 'none', aspectRatio: '3/4' }} />}
                {inBag(p.id) && <span className="badge" style={{ background: 'var(--ink)', color: 'var(--bg)', borderColor: 'var(--ink)' }}>In salon bag</span>}
                {!inBag(p.id) && p.priceAED > 18000 && <span className="badge">Couture-cut</span>}
              </div>
              <div className="product-info">
                <span className="meta">{p.category} · {p.id}</span>
                <span className="name">{p.name}</span>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 4 }}>
                  <span className="price">AED {aed(p.priceAED)}</span>
                  <span className="btn-line" style={{ fontSize: 10, padding: 0 }}>{inBag(p.id) ? 'Remove' : 'Add to bag'}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Sticky bag */}
      {bag.length > 0 && (
        <div style={{
          position: 'sticky', bottom: 16, zIndex: 30,
          margin: '0 var(--pad-x)', background: 'var(--ink)', color: 'var(--bg)',
          padding: '16px 24px', display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 16, flexWrap: 'wrap'
        }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 4 }}>Salon bag · {bag.length} {bag.length === 1 ? 'piece' : 'pieces'}</div>
            <div className="display-s" style={{ color: 'var(--bg)' }}>AED {aed(subtotal)}</div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="chip" onClick={() => setBag([])} style={{ color: 'var(--bg)', borderColor: 'rgba(244,238,227,0.3)' }}>Clear bag</button>
            <button className="btn" onClick={() => setRoute('appointments')} style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }}>
              Reserve in salon <span className="arrow">→</span>
            </button>
          </div>
        </div>
      )}

      <section className="section-tight shell">
        <hr className="rule" style={{ marginBottom: 48 }} />
        <div className="grid cols-3">
          <Detail k="Tailoring" v="Complimentary in salon on every gown above AED 9,000. Allow 7–10 days." />
          <Detail k="Shipping" v="UAE complimentary express. International shipped on demand, fully insured." />
          <Detail k="Returns" v="14 days, unworn with original tags. Bridal RTW and made-to-order are final sale." />
        </div>
      </section>
    </div>
  );
}

// -------- JEWELLERY --------
function JewelleryPage({ setRoute }) {
  return (
    <div className="page" data-screen-label="05 Jewellery">
      <PageHero
        eyebrow="Jewellery · By private session"
        title={<>The <span className="serif-it" style={{color:'var(--ink-dim)'}}>jewellery</span><br/>salon.</>}
        sub="The jewellery line operates as a separate appointment in Building 4. Pieces are not catalogued online — selection is made in salon with the atelier director, against the season's couture and bridal."
      />

      <section className="shell section-tight">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <h2 className="display-l" style={{ marginTop: 0, marginBottom: 28 }}>A salon, not a shop.</h2>
            <p className="lede">
              Each piece is hand-selected for the wearer and the wider look — a couture gown, a
              bridal silhouette, a private editorial. The salon door is by referral or in
              continuation of an existing couture/bridal appointment.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '40px 0 0', display: 'grid', gap: 14, fontSize: 14, color: 'var(--ink-dim)' }}>
              <li>· Diamond and coloured-stone jewellery, statement and parure</li>
              <li>· Bridal jewellery — coordinated with the bridal gown</li>
              <li>· Editorial loans for press, by representation</li>
              <li>· Bespoke commissioning, on referral</li>
            </ul>
            <div style={{ marginTop: 40, display: 'flex', gap: 16 }}>
              <button className="btn" onClick={() => setRoute('appointments')}>Request a jewellery session <span className="arrow">→</span></button>
            </div>
          </div>
          <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--surface-2)' }}>
            <img src="media/d3-directory-michael-cinco-jewelry.webp" alt="Michael Cinco Jewellery directory imagery" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--surface-2)' }}>
        <div className="shell">
          <div className="kicker" style={{ marginBottom: 32 }}>
            <h3 className="display-m" style={{ margin: 0 }}>Visiting the jewellery salon</h3>
            <div className="eyebrow">Building 4 · Entrance B403</div>
          </div>
          <div className="grid cols-3">
            <Detail k="Hours" v="Monday – Saturday, by appointment" />
            <Detail k="Directory phone" v="04 834 7353 · D3 listing" />
            <Detail k="Primary path" v={`Appointment line · ${HOUSE.appointmentMobile}`} />
          </div>
          <p className="body-sm" style={{ marginTop: 36, maxWidth: 720, color: 'var(--ink-soft)' }}>
            Service-line routing is in confirmation. Until the master schedule is published,
            requests are received on the primary appointment mobile and routed by the salon team.
          </p>
        </div>
      </section>
    </div>
  );
}

// -------- FRAGRANCE --------
function FragrancePage({ setRoute }) {
  const [sel, setSel] = useStateColl('M3');
  const current = FRAGRANCE.find(f => f.id === sel);
  return (
    <div className="page" data-screen-label="06 Fragrance">
      <PageHero
        eyebrow="Fragrance · M I — M VII"
        title={<>Seven<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>private rooms.</span></>}
        sub="A seven-fragrance house collection — eau de parfum, 100ml, in heavy hand-blown crystal. Each fragrance is built around one couture material. Live in salon and online."
      />

      <section className="shell section-tight">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
          <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--ink)', display: 'grid', placeItems: 'center', position: 'relative' }}>
            <div style={{
              width: '40%', height: '70%',
              background: 'linear-gradient(180deg, color-mix(in oklab, var(--champagne) 65%, transparent), color-mix(in oklab, var(--ink) 90%, transparent) 95%)',
              borderRadius: '14px 14px 8px 8px',
              boxShadow: 'inset 0 0 40px rgba(255,255,255,0.18), 0 30px 60px rgba(0,0,0,0.4)',
              display: 'grid', placeItems: 'center',
              color: 'rgba(244,238,227,0.85)',
              fontFamily: 'var(--display)',
              fontSize: 'clamp(40px, 6vw, 80px)',
              letterSpacing: '0.06em'
            }}>{current.title}</div>
            <div style={{ position: 'absolute', bottom: 24, left: 0, right: 0, textAlign: 'center', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(244,238,227,0.6)' }}>
              100 ml · Eau de Parfum · Crystal flacon
            </div>
          </div>
          <div>
            <div className="tag-num">{current.id} · Single note study</div>
            <h2 className="display-l" style={{ marginTop: 14, marginBottom: 18 }}>{current.title}</h2>
            <p className="serif-it" style={{ fontSize: 24, color: 'var(--ink-dim)', margin: 0 }}>{current.sub}</p>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--rule)' }}>
              <span className="display-m" style={{ margin: 0 }}>AED {aed(current.priceAED)}</span>
              <span className="tag-num">100 ml</span>
            </div>
            <div style={{ marginTop: 28, display: 'flex', gap: 16 }}>
              <button className="btn">Add to bag <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => setRoute('appointments')}>Discover at the salon</button>
            </div>

            <div style={{ marginTop: 48 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Other rooms</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
                {FRAGRANCE.map(f => (
                  <button key={f.id} onClick={() => setSel(f.id)} className={`chip ${sel === f.id ? 'active' : ''}`} style={{ padding: '14px 4px', justifyContent: 'center', fontFamily: 'var(--display)', fontSize: 16, letterSpacing: '0.1em' }}>
                    {f.title.replace('M ', '')}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section shell">
        <SectionHeader eyebrow="The collection" title="Seven private rooms — at a glance." />
        <div className="grid cols-2">
          {FRAGRANCE.map(f => (
            <div key={f.id} onClick={() => setSel(f.id)} style={{
              display: 'grid', gridTemplateColumns: '64px 1fr auto', alignItems: 'baseline',
              borderTop: '1px solid var(--rule)', padding: '22px 0', cursor: 'pointer'
            }}>
              <span className="display-m" style={{ color: sel === f.id ? 'var(--champagne-deep)' : 'var(--ink-soft)' }}>{f.title.replace('M ','')}</span>
              <div>
                <div className="display-s" style={{ marginBottom: 4 }}>{f.title}</div>
                <div className="body-sm">{f.sub}</div>
              </div>
              <span className="price" style={{ fontSize: 14, color: 'var(--ink-dim)' }}>AED {aed(f.priceAED)}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Detail({ k, v }) {
  return (
    <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20 }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>{k}</div>
      <div className="body" style={{ color: 'var(--ink)' }}>{v}</div>
    </div>
  );
}

Object.assign(window, { HauteCouturePage, BridalPage, ReadyToWearPage, JewelleryPage, FragrancePage, Detail });