/* FRAME — Editorial concept store homepage */
const { useState, useEffect, useMemo } = React;

/* ---------- Data ---------- */

const BRANDS = [
  "Comme des Garçons", "Junya Watanabe", "Undercover", "Supreme", "Nike ACG",
  "Needles", "Satisfy", "On", "Asics", "Hoka", "Snow Peak", "Oakley",
  "Brain Dead", "Goldwin", "Roa", "Visvim", "Wacko Maria", "Norda", "Cayl",
  "District Vision", "Salomon", "Hasami Porcelain", "Maurten", "Monocle"
];

const STORIES = [
  {
    kicker: "Editorial 028",
    title: "Long, low and silver.",
    blurb: "On's metallic shellsuit translated through a Goldwin gradient — a Spring transit kit, shoppable from the floor up.",
    img: "media/product-05-on.webp",
    tag: "Running · 14 pieces",
    date: "Spring 26",
  },
  {
    kicker: "Collab",
    title: "Habibi Dunk.",
    blurb: "The Dubai-tinted SB Dunk Low we co-launched — and the look that lived around it on opening night at d3.",
    img: "media/product-17-nike-sb-dunk.webp",
    tag: "Skate · 9 pieces",
    date: "Drop 04",
  },
  {
    kicker: "House Visit",
    title: <>Japan, <span className="serif-italic">framed.</span></>,
    blurb: "Snow Peak's iron tableware, Hasami porcelain, Monocle × @aroma's Yoshino hinoki — quiet objects for the apartment.",
    img: "media/product-08-snow-peak.webp",
    tag: "Lifestyle · 22 pieces",
    date: "House 003",
  },
];

const WORLDS = [
  { name: "Running", n: "01", img: "media/product-13-asics-novablast.webp" },
  { name: "Trail & Outdoor", n: "02", img: "media/product-15-norda-008.webp" },
  { name: "Skate", n: "03", img: "media/product-18-fucking-awesome-deck.webp" },
  { name: "Fashion", n: "04", img: "media/product-06-comme-des-garcons-shirt.webp" },
  { name: "Lifestyle", n: "05", img: "media/product-07-sango-toki.webp" },
  { name: "Wellness", n: "06", img: "media/product-29-maurten-drink-mix.webp" },
];

const PRODUCTS = [
  { brand: "Goldwin", name: "Pertex Shieldair Wind Jacket", price: "AED 2,485", img: "media/product-21-goldwin-jacket.webp", badge: "New" },
  { brand: "Comme des Garçons SHIRT", name: "Patchwork Stripe Print Shirt", price: "AED 1,395", img: "media/product-06-comme-des-garcons-shirt.webp" },
  { brand: "Norda", name: "008 Trail Runner — Sandstone", price: "AED 1,650", img: "media/product-15-norda-008.webp", badge: "Drop" },
  { brand: "Hoka", name: "Mach X 2 — Silver / Black", price: "AED 945", img: "media/product-14-hoka-machx2.webp" },
  { brand: "Needles", name: "Painter Pant — Indigo Repair", price: "AED 1,180", img: "media/product-12-needles.webp" },
  { brand: "Snow Peak", name: "Takibi Fire & Grill — Pine Crate", price: "AED 3,290", img: "media/product-08-snow-peak.webp" },
  { brand: "Roa", name: "Andreas Hiking Jacket", price: "AED 2,150", img: "media/product-20-roa-jacket.webp", badge: "New" },
  { brand: "Maurten", name: "Drink Mix 320 — Caf 100 (box of 12)", price: "AED 285", img: "media/product-29-maurten-drink-mix.webp" },
];

/* ---------- Logo ---------- */

