/* global React, Link, ProductCard, CapChip, LogoSquare */
const { useState: useStateP, useMemo: useMemoP, useEffect: useEffectP } = React;

// ---------- Home ----------
function HomePage({ products, copy }) {
  const heroProduct = products.find(p => p.handle === 'stone-embellished-abaya-purple');
  const teasers = [
    products.find(p => p.handle === 'sheer-abaya-organza-white'),
    products.find(p => p.handle === 'jalabiya-silk-satin-pink'),
    products.find(p => p.handle === 'cloud-shadow-abaya-beige'),
    products.find(p => p.handle === 'cloud-bisht-abaya-lace-pink'),
  ].filter(Boolean);

  return (
    <div data-screen-label="01 Home">
      {/* Hero */}
      <section className="hero">
        <div className="hero-text">
          <div className="hero-meta">
            <span className="eyebrow">May 2026 · Drop 09</span>
            <h1 className="display display-tight hero-h1">
              {copy.hero.h1_a}<br />
              {copy.hero.h1_b}<br />
              <span className="accent">{copy.hero.h1_c}</span>
            </h1>
            <p className="hero-sub">{copy.hero.sub}</p>
          </div>
          <div className="hero-foot">
            <div className="hero-actions">
              <Link to="/collection" className="cta">View the Collection</Link>
              <Link to="/appointments" className="cta-ghost">Private Appointment</Link>
            </div>
            <div style={{ display: 'flex', gap: 24, color: 'var(--muted)', fontSize: 12, letterSpacing: '0.08em' }}>
              <span className="mono">EST. 2017</span>
              <span className="mono">DUBAI DESIGN DISTRICT</span>
              <span className="mono">UAE</span>
            </div>
          </div>
        </div>
        <div className="hero-image">
          <img src={heroProduct.hero} alt="" />
          <div className="hero-badge">
            <span className="dot" />
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              {heroProduct.runSize} · {heroProduct.name}
            </span>
          </div>
          <div className="hero-counter">
            <div className="num">09</div>
            <div className="label">Current Drop</div>
          </div>
        </div>
      </section>

      {/* Concept strip */}
      <section className="concept-strip">
        {copy.conceptStrip.map((c, i) => (
          <div className="concept-cell" key={i}>
            <div className="big">{c.big}</div>
            <div className="lab">{c.lab}</div>
          </div>
        ))}
      </section>

      {/* Current Drop */}
      <section className="section">
        <div className="container">
          <div className="sect-head">
            <div>
              <span className="eyebrow">Drop 09 · May 2026</span>
              <h2 className="display" style={{ marginTop: 16 }}>Current pieces, capped.</h2>
            </div>
            <div className="meta">
              Each piece is cut in a tiny run and never reproduced once sold out. Available, waitlist, or capped — the chip on each piece tells you which.
            </div>
          </div>
          <div className="product-grid">
            {teasers.map(p => <ProductCard p={p} key={p.handle} />)}
            <Link to="/collection" className="product-card" style={{ background: 'var(--surface)', display: 'grid', placeItems: 'center', minHeight: 0 }}>
              <div className="frame" style={{ display: 'grid', placeItems: 'center', background: 'var(--surface)' }}>
                <div style={{ textAlign: 'center', padding: 24 }}>
                  <div className="display" style={{ fontSize: 56, color: 'var(--primary)' }}>+09</div>
                  <div className="eyebrow" style={{ marginTop: 12 }}>All 13 styles</div>
                </div>
              </div>
              <div className="meta">
                <div>
                  <div className="name">View the full collection</div>
                  <div className="sub">Abayas · Jalabiyas · Dresses</div>
                </div>
                <div className="price mono">→</div>
              </div>
            </Link>
          </div>
        </div>
      </section>

      {/* Concept band */}
      <section className="concept-band">
        <div className="container">
          <div className="sect-head">
            <div>
              <span className="eyebrow">The capping mechanic</span>
              <h2 className="display" style={{ marginTop: 16 }}>One, three, or six.<br />Then it’s closed.</h2>
            </div>
            <div className="meta">
              The number sets the room. After the last piece walks out, the pattern is retired and the silhouette never returns.
            </div>
          </div>
          <div className="concept-grid">
            {copy.ladder.map((l, i) => (
              <div className="concept-card" key={i}>
                <div className="num">{l.ratio}</div>
                <div className="name">{l.lab}</div>
                <div className="desc">{l.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48 }}>
            <Link to="/concept" className="cta-ghost">Read the concept →</Link>
          </div>
        </div>
      </section>

      {/* Ounass band */}
      <section className="ounass-band">
        <div className="ounass-text">
          <span className="eyebrow">Currently stocked</span>
          <h3>At Ounass, AED 2,940 — 4,725.</h3>
          <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.6, maxWidth: '44ch' }}>
            The current drop is live on Ounass while the d3 atelier prepares the next release. Pieces ship from Ounass directly; the atelier holds appointments by request.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <a className="cta-ghost" href="#" onClick={e => e.preventDefault()}>Shop on Ounass →</a>
            <span className="flag-note"><span className="icon">●</span> Outbound URLs pending client confirmation</span>
          </div>
        </div>
        <div className="ounass-list">
          {[
            { src: 'media/sheer-abaya-organza-white-styled.webp', label: 'Sheer Abaya · White · AED 4,725' },
            { src: 'media/cloud-crinkle-abaya-organza-grey-front.webp', label: 'Cloud Crinkle · Pistachio · AED 4,725' },
            { src: 'media/jalabiya-silk-satin-purple-front.webp', label: 'Jalabiya · Aubergine · AED 4,500' },
            { src: 'media/lace-overlay-abaya-crepe-black-front.webp', label: 'Lace Overlay · Black · AED 3,885' },
          ].map((it, i) => (
            <div className="ounass-list-item" key={i}>
              <img src={it.src} alt="" />
              <div className="label mono" style={{ fontSize: 10, letterSpacing: '0.1em' }}>{it.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Appointment band */}
      <section className="appointment-band">
        <div className="container">
          <h3>The room is small.<br />The appointment is private.</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-end' }}>
            <p className="meta">
              A capped piece is hard to fit through a screen. We hold private hours at the d3 atelier — try the current drop, hold the fabric, place a waitlist.
            </p>
            <Link to="/appointments" className="cta">Request a private appointment</Link>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- Concept ----------
function ConceptPage({ copy }) {
  return (
    <div data-screen-label="02 Concept">
      <section className="concept-hero">
        <div className="container">
          <span className="eyebrow">The capping mechanic</span>
          <h1 style={{ marginTop: 24 }}>
            We make it.<br />We release it.<br />Then we <span className="accent">cap it.</span>
          </h1>
          <p className="sub">
            Every month, The Cap Project releases a tiny number of garments. A piece is cut one-of-one, three-of-three, or six-of-six. After the last one walks out of the atelier, the pattern is retired and the silhouette is never reproduced. Once it’s gone, it’s gone.
          </p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="ladder">
            {copy.ladder.map((l, i) => (
              <div className="ladder-cell" key={i}>
                <div className="lab">Run</div>
                <div className="ratio">{l.ratio.split('×')[0]}<span className="x">×</span>{l.ratio.split('×')[1]}</div>
                <div style={{ fontFamily: 'Archivo', fontSize: 22, letterSpacing: '-0.01em' }}>{l.lab}</div>
                <div className="desc">{l.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start', marginTop: 96 }}>
            <div>
              <span className="eyebrow">How a drop works</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 16 }}>
                Monthly. One concept. A handful of pieces.
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                { n: '01', t: 'Concept', d: 'A single idea opens the month — a fabric, a silhouette, a colour.' },
                { n: '02', t: 'Cut', d: 'Pieces are cut in the d3 atelier, in the count we set in advance.' },
                { n: '03', t: 'Release', d: 'The drop goes to Ounass and to the atelier’s private appointment list.' },
                { n: '04', t: 'Cap', d: 'When the last piece is gone, the pattern is closed. No restock, no second cut.' },
              ].map(s => (
                <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, padding: '20px 0', borderTop: '1px solid var(--border-soft)' }}>
                  <div className="mono" style={{ color: 'var(--primary)', fontSize: 13, letterSpacing: '0.1em' }}>{s.n}</div>
                  <div>
                    <div style={{ fontFamily: 'Archivo', fontSize: 18, letterSpacing: '-0.01em' }}>{s.t}</div>
                    <div style={{ color: 'var(--muted)', fontSize: 14, marginTop: 4 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 56, display: 'flex', justifyContent: 'flex-start' }}>
            <span className="flag-note"><span className="icon">●</span> Live run counts &amp; drop cadence — confirm with the brand before publish</span>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- Collection ----------
function CollectionPage({ products }) {
  const [filter, setFilter] = useStateP('all');
  const [stateFilter, setStateFilter] = useStateP('all');
  const filtered = useMemoP(() => {
    return products.filter(p =>
      (filter === 'all' || p.category === filter) &&
      (stateFilter === 'all' || p.state === stateFilter)
    );
  }, [filter, stateFilter, products]);

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'abaya', label: 'Abayas' },
    { id: 'jalabiya', label: 'Jalabiyas' },
    { id: 'dress', label: 'Dresses' },
  ];
  const states = [
    { id: 'all', label: 'Any state' },
    { id: 'available', label: 'Available' },
    { id: 'waitlist', label: 'Waitlist' },
    { id: 'capped', label: 'Capped' },
  ];

  return (
    <div data-screen-label="03 Collection">
      <section className="page-head">
        <div className="container">
          <div>
            <span className="eyebrow">Drop 09 · May 2026</span>
            <h1 style={{ marginTop: 24 }}>The Collection</h1>
          </div>
          <div className="blurb">
            13 pieces in the current drop, priced AED 2,940 — 4,725 and currently stocked at Ounass. Each piece carries its cap-state: <em>available</em>, on the <em>waitlist</em>, or <em>capped</em> and closed.
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="filter-bar">
            {filters.map(f => (
              <button
                key={f.id}
                className={`filter-chip${filter === f.id ? ' on' : ''}`}
                onClick={() => setFilter(f.id)}
              >{f.label}</button>
            ))}
            <span style={{ width: 12 }} />
            {states.map(s => (
              <button
                key={s.id}
                className={`filter-chip${stateFilter === s.id ? ' on' : ''}`}
                onClick={() => setStateFilter(s.id)}
              >{s.label}</button>
            ))}
            <span className="filter-meta">{filtered.length} {filtered.length === 1 ? 'piece' : 'pieces'}</span>
          </div>
          <div className="product-grid">
            {filtered.map(p => <ProductCard p={p} key={p.handle} />)}
          </div>
          {filtered.length === 0 && (
            <div style={{ padding: 64, textAlign: 'center', color: 'var(--muted)' }}>
              No pieces in this filter. Try another category or state.
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// ---------- PDP ----------
function ProductPage({ product }) {
  const [waitlisted, setWaitlisted] = useStateP(false);
  if (!product) {
    return <div className="container" style={{ padding: 96 }}><h1>Piece not found.</h1></div>;
  }
  const stateLabel = product.state === 'capped' ? 'Capped — closed run' : product.state === 'waitlist' ? 'Waitlist only' : 'Available';
  return (
    <div className="pdp" data-screen-label={`04 PDP · ${product.handle}`}>
      <div className="pdp-gallery">
        {product.images.map((src, i) => (
          <div key={i} className={`shot${i === 0 ? ' tall' : ''}`}>
            <img src={src} alt={product.name + ' shot ' + (i + 1)} loading={i === 0 ? 'eager' : 'lazy'} />
          </div>
        ))}
      </div>
      <div className="pdp-info">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Link to="/collection" className="eyebrow" style={{ color: 'var(--muted)' }}>← Back to collection</Link>
          <span className="eyebrow">{product.category} · {product.drop}</span>
          <h1>{product.name}</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <CapChip state={product.state} />
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{stateLabel}</span>
          </div>
        </div>
        <div className="pdp-detail-row">
          <div style={{ flex: 1 }}>
            <span className="eyebrow">Price</span>
            <span className="v price mono">AED {product.price.toLocaleString()}</span>
          </div>
          <div style={{ flex: 1 }}>
            <span className="eyebrow">Colour</span>
            <span className="v">{product.colour}</span>
          </div>
          <div style={{ flex: 1 }}>
            <span className="eyebrow">Fabric</span>
            <span className="v">{product.fabric}</span>
          </div>
          <div style={{ flex: 1 }}>
            <span className="eyebrow">Run</span>
            <span className="v">{product.runSize}</span>
          </div>
        </div>
        <p className="pdp-editorial">{product.editorial}</p>
        <div className="pdp-actions">
          {product.state === 'available' && (
            <a className="cta" href="#" onClick={e => e.preventDefault()}>Shop on Ounass →</a>
          )}
          {product.state === 'waitlist' && (
            <>
              {!waitlisted ? (
                <button className="cta" onClick={() => setWaitlisted(true)}>Join the waitlist</button>
              ) : (
                <div className="form-success">
                  <h3>You’re on the list.</h3>
                  <p style={{ color: 'var(--muted)', margin: 0 }}>We’ll write when a slot opens or when the next drop covers this silhouette.</p>
                </div>
              )}
              <a className="cta-ghost" href="#" onClick={e => e.preventDefault()}>Check Ounass stock →</a>
            </>
          )}
          {product.state === 'capped' && (
            <>
              {!waitlisted ? (
                <button className="cta-ghost" onClick={() => setWaitlisted(true)}>Notify me on the next drop</button>
              ) : (
                <div className="form-success">
                  <h3>Noted.</h3>
                  <p style={{ color: 'var(--muted)', margin: 0 }}>This silhouette is closed. We’ll write when a related shape walks back in.</p>
                </div>
              )}
            </>
          )}
          <Link to="/appointments" className="cta-ghost">Try at the d3 atelier</Link>
        </div>
        <div className="pdp-meta-list">
          <div><span className="k">Drop</span><span className="v">{product.drop}</span></div>
          <div><span className="k">Run size</span><span className="v">{product.runSize}</span></div>
          <div><span className="k">Origin</span><span className="v">Dubai, UAE</span></div>
          <div><span className="k">Channel</span><span className="v">Ounass · d3 atelier</span></div>
        </div>
        <span className="flag-note"><span className="icon">●</span> Run sizes, drop dates &amp; Ounass URL — prototype state, pending brand confirmation</span>
      </div>
    </div>
  );
}

// ---------- The Project ----------
function ProjectPage({ products }) {
  const moodImages = [
    'media/lace-overlay-abaya-crepe-black-detail.webp',
    'media/stone-embellished-abaya-purple-detail.webp',
    'media/cloud-crinkle-abaya-organza-grey-detail.webp',
    'media/jalabiya-silk-satin-pink-detail.webp',
  ];
  return (
    <div data-screen-label="05 The Project">
      <section className="page-head">
        <div className="container">
          <div>
            <span className="eyebrow">The Project</span>
            <h1 style={{ marginTop: 24 }}>An Emirati design <span style={{ color: 'var(--primary)', fontStyle: 'italic' }}>experiment</span> in scarcity.</h1>
          </div>
          <div className="blurb">
            Founded in Dubai in 2017 by an anonymous Emirati design duo from art backgrounds. The Cap Project reimagines the abaya through deconstructed tailoring, oversized silhouettes, vibrant colour, and luxe fabrics — anything but the traditional black abaya.
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="project-grid">
            <div>
              <div className="project-image">
                <img src="media/cloud-bisht-abaya-lace-pink-styled.webp" alt="" />
              </div>
              <div style={{ marginTop: 8, color: 'var(--muted)', fontSize: 12 }}>
                Cloud Bisht Abaya in Lace, Blush — Drop 09
              </div>
            </div>
            <div className="project-body">
              <p className="project-quote">
                We don’t make collections.<br />
                We make <span className="accent">capped pieces</span>, in tiny rooms, that leave.
              </p>
              <p>
                <strong>The Cap Project</strong> is a limited-release modest-fashion label built on a single rule: make a few, release a few, then close the pattern. Each design is cut one-of-one, three-of-three, or six-of-six, and is never reproduced once sold out.
              </p>
              <p>
                Founded in 2017 by an Emirati design duo with art-school backgrounds, the label treats each garment as a design object — closer to a small edition print than a wholesale SKU. Pieces are conceived in the d3 atelier, finished by hand, and released as monthly exclusives.
              </p>
              <p>
                The label keeps its founders anonymous. The work is the signature: deconstructed tailoring on the abaya silhouette, oversized cuts, lace and crinkle organza, hand-corded embroidery, and the small orange square at the cuff.
              </p>
              <Link to="/concept" className="cta-ghost" style={{ marginTop: 16 }}>How a drop works →</Link>
            </div>
          </div>
        </div>
      </section>
      <section className="section" style={{ background: 'var(--surface)' }}>
        <div className="container">
          <div className="sect-head">
            <div>
              <span className="eyebrow">Timeline</span>
              <h2 className="display" style={{ marginTop: 16, fontSize: 'clamp(40px, 5vw, 72px)' }}>Nine years.<br />Many drops.</h2>
            </div>
          </div>
          <div className="timeline">
            {[
              { y: '2017', what: 'Founded in Dubai. The first capped pieces leave the atelier.' },
              { y: '2019', what: 'Concept formalised: monthly drops, one-of-one / three-of-three / six-of-six.' },
              { y: '2021', what: 'd3 atelier opens at Building 4, Dubai Design District. Private appointments begin.' },
              { y: '2024', what: 'Ounass partnership launches; the line becomes available outside the atelier.' },
              { y: '2026', what: 'Drop 09. 13 styles live. Relaunch of the brand site.' },
            ].map((t, i) => (
              <div className="timeline-row" key={i}>
                <div className="y mono">{t.y}</div>
                <div className="what">{t.what}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="sect-head">
            <div>
              <span className="eyebrow">Atelier details</span>
              <h2 className="display" style={{ marginTop: 16, fontSize: 'clamp(36px, 4.5vw, 64px)' }}>Closer in.</h2>
            </div>
            <div className="meta">The small things you notice on a piece — the lace, the hand-corded loops, the orange enamel square.</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
            {moodImages.map((src, i) => (
              <div key={i} style={{ aspectRatio: '3/4', overflow: 'hidden', background: 'var(--surface)' }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ConceptPage, CollectionPage, ProductPage, ProjectPage });