/* global React, HOUSE, COUTURE_LOOKS, BRIDAL_LOOKS, RTW_PRODUCTS, ARCHIVE, PRESS, Silk, SectionHeader, aed */
// ============== MAIN PAGES: Home, Archive ==============

const { useState: useStateMain, useMemo: useMemoMain } = React;

function HomePage({ setRoute }) {
  return (
    <div className="page" data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="hero">
        <div className="hero-figure">
          <img src="media/media-03-couture1.webp" alt="Couture autumn winter 26 — ostrich-feather evening gown" />
          <div className="hero-overlay"></div>
          <div className="hero-marquee">
            <span>Plume Ivoire — Look 14 / 28</span>
            <span>Couture · Autumn–Winter 2026</span>
            <span>Salon Privé, Dubai</span>
          </div>
          <div className="hero-caption">
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.78, marginBottom: 18 }}>
                Maison Couture · Established Dubai
              </div>
              <h1 className="title">
                The hand-made,<br />the museum-grade,<br />
                <span style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontWeight: 300 }}>the unrepeatable.</span>
              </h1>
            </div>
            <div className="meta">
              Discover the autumn-winter couture collection by private salon. New looks added each week.
            </div>
          </div>
        </div>
      </section>

      {/* CHAPTER 01 — POSITIONING */}
      <section className="section shell">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.4fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="tag-num">Chapter 01</div>
            <div className="display-s serif-it" style={{ marginTop: 12, color: 'var(--ink-dim)' }}>The House</div>
          </div>
          <div>
            <p className="display-m" style={{ margin: 0, maxWidth: 1100, textWrap: 'balance' }}>
              Michael Cinco is a Filipino couturier in Dubai. Six métiers under one
              <span className="serif-it" style={{ color: 'var(--ink-dim)' }}> private </span>
              roof — Haute Couture, Bridal, Ready-to-Wear, Bridal RTW, Jewellery and Fragrance —
              made for the slow architecture of a single body.
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 48, flexWrap: 'wrap' }}>
              <button className="btn" onClick={() => setRoute('haute-couture')}>Enter the salon <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => setRoute('founders')}>Read the founders' page</button>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule shell-rule" style={{ marginLeft: 'var(--pad-x)', marginRight: 'var(--pad-x)' }} />

      {/* MÉTIERS */}
      <section className="section shell">
        <SectionHeader
          eyebrow="The six métiers"
          title={<>One private appointment.<br/><span className="serif-it" style={{color:'var(--ink-dim)'}}>Every craft of the house.</span></>}
          note="Couture and bridal are appointment-led; ready-to-wear and fragrance carry live verified pricing. Jewellery and bridal RTW are presented in the salon."
        />
        <div className="grid cols-3">
          <MetierCard num="I"   title="Haute Couture" sub="Made-to-measure · Salon"      onClick={() => setRoute('haute-couture')} />
          <MetierCard num="II"  title="Bridal"        sub="Atelier · Couture · RTW"      onClick={() => setRoute('bridal')} />
          <MetierCard num="III" title="Ready-to-Wear" sub="Live commerce · AED"          onClick={() => setRoute('ready-to-wear')} />
          <MetierCard num="IV"  title="Jewellery"     sub="Private session · By referral" onClick={() => setRoute('jewellery')} />
          <MetierCard num="V"   title="Fragrance"     sub="M I–M VII · AED 695"          onClick={() => setRoute('fragrance')} />
          <MetierCard num="VI"  title="Archive"       sub="Public-record archive · Text-led" onClick={() => setRoute('archive')} />
        </div>
      </section>

      {/* COUTURE TEASER — BIG IMAGE */}
      <section className="section" style={{ background: 'var(--surface-2)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Featured · Look M-1411</div>
              <h2 className="display-l" style={{ marginTop: 18, marginBottom: 22 }}>
                Onyx Constellation
              </h2>
              <p className="lede" style={{ marginTop: 0 }}>
                Strapless silk-faille gown embroidered with hand-laid silver and gold paillettes —
                a quiet metallic squall over deep onyx. Eighty-six hours of hand-work in the bodice
                alone.
              </p>
              <dl style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', columnGap: 36, rowGap: 14, marginTop: 36, fontSize: 13 }}>
                <dt style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Season</dt><dd style={{ margin: 0 }}>Autumn / Winter 2026</dd>
                <dt style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Métier</dt><dd style={{ margin: 0 }}>Couture · Evening</dd>
                <dt style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Availability</dt><dd style={{ margin: 0 }}>Made-to-measure on appointment</dd>
                <dt style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>Salon</dt><dd style={{ margin: 0 }}>Dubai Design District, Building 4</dd>
              </dl>
              <div style={{ marginTop: 40, display: 'flex', gap: 22 }}>
                <button className="btn" onClick={() => setRoute('appointments')}>Reserve a private viewing <span className="arrow">→</span></button>
                <button className="btn-line" onClick={() => setRoute('haute-couture')}>See the full collection</button>
              </div>
            </div>
            <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--ink)' }}>
              <img src="media/media-11-couture3.webp" alt="Onyx Constellation" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* BRIDAL FUNNEL */}
      <section className="section shell">
        <SectionHeader
          eyebrow="Bridal"
          title="The marriage of architecture and breath."
          note="Three points of entry — the atelier for a one-of-one couture commission, the Bridal RTW programme for a tailored capsule, and a Bridal RTW appointment in the Dubai salon."
        />
        <div className="grid cols-2">
          <BridalCard look={BRIDAL_LOOKS[0]} setRoute={setRoute} large />
          <BridalCard look={BRIDAL_LOOKS[1]} setRoute={setRoute} large />
        </div>
        <div style={{ marginTop: 48, textAlign: 'center' }}>
          <button className="btn btn-ghost" onClick={() => setRoute('bridal')}>Enter the bridal salon <span className="arrow">→</span></button>
        </div>
      </section>

      {/* RTW + FRAGRANCE TEASER */}
      <section className="section" style={{ background: 'var(--surface)' }}>
        <div className="shell">
          <div className="kicker" style={{ marginBottom: 48 }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>Live commerce</div>
              <h2 className="display-l" style={{ marginTop: 16, marginBottom: 0 }}>Ready-to-Wear</h2>
            </div>
            <div className="body" style={{ maxWidth: 460 }}>
              The seasonal capsule, shipped from the Dubai atelier. All prices in AED;
              the salon confirms availability and tailoring within two working days.
            </div>
          </div>
          <div className="grid cols-4">
            {RTW_PRODUCTS.slice(0, 4).map(p => (
              <RtwTile key={p.id} p={p} onClick={() => setRoute('ready-to-wear')} />
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 36 }}>
            <button className="btn-line" onClick={() => setRoute('ready-to-wear')}>Browse the full collection (28)</button>
            <div className="tag-num">From AED 5,440</div>
          </div>
        </div>
      </section>

      {/* ARCHIVE TEASER — TEXT LED */}
      <section className="section shell">
        <SectionHeader
          eyebrow="The public-record archive"
          title="A house of dressed moments."
          note="Public-record appearances by name, year and event — attributed and rights-controlled. Editorial imagery appears only where licensing permits."
        />
        <div className="grid cols-3" style={{ marginBottom: 40 }}>
          {ARCHIVE.slice(0, 6).map((r, i) => <ArchiveTeaser key={i} r={r} />)}
        </div>
        <button className="btn btn-ghost" onClick={() => setRoute('archive')}>Open the full archive <span className="arrow">→</span></button>
      </section>

      {/* PRESS */}
      <section className="section-tight shell">
        <hr className="rule" style={{ marginBottom: 64 }} />
        <div className="kicker" style={{ marginBottom: 36 }}>
          <h3 className="display-m" style={{ margin: 0 }}>In print</h3>
          <div className="eyebrow">Attributed press references</div>
        </div>
        <div className="grid cols-3">
          {PRESS.map((p, i) => (
            <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 22 }}>
              <div className="tag-num" style={{ marginBottom: 14 }}>{p.yr} · {p.pub}</div>
              <p className="serif-it" style={{ fontSize: 22, margin: 0, color: 'var(--ink)' }}>
                "{p.line}"
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA STRIPE */}
      <section style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 'clamp(64px, 8vw, 120px) var(--pad-x)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', opacity: 0.6, marginBottom: 18 }}>
              The first conversation is always in person.
            </div>
            <h2 className="display-l" style={{ margin: 0, color: 'var(--bg)' }}>Request a private appointment.</h2>
          </div>
          <button
            className="btn"
            onClick={() => setRoute('appointments')}
            style={{ background: 'var(--bg)', color: 'var(--ink)', borderColor: 'var(--bg)' }}>
            Begin the request <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