const FrameWordmark = ({ className }) => (
  <svg viewBox="0 0 634 140" className={className} aria-label="FRAME" role="img">
    <title>FRAME</title>
    <g fill="currentColor">
      <path d="M0 0 h92 v26 H30 v30 h54 v26 H30 v58 H0 Z M114 0 h60 q44 0 44 44 q0 28 -22 38 l28 58 H232 l-26 -54 H144 v54 H114 Z M144 26 v40 h26 q18 0 18 -20 q0 -20 -18 -20 Z M326 0 h0 l52 140 H348 l-9 -28 H315 l-9 28 H254 Z M314 86 h28 l-14 -44 Z M372 0 h34 l30 70 l30 -70 h34 v140 H480 V60 l-26 60 h-22 l-26 -60 v80 H372 Z M536 0 h94 v26 H566 v28 h56 v26 H566 v30 h64 v26 H536 Z" />
    </g>
  </svg>
);

const FrameMark = ({ className }) => (
  <svg viewBox="0 0 24 24" className={className} aria-label="FRAME" role="img" fill="currentColor">
    <path d="M3 3 H21 V8 H8 V10 H18 V14 H8 V21 H3 Z"/>
  </svg>
);

/* ---------- Components ---------- */

function UtilityBar({ lang, setLang }) {
  const promo = [
    "FRAME EDIT 028 — On × Goldwin transit",
    "New: Habibi Dunk restock",
    "Open today 8:30 — 22:30 · R03 Bldg 7, d3",
    "Free shipping over AED 500 within the UAE",
    "Frame Café — La Cabra coffee, 100% organic smoothies",
    "YUi — 16-hour broth, daily 11 to late",
  ];
  return (
    <div className="utility">
      <div className="wrap utility-inner">
        <span style={{whiteSpace:"nowrap"}}>Dubai d3 · Est. 2017</span>
        <div className="utility-mid">
          <div className="ticker">
            {[...promo, ...promo].map((t, i) => (
              <span key={i}>{t}</span>
            ))}
          </div>
        </div>
        <div className="lang-toggle" style={{whiteSpace:"nowrap", display:"flex", alignItems:"center"}}>
          <button className={lang==="en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <span className="sep">·</span>
          <button className={lang==="ar" ? "on" : ""} onClick={() => setLang("ar")}>ع</button>
          <span className="sep">·</span>
          <button onClick={() => alert("RU coming Q3")}>RU</button>
          <span className="sep">·</span>
          <button onClick={() => alert("中文 coming Q3")}>中</button>
        </div>
      </div>
    </div>
  );
}

function Nav() {
  return (
    <nav className="main">
      <div className="wrap nav-inner">
        <div className="nav-links">
          <a href="#shop">Shop</a>
          <a href="#stories">Stories</a>
          <a href="#brands">Brands</a>
          <a href="#space">The Space</a>
          <a href="#about">About</a>
        </div>
        <a className="nav-logo" href="#" aria-label="FRAME, home">
          <FrameWordmark />
        </a>
        <div className="nav-right">
          <button aria-label="Search">⌕ Search</button>
          <a href="#" className="cart-pill">Bag · 0</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ heroImage }) {
  return (
    <section className="wrap hero">
      <div className="hero-grid">
        <div className="hero-head">
          <h1 className="hero-title">
            Curated for the<br/>
            cities, the trails,<br/>
            <span className="it">and the in-between.</span>
          </h1>
          <div className="hero-meta">
            <span className="mono eyebrow">The FRAME Edit · 028 · Spring 2026</span>
            <p>An editorial concept store at Dubai Design District since 2017 — running, outdoor, skate, fashion and quiet objects, told as shoppable stories rather than a flat grid.</p>
            <div className="hero-actions">
              <a className="btn btn-solid" href="#stories">Read the edit <span className="arrow">→</span></a>
              <a className="btn" href="#shop">Shop new in <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
        <div className="hero-image">
          <div className="ph" style={{backgroundImage:`url(${heroImage})`, backgroundSize:"cover", backgroundPosition:"center 30%"}} />
          <div className="caption">
            <span className="mono">FRAME 028 · Goldwin Pertex · On Cloudboom · Norda 008</span>
            <span className="mono">Shot at d3 / R03</span>
          </div>
        </div>
        <div className="divider">
          <span className="mono">2,986 product records · 12,263 variants · live Shopify feed</span>
          <span className="mono">29 distinct shots in this edition · scroll ↓</span>
        </div>
      </div>
    </section>
  );
}

function Stories() {
  return (
    <section className="wrap sec" id="stories">
      <div className="sec-head">
        <div>
          <span className="mono eyebrow" style={{color:"var(--muted)"}}>The FRAME Edit</span>
          <h2 className="sec-title" style={{marginTop:14}}>Three stories, <span className="it">shoppable from the page.</span></h2>
        </div>
        <a href="#" className="btn">All stories <span className="arrow">→</span></a>
      </div>
      <div className="stories">
        {STORIES.map((s, i) => (
          <article className="story" key={i}>
            <div className="story-img">
              <div className="ph" style={{backgroundImage:`url(${s.img})`, backgroundSize: i===0 ? "75%" : "70%", backgroundRepeat:"no-repeat", backgroundPosition:"center", backgroundColor:"#EFEFEF"}} />
              <span className="index">№ {String(i+1).padStart(2,"0")} / 03</span>
            </div>
            <div className="story-body">
              <span className="mono story-kicker">{s.kicker} · {s.date}</span>
              <h3>{s.title}</h3>
              <p>{s.blurb}</p>
              <a className="shop" href="#">
                <span>Shop the story</span>
                <span>{s.tag} →</span>
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Worlds() {
  return (
    <section className="wrap sec" id="shop" style={{paddingTop:0}}>
      <div className="sec-head">
        <div>
          <span className="mono eyebrow" style={{color:"var(--muted)"}}>Discovery · 06 worlds</span>
          <h2 className="sec-title" style={{marginTop:14}}>Shop by <span className="it">world.</span></h2>
          <p className="sec-sub">A better front door than a flat catalogue. Choose the world you live in — or the one you're packing for this weekend.</p>
        </div>
        <a href="#" className="btn">All categories <span className="arrow">→</span></a>
      </div>
      <div className="worlds">
        {WORLDS.map((w) => (
          <a className="world" key={w.name} href="#">
            <div className="ph" style={{backgroundImage:`url(${w.img})`, backgroundSize: "76%", backgroundRepeat:"no-repeat", backgroundPosition:"center", backgroundColor:"#EFEFEF"}} />
            <div className="veil" />
            <div className="label">
              <h4>{w.name}</h4>
              <span className="num">{w.n} / 06</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function BrandStrip() {
  const row = [
    "Comme des Garçons", "Junya Watanabe", "Supreme", "Nike ACG", "Satisfy",
    "On", "Norda", "Snow Peak", "Needles", "Goldwin", "Visvim", "Wacko Maria",
    "Brain Dead", "Roa", "Salomon", "Hoka", "District Vision", "Hasami", "Maurten"
  ];
  return (
    <section className="brand-strip" id="brands">
      <div className="wrap">
        <div className="head">
          <h5>An <span className="serif-italic">elite</span> curated roster.</h5>
          <a href="#" className="mono" style={{color:"var(--muted)"}}>All brands →</a>
        </div>
      </div>
      <div className="brand-marquee">
        {[...row, ...row].map((b, i) => (
          <React.Fragment key={i}>
            <span className={i % 3 === 1 ? "it" : ""}>{b}</span>
            <span className="dot" aria-hidden="true" />
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function NewArrivals() {
  return (
    <section className="wrap sec">
      <div className="sec-head">
        <div>
          <span className="mono eyebrow" style={{color:"var(--muted)"}}>New in · live Shopify</span>
          <h2 className="sec-title" style={{marginTop:14}}>This week, <span className="it">on the floor.</span></h2>
        </div>
        <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
          <a href="#" className="btn">Filters <span className="arrow">→</span></a>
          <a href="#" className="btn btn-solid">Shop all new <span className="arrow">→</span></a>
        </div>
      </div>
      <div className="products">
        {PRODUCTS.map((p) => (
          <a className="product" key={p.name} href="#">
            <div className="product-img">
              <div className="ph" style={{backgroundImage:`url(${p.img})`}} />
              {p.badge && (
                <div className="badge">
                  <span className={`b ${p.badge === "Drop" ? "accent" : ""}`}>{p.badge}</span>
                </div>
              )}
              <span className="quickadd">+ Add to bag</span>
            </div>
            <span className="brand">{p.brand}</span>
            <span className="name">{p.name}</span>
            <span className="price">{p.price}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function BrandFeature() {
  return (
    <section className="wrap sec">
      <div className="brand-feature">
        <div className="img">
          <div className="ph" style={{backgroundImage:`url(media/product-10-satisfy.webp)`, backgroundSize:"105%", backgroundPosition:"center"}} />
        </div>
        <div className="copy">
          <span className="mono eyebrow" style={{color:"var(--accent)"}}>Brand feature · 11</span>
          <h2 style={{marginTop:18}}>Satisfy. <br/><span className="it">For the long way home.</span></h2>
          <p className="pull">"Running is a vehicle, not the destination. We made clothes for the part where you keep going."</p>
          <p>The Parisian-Californian house has been on the floor at FRAME since the 2022 reset — SoftCell™ shells, MothTech™ tees, and the bandana edits we restock by the week. New SS26 drops every Thursday at noon Gulf time.</p>
          <dl className="meta">
            <div><dt>Stocked since</dt><dd>2022</dd></div>
            <div><dt>Pieces in store</dt><dd>62</dd></div>
            <div><dt>Next drop</dt><dd>Thu 28 · 12:00 GST</dd></div>
          </dl>
          <div className="actions">
            <a className="btn btn-solid" href="#">Shop Satisfy <span className="arrow">→</span></a>
            <a className="btn" href="#">Read the feature <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Space() {
  return (
    <section className="space" id="space">
      <div className="wrap">
        <div className="sec-head" style={{color:"#FAFAFA"}}>
          <div>
            <span className="mono eyebrow" style={{color:"rgba(255,255,255,0.6)"}}>The Space · d3 · since 2017</span>
            <h2 className="sec-title" style={{marginTop:14, color:"#FAFAFA"}}>More than a shop — <br/><span className="it">a destination.</span></h2>
            <p className="sec-sub" style={{color:"rgba(255,255,255,0.6)"}}>Renovated in 2022 by Tokyo architect Jo Nagasaka (Schemata). One address, three reasons to visit.</p>
          </div>
          <a className="btn" href="#" style={{borderColor:"rgba(255,255,255,0.6)", color:"#FAFAFA"}}>Plan a visit <span className="arrow">→</span></a>
        </div>
      </div>
      <div className="wrap">
        <div className="space-grid">
          <div className="space-card">
            <span className="num">01 / The Store</span>
            <span className="glyph">F.</span>
            <h3>The <span className="it">store.</span></h3>
            <p className="desc">2,986 product records from an elite global roster. The floor changes weekly — what you see online is what's on the rails.</p>
            <div className="specs">
              <div className="row"><span>Hours · Daily</span><span>8:30 — 22:30</span></div>
              <div className="row"><span>Last entry</span><span>22:15</span></div>
              <div className="row"><span>Fittings</span><span>By walk-in</span></div>
            </div>
          </div>
          <div className="space-card">
            <span className="num">02 / Frame Café</span>
            <span className="glyph">C.</span>
            <h3>Frame <span className="it">Café.</span></h3>
            <p className="desc">Specialty coffee by La Cabra (Copenhagen). 100% organic smoothies and plant-based pastry. The bench out front faces the d3 promenade.</p>
            <div className="specs">
              <div className="row"><span>Coffee</span><span>La Cabra · CPH</span></div>
              <div className="row"><span>Kitchen</span><span>Plant-based</span></div>
              <div className="row"><span>Open</span><span>8:30 — 20:00</span></div>
            </div>
          </div>
          <div className="space-card">
            <span className="num">03 / YUi</span>
            <span className="glyph">湯</span>
            <h3>YUi <span className="it">ramen.</span></h3>
            <p className="desc">A 16-hour broth and a six-seat counter, tucked behind the store. Walk-in only. Lunch service rolls into late dinner — same kitchen, different mood.</p>
            <div className="specs">
              <div className="row"><span>Service</span><span>Walk-in · 11 → late</span></div>
              <div className="row"><span>Seats</span><span>06 counter</span></div>
              <div className="row"><span>Broth</span><span>16 hrs · daily</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Visit() {
  return (
    <section className="wrap sec" id="about">
      <div className="visit">
        <div className="visit-map" role="img" aria-label="Map of FRAME at Dubai Design District">
          <div className="gridlines" />
          {/* schematic 'building' rectangles */}
          <div style={{position:"absolute", left:"15%", top:"20%", width:"22%", height:"18%", border:"1px solid var(--border)", background:"color-mix(in oklch, var(--text) 4%, transparent)"}} />
          <div style={{position:"absolute", left:"42%", top:"32%", width:"28%", height:"22%", border:"1px solid var(--text)", background:"color-mix(in oklch, var(--text) 8%, transparent)"}} />
          <div style={{position:"absolute", left:"22%", top:"60%", width:"26%", height:"18%", border:"1px solid var(--border)", background:"color-mix(in oklch, var(--text) 4%, transparent)"}} />
          <div style={{position:"absolute", left:"60%", top:"68%", width:"18%", height:"16%", border:"1px solid var(--border)", background:"color-mix(in oklch, var(--text) 4%, transparent)"}} />
          <span className="label-d3">d3 · DUBAI DESIGN DISTRICT</span>
          <span className="coords">25.18°N · 55.30°E (approx · confirm on map)</span>
          <span className="pin" />
        </div>
        <div className="visit-info">
          <span className="mono eyebrow" style={{color:"var(--muted)"}}>Visit · Verified contact</span>
          <h3 className="h" style={{marginTop:18}}>R03, Building 7, <br/><span className="it">Dubai Design District.</span></h3>
          <dl>
            <dt>Address</dt>
            <dd>R03, Ground Floor, Building 7<br/>Dubai Design District (d3), Dubai, UAE</dd>
            <dt>Hours</dt>
            <dd>Monday — Sunday<br/>8:30 — 22:30 GST</dd>
            <dt>Phone</dt>
            <dd><a href="tel:+97142434258">04 243 4258</a></dd>
            <dt>Email</dt>
            <dd><a href="mailto:shop@selectshopframe.com">shop@selectshopframe.com</a></dd>
            <dt>Founded</dt>
            <dd>2017 · Peter Ahn<br/>Renovated 2022 · Jo Nagasaka</dd>
            <dt>Operated by</dt>
            <dd>ShopFrame FZ-LLC</dd>
          </dl>
          <div className="actions">
            <a className="btn btn-solid" href="mailto:shop@selectshopframe.com">Press & wholesale <span className="arrow">→</span></a>
            <a className="btn" href="tel:+97142434258">Call the floor <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  return (
    <section className="newsletter">
      <div className="wrap newsletter-inner">
        <div>
          <h3>The Edit, <span className="it">in your inbox.</span></h3>
          <p>One letter a fortnight — drops, restocks, the run club. No noise. We don't share follower counts we can't verify and we won't sell your address.</p>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); alert("Subscribed — you'll get edition 029."); }}>
          <input type="email" placeholder="your@email.com" required />
          <button type="submit">Subscribe →</button>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-logo">
            <FrameWordmark />
            <p className="foot-tag">A curated editorial destination — shoppable stories, brand features, better discovery. At d3 since 2017.</p>
            <div className="foot-meta">
              <span>ShopFrame FZ-LLC</span>
              <span>R03 Bldg 7 · Dubai Design District</span>
              <span>Daily 8:30 → 22:30 GST</span>
            </div>
          </div>
          <div>
            <h6>Shop</h6>
            <ul>
              <li><a href="#">By world</a></li>
              <li><a href="#">By brand</a></li>
              <li><a href="#">New in</a></li>
              <li><a href="#">Drops & collabs</a></li>
              <li><a href="#">Sale</a></li>
            </ul>
          </div>
          <div>
            <h6>Stories</h6>
            <ul>
              <li><a href="#">The Edit 028</a></li>
              <li><a href="#">Brand features</a></li>
              <li><a href="#">House visits</a></li>
              <li><a href="#">FRAME Run Club</a></li>
            </ul>
          </div>
          <div>
            <h6>The Space</h6>
            <ul>
              <li><a href="#">The store</a></li>
              <li><a href="#">Frame Café</a></li>
              <li><a href="#">YUi ramen</a></li>
              <li><a href="#">Plan a visit</a></li>
            </ul>
          </div>
          <div>
            <h6>FRAME</h6>
            <ul>
              <li><a href="#">About · Since 2017</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Wholesale</a></li>
              <li><a href="https://instagram.com/selectshopframe">Instagram</a></li>
              <li><a href="#">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 ShopFrame FZ-LLC · All prices AED · VAT included where applicable</span>
          <span>Terms · Privacy · Shipping · Returns</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Tweaks integration ---------- */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E2483D",
  "theme": "light",
  "rtl": false,
  "heroImage": "media/product-21-goldwin-jacket.webp"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = (window.useTweaks || ((d) => [d, () => {}]))(TWEAK_DEFAULTS);

  const [lang, setLang] = useState("en");

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.setAttribute("dir", t.rtl ? "rtl" : "ltr");
    document.documentElement.setAttribute("lang", t.rtl ? "ar" : "en");
  }, [t.accent, t.theme, t.rtl]);

  useEffect(() => {
    if (lang === "ar") setTweak("rtl", true);
    else setTweak("rtl", false);
  }, [lang]);

  return (
    <>
      <UtilityBar lang={lang} setLang={setLang} />
      <Nav />
      <Hero heroImage={t.heroImage} />
      <Stories />
      <Worlds />
      <BrandStrip />
      <NewArrivals />
      <BrandFeature />
      <Space />
      <Visit />
      <Newsletter />
      <Footer />

      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Accent">
            <TweakColor
              label="Color"
              value={t.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#E2483D", "#0C0C0C", "#1B4D3E", "#C9A227"]}
            />
          </TweakSection>
          <TweakSection label="Theme">
            <TweakRadio
              label="Mode"
              value={t.theme}
              onChange={(v) => setTweak("theme", v)}
              options={[{value:"light", label:"Paper"}, {value:"dark", label:"Noir"}]}
            />
          </TweakSection>
          <TweakSection label="Direction">
            <TweakToggle
              label="Arabic (RTL)"
              value={t.rtl}
              onChange={(v) => { setTweak("rtl", v); setLang(v ? "ar" : "en"); }}
            />
          </TweakSection>
          <TweakSection label="Hero image">
            <TweakSelect
              label="Pick"
              value={t.heroImage}
              onChange={(v) => setTweak("heroImage", v)}
              options={[
                {value:"media/product-21-goldwin-jacket.webp", label:"Goldwin Pertex"},
                {value:"media/product-20-roa-jacket.webp", label:"Roa Andreas"},
                {value:"media/product-05-on.webp", label:"On metallic"},
                {value:"media/product-17-nike-sb-dunk.webp", label:"Habibi Dunk"},
                {value:"media/product-08-snow-peak.webp", label:"Snow Peak"},
              ]}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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