// App root + Home + Designer + Sustainability + Press + Contact
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

function Home({ setRoute, openAppt, openProduct, currency }) {
  return (
    <div className="page page-home">
      {/* HERO */}
      <section className="hero">
        <div className="hero-img" style={{backgroundImage: `url(media/editorial-blue-coat-wide.webp)`}}/>
        <div className="hero-overlay"/>
        <div className="hero-text">
          <p className="eyebrow inverse">Mrs. Keepa · since May 2016 · Dubai</p>
          <h1 className="display hero-h1 inverse">
            <span>Where</span>
            <span className="italic">Ready&nbsp;to&nbsp;Wear</span>
            <span>meets</span>
            <span className="italic">Couture</span>
            <span>.</span>
          </h1>
          <p className="lede inverse">An eclectic, avant-garde fashion house drawing from travel, vintage glamour, and the architecture of the body. Made in our Dubai workshop.</p>
          <div className="row gap mt-lg">
            <button className="btn primary inverse" onClick={() => setRoute({page:'shop'})}>Shop Ready to Wear</button>
            <button className="btn ghost inverse" onClick={openAppt}>Book a Studio Appointment</button>
          </div>
        </div>
        <div className="hero-marquee">
          <div className="marquee-track">
            {Array.from({length: 4}).map((_, i) => (
              <span key={i} className="marquee-group">
                <span>The Getaway</span><span className="dot">·</span>
                <span>Need Therapy</span><span className="dot">·</span>
                <span>Harmonious Chaos</span><span className="dot">·</span>
                <span>La Boîte</span><span className="dot">·</span>
                <span>Life Is A Game</span><span className="dot">·</span>
                <span>La Culture</span><span className="dot">·</span>
                <span>Inhale · Studio</span><span className="dot">·</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* DIVISION SPLIT */}
      <section className="division">
        <div className="div-half div-rtw">
          <div className="div-img" style={{backgroundImage: `url(media/media-07-shop-by-look-1-1.webp)`}}/>
          <div className="div-content">
            <p className="eyebrow">01 · Ready to Wear</p>
            <h2 className="display xl">A wardrobe that travels.</h2>
            <p className="lede">369 pieces across nine categories — silk satin slip dresses, mushroom-print kimonos, double bralette corsets, wide-leg silks. Made to be worn, restyled, kept.</p>
            <button className="btn dark" onClick={() => setRoute({page:'shop'})}>Enter the shop →</button>
          </div>
        </div>
        <div className="div-half div-studio">
          <div className="div-img" style={{backgroundImage: `url(media/studio-inhale-black-eel-dress.webp)`}}/>
          <div className="div-content">
            <p className="eyebrow inverse">02 · Studio · Couture</p>
            <h2 className="display xl inverse">A piece, by appointment.</h2>
            <p className="lede inverse">Inhale and private commissions — sculpted, three-way pieces fitted in the atelier. First presented at Sotheby's Dubai.</p>
            <button className="btn light" onClick={() => setRoute({page:'studio'})}>The Studio →</button>
          </div>
        </div>
      </section>

      {/* COLLECTIONS STRIP */}
      <section className="cols-strip">
        <div className="strip-head">
          <p className="eyebrow">Seven worlds</p>
          <h2 className="display lg">By collection.</h2>
          <button className="link-arrow" onClick={() => setRoute({page:'collections'})}>See all collections →</button>
        </div>
        <div className="strip-scroll">
          {COLLECTIONS.map(c => (
            <button key={c.slug} className={'strip-card ' + (c.studio ? 'studio' : '')}
              onClick={() => setRoute(c.studio ? {page:'studio'} : {page:'shop', filter:{collection:c.slug}})}>
              <div className="strip-img" style={{backgroundImage: `url(${c.img})`}}/>
              <div className="strip-card-info">
                <p className="eyebrow xs">{c.count} pieces</p>
                <h4 className="display">{c.name}</h4>
                <p className="muted small">{c.mood}</p>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* FEATURED PIECES */}
      <section className="featured">
        <div className="strip-head">
          <p className="eyebrow">From the floor</p>
          <h2 className="display lg">Pieces, this week.</h2>
          <button className="link-arrow" onClick={() => setRoute({page:'shop'})}>Shop Ready to Wear →</button>
        </div>
        <div className="featured-grid">
          {PRODUCTS_RTW.slice(0, 4).map(p => (
            <ProductCard key={p.id} p={p} onOpen={openProduct} currency={currency}/>
          ))}
        </div>
      </section>

      {/* SHOP BY CATEGORY */}
      <section className="cat-band">
        <div className="strip-head">
          <p className="eyebrow">Shop by category</p>
          <h2 className="display lg">Where to start.</h2>
        </div>
        <div className="cat-grid">
          {[
            { slug: 'dresses', name: 'Dresses', img: 'media/media-02-dresses.webp', count: 69 },
            { slug: 'tops', name: 'Tops', img: 'media/media-04-tops.webp', count: 106 },
            { slug: 'pants', name: 'Pants', img: 'media/media-03-pants.webp', count: 61 },
            { slug: 'kimonos', name: 'Kimonos', img: 'media/media-05-kimonos.webp', count: 29 },
          ].map(c => (
            <button key={c.slug} className="cat-tile" onClick={() => setRoute({page:'shop', filter:{category: c.slug}})}>
              <div className="cat-img" style={{backgroundImage: `url(${c.img})`}}/>
              <div className="cat-tile-info">
                <h4 className="display">{c.name}</h4>
                <p className="eyebrow xs inverse">{c.count} pieces →</p>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* DESIGNER STORY */}
      <section className="story">
        <div className="story-img" style={{backgroundImage: `url(media/brand-story-abstract-look.webp)`}}/>
        <div className="story-text">
          <p className="eyebrow">The Designer</p>
          <h2 className="display xl">Mariam Yeya, on starting a fashion house in Dubai.</h2>
          <p className="lede">French-Egyptian designer Mariam Yeya co-founded Mrs. Keepa with Bassel "Keepa" Komaty in May 2016 — a wedding-night nickname that became a house. After ESMOD Dubai and a honeymoon in Venice, she turned a private practice into an atelier in Dubai Design District. The label has since shown at Dubai Fashion Week, debuted couture at Sotheby's, and been profiled by Vogue, Grazia, and Khaleej Times.</p>
          <div className="row gap">
            <button className="btn dark" onClick={() => setRoute({page:'designer'})}>Read the full story →</button>
          </div>
          <div className="story-stats">
            <div><span className="display lg">2016</span><p className="muted small">Founded in Dubai</p></div>
            <div><span className="display lg">7</span><p className="muted small">Collections</p></div>
            <div><span className="display lg">1</span><p className="muted small">Atelier · d3</p></div>
          </div>
        </div>
      </section>

      {/* SUSTAINABILITY */}
      <section className="sustain">
        <div className="sustain-inner">
          <p className="eyebrow">Materials & Practice</p>
          <h2 className="display xl">Worn longer, on purpose.</h2>
          <div className="sustain-grid">
            <div className="sustain-col">
              <p className="num display lg">01</p>
              <h4 className="display">Timeless, season-less.</h4>
              <p className="muted">Fabrics return between collections. Pieces are cut to be restyled, not retired.</p>
            </div>
            <div className="sustain-col">
              <p className="num display lg">02</p>
              <h4 className="display">Mrs. Keepa Home.</h4>
              <p className="muted">Off-cuts from couture become cushions, throws and small objects — a second life for the atelier's fabric stock.</p>
            </div>
            <div className="sustain-col">
              <p className="num display lg">03</p>
              <h4 className="display">Small-scale, local.*</h4>
              <p className="muted">Mariam describes the atelier as small-scale, zero-waste local production. *Attributed; see press notes.</p>
            </div>
          </div>
        </div>
      </section>

      {/* PRESS STRIP */}
      <section className="press">
        <div className="strip-head center">
          <p className="eyebrow">In the press</p>
          <h2 className="display lg">A house with a record.</h2>
        </div>
        <div className="press-grid">
          {PRESS.map(p => (
            <div key={p.name} className="press-cell">
              <div className="press-name">{p.name}</div>
              <div className="press-context muted small">{p.context}</div>
            </div>
          ))}
        </div>
        <div className="press-disclaim">
          <p className="muted small">Press includes profile features, runway coverage, and stockist relationships. Logos are mentioned by name only — image rights remain with their respective publications. Mariam describes Rihanna as an early muse (per Grazia). The house does not claim wear-by endorsements without confirmation.</p>
        </div>
      </section>

      {/* APPOINTMENT BAND */}
      <section className="appt-band">
        <div className="appt-img" style={{backgroundImage: `url(media/media-01-1774949823421r.webp)`}}/>
        <div className="appt-overlay"/>
        <div className="appt-inner">
          <p className="eyebrow inverse">By appointment · Dubai Design District</p>
          <h2 className="display xxl inverse">A private fitting,<br/><span className="italic">at the atelier.</span></h2>
          <p className="lede inverse">For Studio commissions, bridal, or a closer look at the Inhale couture collection — book a quiet hour at the workshop in Building 7.</p>
          <div className="row gap center mt-lg">
            <button className="btn primary inverse lg" onClick={openAppt}>Book an appointment</button>
            <a href="https://wa.me/971526933359" target="_blank" rel="noopener" className="btn ghost inverse lg">WhatsApp the atelier</a>
          </div>
        </div>
      </section>
    </div>
  );
}

function DesignerPage({ setRoute, openAppt }) {
  return (
    <div className="page page-designer">
      <div className="designer-hero">
        <div className="designer-hero-img" style={{backgroundImage: `url(media/brand-story-abstract-look.webp)`}}/>
        <div className="designer-hero-text">
          <p className="eyebrow inverse">The Atelier</p>
          <h1 className="display xxl inverse">Mariam Yeya.</h1>
        </div>
      </div>
      <div className="designer-body">
        <div className="designer-col">
          <p className="eyebrow">In conversation</p>
          <p className="lede big">"I wanted a house, not a brand. Something a woman could keep, restyle, hand down. The avant-garde came after — first the wardrobe, then the noise."</p>
          <p className="muted small">— Mariam Yeya, on the founding of Mrs. Keepa.*</p>
        </div>
        <div className="designer-col">
          <p>French-Egyptian designer Mariam Yeya co-founded Mrs. Keepa with her husband Bassel "Keepa" Komaty in May 2016. She studied at ESMOD Dubai before launching the label, which has since grown into a Ready to Wear and Studio/couture house with an atelier in Building 7 of Dubai Design District.</p>
          <p>The label's signature is an eclectic, avant-garde silhouette drawn from vintage glamour and travel. Mrs. Keepa has presented at Dubai Fashion Week, debuted couture at Sotheby's Dubai, and been profiled in Vogue, Grazia Middle East, and Khaleej Times.</p>
          <p>The brand's Studio line, Inhale, formalised the house's couture practice — pieces fitted by appointment, made in the d3 workshop, designed to be worn three ways.</p>
        </div>
      </div>

      <div className="timeline">
        <div className="tl-head">
          <p className="eyebrow">A house, a few rooms at a time.</p>
          <h2 className="display xl">Selected moments.</h2>
        </div>
        <div className="tl-grid">
          {[
            { year: 'May 2016', title: 'The label launches', body: 'Mariam Yeya and Bassel "Keepa" Komaty open Mrs. Keepa.' },
            { year: '2018', title: 'Atelier · d3', body: 'A working studio opens in Building 7, Dubai Design District.' },
            { year: '2020', title: 'Mrs. Keepa Home', body: 'A homeware line is born from the atelier\'s fabric stock.' },
            { year: '2023', title: 'Dubai Fashion Week', body: 'AW23/24 digital presentation; designer profile.' },
            { year: '2024', title: 'Sotheby\'s Dubai', body: 'Inhale, the couture collection, debuts at Sotheby\'s Dubai.' },
            { year: '2025', title: 'Bloomingdale\'s UAE', body: 'A selection of Ready to Wear pieces enters the floor.' },
          ].map(m => (
            <div key={m.year} className="tl-cell">
              <p className="tl-year">{m.year}</p>
              <h4 className="display">{m.title}</h4>
              <p className="muted small">{m.body}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="designer-cta">
        <h2 className="display xl">Meet at the atelier.</h2>
        <button onClick={openAppt} className="btn primary lg">Book a visit</button>
        <p className="muted small">*Spelling and attribution under client confirmation. Press cited above is accurate to the public record.</p>
      </div>
    </div>
  );
}

function PressPage() {
  return (
    <div className="page page-press">
      <div className="page-head">
        <div className="page-head-inner">
          <p className="eyebrow">Press · runway · retail</p>
          <h1 className="display xxl">In the press.</h1>
          <p className="lede">Selected coverage and retail partnerships. Mentions are listed by publication name only; image rights remain with their respective sources.</p>
        </div>
      </div>
      <div className="press-list">
        {[
          { src: 'Sotheby\'s Dubai', date: 'Feb 2024', headline: 'Inhale — the couture debut.', kind: 'Runway · couture presentation', read: 'Sotheby\'s Magazine feature.' },
          { src: 'Vogue', date: '2023', headline: 'A profile of Mariam Yeya.', kind: 'Designer profile', read: 'Includes ESMOD Dubai, founding, and the move into couture.' },
          { src: 'Grazia Middle East', date: '2022–2024', headline: 'Repeat features — collections & home.', kind: 'Features · cover stories', read: 'Mrs. Keepa Home, restyling practice, early muses.' },
          { src: 'Khaleej Times', date: '2023', headline: 'Inside the d3 atelier.', kind: 'Feature', read: 'Long-form coverage of the workshop.' },
          { src: 'Dubai Fashion Week', date: 'AW23/24', headline: 'Designer presentation.', kind: 'Runway · digital', read: 'Official designer profile and look book.' },
          { src: 'Bloomingdale\'s UAE', date: '2025–', headline: 'Stockist.', kind: 'Retail partnership', read: 'A selection of Ready to Wear available in-store.' },
          { src: 'Arab News · SheerLuxe · FLAIR', date: '2022–2025', headline: 'Regional coverage.', kind: 'Style press', read: 'Ongoing features and editorial credits.' },
        ].map((p, i) => (
          <article key={i} className="press-row">
            <div className="press-row-meta">
              <p className="press-row-src display">{p.src}</p>
              <p className="muted small">{p.date}</p>
            </div>
            <div className="press-row-body">
              <h3 className="display">{p.headline}</h3>
              <p className="eyebrow xs">{p.kind}</p>
              <p className="muted">{p.read}</p>
            </div>
            <div className="press-row-link">
              <a href="#" onClick={e=>e.preventDefault()} className="link-arrow">Read →</a>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

function SustainabilityPage() {
  return (
    <div className="page page-sustain">
      <div className="page-head">
        <div className="page-head-inner">
          <p className="eyebrow">Materials & Practice</p>
          <h1 className="display xxl">Made to be kept.</h1>
          <p className="lede">The Mrs. Keepa house is built on timeless, season-less materials; pieces designed to be restyled; and fabrics that reappear across collections. Stronger claims — small-scale zero-waste local production — are attributed to Mariam in press interviews, and are listed below with their sources.</p>
        </div>
      </div>
      <div className="sustain-long">
        {[
          { num: '01', title: 'Timeless materials.', body: 'We choose fabrics that read across seasons — silk satin, lace, brushed cotton, jersey, denim. A Mrs. Keepa piece should not become dated when the season turns.', cite: 'Source: official About page.' },
          { num: '02', title: 'Designed to be restyled.', body: 'Many Studio pieces are built to be worn three ways. Ready to Wear silhouettes are made to dress up or down with little intervention.', cite: 'Source: official About page.' },
          { num: '03', title: 'Fabric reuse, across collections.', body: 'A signature silk, a printed satin, a lace — fabrics reappear between collections rather than being retired.', cite: 'Source: official About page.' },
          { num: '04', title: 'Mrs. Keepa Home.', body: 'Off-cuts and remnants from couture are made into cushions, throws, and small homeware objects — a separate line that exists because the workshop existed first.', cite: 'Source: Grazia Middle East.' },
          { num: '05', title: 'A small workshop, in Dubai.', body: 'Mariam describes the atelier as small-scale, zero-waste local production, with all collections made in her Dubai workshop. We list this as Mariam\'s description rather than as an independently audited certification.', cite: 'Source: Sotheby\'s Dubai, Feb 2024 interview with Mariam Yeya.' },
        ].map(s => (
          <div key={s.num} className="sustain-row">
            <div className="sustain-row-num display lg">{s.num}</div>
            <div className="sustain-row-body">
              <h3 className="display lg">{s.title}</h3>
              <p className="lede">{s.body}</p>
              <p className="muted small">{s.cite}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ContactPage({ openAppt }) {
  return (
    <div className="page page-contact">
      <div className="page-head">
        <div className="page-head-inner">
          <p className="eyebrow">Find the atelier</p>
          <h1 className="display xxl">Contact.</h1>
          <p className="lede">For Ready to Wear orders, Studio commissions, press requests, or to find your way to Building 7 — write, call, or message us. We answer within one business day.</p>
        </div>
      </div>
      <div className="contact-grid">
        <div className="contact-col">
          <p className="eyebrow xs">Atelier · Showroom</p>
          <p className="display lg">B307, Building 7</p>
          <p>Dubai Design District (d3)<br/>Dubai, United Arab Emirates</p>
          <p className="muted small">25.1886722° N · 55.2978524° E</p>
          <a href="https://maps.app.goo.gl/J4oFGM6jZ5p1wRiZ6" target="_blank" rel="noopener" className="link-arrow">Open in Maps →</a>
        </div>
        <div className="contact-col">
          <p className="eyebrow xs">Direct lines</p>
          <p className="display lg">+971 52 693 3359</p>
          <p>WhatsApp accepted</p>
          <p><a href="mailto:queries@mrskeepa.com">queries@mrskeepa.com</a></p>
          <a href="https://wa.me/971526933359" target="_blank" rel="noopener" className="link-arrow">Open WhatsApp →</a>
        </div>
        <div className="contact-col">
          <p className="eyebrow xs">Hours</p>
          <p className="display lg">By appointment</p>
          <p>Saturday – Thursday<br/>Confirmed on booking</p>
          <p className="muted small">Walk-ins on request — please call ahead.</p>
          <button onClick={openAppt} className="link-arrow">Book a fitting →</button>
        </div>
      </div>
      <div className="contact-map">
        <div className="map-pin">
          <span>d3 · Building 7</span>
          <div className="dot-pulse"/>
        </div>
        <p className="muted small map-note">Dubai Design District, behind Building 6. Visitor parking in P2.</p>
      </div>
    </div>
  );
}

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#7A5B3C",
    "displayFont": "Bodoni Moda",
    "bodyFont": "Archivo",
    "darkStudio": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [route, setRoute] = useStateA({ page: 'home', filter: { category: null, collection: null } });
  const [bag, setBag] = useStateA([]);
  const [bagOpen, setBagOpen] = useStateA(false);
  const [apptOpen, setApptOpen] = useStateA(false);
  const [searchOpen, setSearchOpen] = useStateA(false);
  const [product, setProduct] = useStateA(null);
  const [currency, setCurrency] = useStateA('USD');

  const allProducts = useMemoA(() => [...PRODUCTS_RTW, ...PRODUCTS_STUDIO], []);

  // sync filter when route carries one
  useEffectA(() => {
    if (route.filter && route.page === 'shop') {
      // ok, ShopRTW reads route.filter
    }
  }, [route]);

  const setFilter = (f) => setRoute({...route, filter: f});

  const addToBag = (item) => {
    setBag(b => [...b, item]);
    setBagOpen(true);
  };

  const openProduct = (p) => setProduct(p);

  // Apply tweaks to CSS variables
  useEffectA(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--font-display', `"${t.displayFont}", "Bodoni Moda", "Playfair Display", Georgia, serif`);
    document.documentElement.style.setProperty('--font-body', `"${t.bodyFont}", "Archivo", "Manrope", system-ui, sans-serif`);
  }, [t]);

  return (
    <>
      <UtilityBar currency={currency} setCurrency={setCurrency} />
      <Nav
        route={route}
        setRoute={setRoute}
        openBag={() => setBagOpen(true)}
        openAppt={() => setApptOpen(true)}
        openSearch={() => setSearchOpen(true)}
        bagCount={bag.length}
      />

      <main>
        {route.page === 'home' && <Home setRoute={setRoute} openAppt={() => setApptOpen(true)} openProduct={openProduct} currency={currency}/>}
        {route.page === 'shop' && <ShopRTW filter={route.filter || {}} setFilter={setFilter} currency={currency} openProduct={openProduct}/>}
        {route.page === 'studio' && <StudioPage currency={currency} openProduct={openProduct} openAppt={() => setApptOpen(true)}/>}
        {route.page === 'collections' && <CollectionsPage setRoute={setRoute} currency={currency}/>}
        {route.page === 'designer' && <DesignerPage setRoute={setRoute} openAppt={() => setApptOpen(true)}/>}
        {route.page === 'sustainability' && <SustainabilityPage/>}
        {route.page === 'press' && <PressPage/>}
        {route.page === 'contact' && <ContactPage openAppt={() => setApptOpen(true)}/>}
      </main>

      <Footer setRoute={setRoute} openAppt={() => setApptOpen(true)}/>

      <BagDrawer
        open={bagOpen}
        onClose={() => setBagOpen(false)}
        items={bag}
        currency={currency}
        removeItem={(i) => setBag(b => b.filter((_, idx) => idx !== i))}
      />
      <AppointmentModal open={apptOpen} onClose={() => setApptOpen(false)} />
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} allProducts={allProducts} openProduct={openProduct} />
      <ProductOverlay product={product} onClose={() => setProduct(null)} currency={currency} addToBag={addToBag}/>
      <WhatsAppFab/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Accent colour"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#7A5B3C', '#A8896C', '#1F2B4D', '#5C2018', '#3B4A3F', '#0B0A09']}
          />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect
            label="Display"
            value={t.displayFont}
            onChange={v => setTweak('displayFont', v)}
            options={['Bodoni Moda', 'Playfair Display', 'DM Serif Display', 'Cormorant Garamond']}
          />
          <TweakSelect
            label="Body"
            value={t.bodyFont}
            onChange={v => setTweak('bodyFont', v)}
            options={['Archivo', 'Manrope', 'DM Sans', 'Work Sans']}
          />
        </TweakSection>
        <TweakSection label="Studio surface">
          <TweakToggle
            label="Use deep ink for Studio"
            value={t.darkStudio}
            onChange={v => setTweak('darkStudio', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);