function MetierCard({ num, title, sub, onClick }) {
  return (
    <button
      className="metier"
      onClick={onClick}
      style={{
        textAlign: 'left',
        background: 'transparent',
        border: 0,
        borderTop: '1px solid var(--rule)',
        padding: '28px 0 0',
        display: 'grid',
        gap: 18,
        cursor: 'pointer',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'baseline',
        fontFamily: 'var(--body)'
      }}>
      <span className="display-s" style={{ color: 'var(--ink-soft)' }}>{num}</span>
      <span>
        <span className="display-m" style={{ display: 'block' }}>{title}</span>
        <span style={{ display: 'block', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 8 }}>
          {sub}
        </span>
      </span>
      <span style={{ fontSize: 18, color: 'var(--ink-dim)' }}>→</span>
    </button>
  );
}

function BridalCard({ look, setRoute, large }) {
  return (
    <div onClick={() => setRoute('bridal')} style={{ cursor: 'pointer' }}>
      <div style={{ aspectRatio: large ? '4/5' : '3/4', overflow: 'hidden', background: 'var(--surface-2)' }}>
        {look.image
          ? <img src={look.image} alt={look.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          : <Silk label={`Bridal · ${look.id}`} aspect={large ? "4/5" : "3/4"} style={{ borderColor: 'transparent', aspectRatio: large ? '4/5' : '3/4' }} />}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 18 }}>
        <div>
          <div className="display-s" style={{ marginBottom: 4 }}>{look.name}</div>
          <div className="tag-num">{look.house} · {look.id}</div>
        </div>
        <button className="btn-line">Enquire</button>
      </div>
    </div>
  );
}

function RtwTile({ p, onClick }) {
  return (
    <div className="product" onClick={onClick}>
      <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' }} />}
      </div>
      <div className="product-info">
        <span className="meta">{p.category}</span>
        <span className="name">{p.name}</span>
        <span className="price">AED {aed(p.priceAED)}</span>
      </div>
    </div>
  );
}

function ArchiveTeaser({ r }) {
  return (
    <div className="archive-card" data-cleared={String(!!r.rightsCleared)}>
      <div className="yr">{r.year} · {r.event.split('—')[0].trim()}</div>
      <h3>{r.name}</h3>
      <div className="body-sm">{r.event}</div>
      <div className="rights-flag">{r.rightsCleared ? 'Rights cleared' : 'Text reference · Image rights pending'}</div>
    </div>
  );
}

// ============== ARCHIVE PAGE ==============

function ArchivePage({ setRoute }) {
  const [year, setYear] = useStateMain('all');
  const years = useMemoMain(() => ['all', ...Array.from(new Set(ARCHIVE.map(a => a.year))).sort((a,b)=>b-a)], []);
  const list = useMemoMain(() => year === 'all' ? ARCHIVE : ARCHIVE.filter(a => a.year === year), [year]);

  return (
    <div className="page" data-screen-label="07 Archive">
      <PageHero
        eyebrow="Archive · 2003 — present"
        title={<>The public-record<br/>archive.</>}
        sub="A library of dressed moments — by name, year and event. Imagery appears only where reuse is licensed; every other entry is a text-and-citation card. The list is curated from the official Founders page, The National (17 Oct 2019), Harper's Bazaar Arabia covers and other named editorial."
      />

      <section className="shell" style={{ paddingBottom: 32 }}>
        <hr className="rule" style={{ marginBottom: 32 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {years.map(y => (
              <button key={y} className={`chip ${year === y ? 'active' : ''}`} onClick={() => setYear(y)}>
                {y === 'all' ? 'All years' : y}
              </button>
            ))}
          </div>
          <div className="tag-num">{list.length} entries · {ARCHIVE.filter(a=>a.rightsCleared).length} with cleared imagery</div>
        </div>
      </section>

      <section className="section-tight shell">
        <div className="grid cols-3">
          {list.map((r, i) => (
            <div key={i} className="archive-card" data-cleared={String(!!r.rightsCleared)} style={{ borderTop: '1px solid var(--rule)', paddingTop: 28 }}>
              <div className="yr">{r.year} · Public record</div>
              <h3 style={{ marginTop: 4 }}>{r.name}</h3>
              <div className="body" style={{ color: 'var(--ink)' }}>{r.event}</div>
              <div className="archive-figure" style={{ aspectRatio: '4/5', marginTop: 8, background: 'var(--surface-2)' }}>
                <Silk label="Image rights pending" aspect="4/5" style={{ border: 'none', aspectRatio: '4/5' }} />
              </div>
              <div className="body-sm">{r.source}</div>
              <div className="rights-flag">
                {r.rightsCleared ? 'Image rights cleared' : 'Citation only — awaiting written reuse'}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section-tight shell">
        <hr className="rule" style={{ marginBottom: 48 }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>Editorial policy</div>
            <h3 className="display-m" style={{ marginTop: 14, marginBottom: 0 }}>How the archive is curated.</h3>
          </div>
          <div className="body-lg">
            <p>
              Public-record red-carpet and editorial appearances exist in named publications. We list them here
              with attribution, year and event, but we do not publish editorial photography until written
              reuse has been granted by the photographer, publication and the individual's representatives.
            </p>
            <p style={{ marginTop: 18 }}>
              When licensing is in place, the card carries a <em className="serif-it" style={{ color: 'var(--champagne-deep)' }}>cleared</em> marker
              and the original photograph replaces the citation card.
            </p>
            <p className="body-sm" style={{ marginTop: 26, color: 'var(--ink-soft)' }}>
              Sources cited in this archive include the official Michael Cinco celebrity gallery, the Founders
              page, The National (17 Oct 2019), and named magazine covers and runway reports. No follower
              counts, ratings or testimonials are inferred.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ArchivePage });