/* JOVI site — pages
   Imports: window.JM (data), window.JMUI (components, hooks)
   Each page is a function component that renders a full screen. */
const { useState, useEffect, useMemo } = React;

const Pages = {};

/* =========================================================
   HOME
   ========================================================= */
Pages.Home = function Home() {
  const { t, tt } = JMUI.useI18n();
  const { go } = JMUI.useRouter();
  return (
    <main>
      {/* Hero */}
      <section className="hero-wrap">
        <div className="container hero-grid hero">
          <div>
            <span className="hero-eyebrow">★ {t("hero.eyebrow")}</span>
            <h1>{t("hero.title")}</h1>
            <p>{t("hero.body")}</p>
            <div className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={()=>go("shop")}>{t("hero.cta1")} →</button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go("about")}>{t("hero.cta2")}</button>
            </div>
          </div>
          <div className="hero-art simple">
            <img src="assets/air-dry-clay-white.png" alt="JOVI Air Dry Clay — Pure White"/>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <div className="trust">
        <div className="trust-item">🛡️ <span>CE & ASTM D-4236 certified</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🌱 <span>Vegetable-based, gluten-free Plastilina</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🎓 <span>90% of Spanish teachers recommend JOVI</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🇲🇾 <span>Stocked in Shah Alam, ships nationwide</span></div>
      </div>

      {/* Find your fit — image-led category cards (per JOVI style guide) */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>{t("section.cats")}</h2>
              <div className="sub">{t("section.cats.sub")}</div>
            </div>
            <a className="right" href="#/shop" onClick={(e)=>{e.preventDefault(); go("shop");}}>View all products →</a>
          </div>
          <div className="fit-grid">
            {JM.CATEGORIES.map((c, i) => {
              const dark = i === 1; // Explore = red bg
              const bg = i === 1 ? c.color : c.bg;
              return (
                <div key={c.id} className="fit-card" style={{background: bg, color: dark ? "white" : "var(--ink-900)"}} onClick={()=>go("shop")}>
                  <div className="fit-num">0{i+1} · {tt(c.desc)}</div>
                  <div className="fit-art">
                    <span className="fit-blob" style={{background: dark ? "rgba(255,255,255,.18)" : c.color, opacity: dark ? 1 : .22}}/>
                    <img src={c.image} alt={t(c.labelKey)}/>
                  </div>
                  <div className="fit-bottom">
                    <h3>{t(c.labelKey)}</h3>
                    <p>{tt(c.blurb)}</p>
                    <div className="fit-arrow" style={{background: dark ? "var(--jovi-yellow)" : "var(--ink-900)", color: dark ? "var(--jovi-red)" : "var(--jovi-yellow)"}}>→</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Featured products */}
      <section className="section" style={{background:"var(--surface-base)"}}>
        <div className="container">
          <div className="section-head">
            <div>
              <h2>{t("section.featured")}</h2>
              <div className="sub">{t("section.featured.sub")}</div>
            </div>
            <a className="right" href="#/shop" onClick={(e)=>{e.preventDefault(); go("shop");}}>Shop all →</a>
          </div>
          <div className="prod-grid">
            {JM.PRODUCTS.slice(0, 4).map(p => <JMUI.ProductCard key={p.id} product={p}/>)}
          </div>
        </div>
      </section>

      {/* Why JM Brands — credentials strip (matches About page treatment) */}
      <section className="why-strip">
        <div className="container">
          <div className="why-eyebrow">Why JM Brands</div>
          <div className="why-grid">
            <div className="why-cred"><div className="num">1939</div><div className="lbl">Year JOVI was founded in Barcelona, Spain</div></div>
            <div className="why-cred"><div className="num">87</div><div className="lbl">Years of European craft heritage behind every box</div></div>
            <div className="why-cred"><div className="num">80+</div><div className="lbl">Countries where JOVI is sold worldwide</div></div>
            <div className="why-cred"><div className="num">100%</div><div className="lbl">Exclusive Malaysian distribution rights</div></div>
          </div>
        </div>
      </section>

      {/* Plastilina spotlight */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>New: Plastilina from Spain</h2>
              <div className="sub">Reusable. Vegetable-based. Never dries out.</div>
            </div>
            <a className="right" href="#/shop" onClick={(e)=>{e.preventDefault(); go("shop");}}>See all Plastilina →</a>
          </div>
          <div className="prod-grid cols-3">
            {JM.PRODUCTS.filter(p => p.id.startsWith("plastilina")).map(p => <JMUI.ProductCard key={p.id} product={p}/>)}
          </div>
        </div>
      </section>

      {/* JoviCreates teaser */}
      <section className="section" style={{background:"var(--ink-900)", color:"var(--jovi-yellow)"}}>
        <div className="container">
          <div className="section-head">
            <div>
              <h2 style={{color:"var(--jovi-yellow)"}}>{t("section.creates")}</h2>
              <div className="sub" style={{color:"rgba(255,220,0,.6)"}}>{t("section.creates.sub")}</div>
            </div>
            <a className="right" href="#/creates" onClick={(e)=>{e.preventDefault(); go("creates");}} style={{color:"var(--jovi-yellow)"}}>See the wall →</a>
          </div>
          <div className="ig-grid">
            {JM.JOVICREATES.slice(0,4).map((u, i) => <JMUI.IGCard key={i} post={u}/>)}
          </div>
        </div>
      </section>

      <JMUI.Newsletter/>
    </main>
  );
};

/* IG-style card component (used on Home + Creates) */
JMUI.IGCard = function IGCard({ post }) {
  const product = JM.PRODUCTS.find(p => p.id === post.product);
  const initial = post.handle.replace("@","").charAt(0).toUpperCase();
  const palette = post.palette;
  return (
    <article className="ig-card" onClick={()=>window.open(post.platform === "tt" ? "https://tiktok.com/" + post.handle : "https://instagram.com/" + post.handle.replace("@",""), "_blank")}>
      <div className="ig-head">
        <div className="ig-avatar" style={{background: palette === "#FFDC00" ? "var(--jovi-red)" : "var(--jovi-yellow)", color: palette === "#FFDC00" ? "var(--jovi-yellow)" : "var(--jovi-red)"}}>{initial}</div>
        <div className="ig-meta">
          <div className="ig-handle">{post.handle}</div>
          <div className="ig-city">{post.city}</div>
        </div>
        <span className="ig-platform" title={post.platform === "tt" ? "TikTok" : "Instagram"}>
          {post.platform === "tt" ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.86a8.16 8.16 0 0 0 4.77 1.52V6.93a4.85 4.85 0 0 1-1.84-.24z"/></svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58 0 4.85.07 1.17.05 1.81.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.81-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.81-.25-2.23-.41a3.71 3.71 0 0 1-1.38-.9 3.71 3.71 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s0-3.58.07-4.85c.05-1.17.25-1.81.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 0 0-2.13 1.39 5.85 5.85 0 0 0-1.38 2.12C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.8.73 1.48 1.39 2.13.65.65 1.32 1.07 2.12 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.85 5.85 0 0 0 2.13-1.39 5.85 5.85 0 0 0 1.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.85 5.85 0 0 0-1.39-2.12A5.85 5.85 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
          )}
        </span>
      </div>
      <div className="ig-photo" style={{background: palette}}>
        <div className="ig-blob" style={{background: post.platform === "tt" ? "rgba(0,0,0,.06)" : "rgba(255,255,255,.5)"}}/>
        {product && <img src={product.image} alt={post.tag}/>}
      </div>
      <div className="ig-actions">
        <span className="ig-heart">♥</span>
        <span>💬</span>
        <span>↗</span>
        <span className="ig-likes">{post.likes.toLocaleString()} likes</span>
      </div>
      <div className="ig-caption"><strong>{post.handle}</strong> {post.caption}</div>
      <div className="ig-tag">// {post.tag}</div>
    </article>
  );
};

/* =========================================================
   SHOP
   ========================================================= */
Pages.Shop = function Shop() {
  const { t, tt } = JMUI.useI18n();
  const [filter, setFilter] = useState("all");
  const [sort, setSort] = useState("featured");
  const filtered = useMemo(() => {
    let list = filter === "all" ? JM.PRODUCTS : JM.PRODUCTS.filter(p => p.category === filter);
    if (sort === "price-asc") list = [...list].sort((a,b)=>a.price - b.price);
    if (sort === "price-desc") list = [...list].sort((a,b)=>b.price - a.price);
    if (sort === "rating") list = [...list].sort((a,b)=>b.rating - a.rating);
    return list;
  }, [filter, sort]);
  return (
    <main>
      <section className="banner">
        <div className="container">
          <div className="eyebrow">{t("nav.shop")}</div>
          <h1>The full JOVI range, stocked in Malaysia.</h1>
          <p>Air Dry Clay · Plastilina modelling clay · Beechwood spatulas. Every SKU here ships from our Shah Alam warehouse via Shopee, Lazada or TikTok Shop.</p>
        </div>
      </section>
      <div className="container section-sm">
        <div className="filter-bar">
          <button className={"filter-pill" + (filter === "all" ? " active" : "")} onClick={()=>setFilter("all")}>All ({JM.PRODUCTS.length})</button>
          {JM.CATEGORIES.map(c => {
            const n = JM.PRODUCTS.filter(p => p.category === c.id).length;
            if (!n) return null;
            return <button key={c.id} className={"filter-pill" + (filter === c.id ? " active" : "")} onClick={()=>setFilter(c.id)}>{t(c.labelKey)} ({n})</button>;
          })}
          <div className="spacer"/>
          <select value={sort} onChange={e=>setSort(e.target.value)}>
            <option value="featured">Featured</option>
            <option value="price-asc">Price: low → high</option>
            <option value="price-desc">Price: high → low</option>
            <option value="rating">Top rated</option>
          </select>
        </div>
        <div className="prod-grid">
          {filtered.map(p => <JMUI.ProductCard key={p.id} product={p}/>)}
        </div>
      </div>
      <JMUI.Newsletter/>
    </main>
  );
};

/* =========================================================
   PDP — variant click can navigate to a sibling product (plastilina/spatulas)
   ========================================================= */
Pages.Product = function Product() {
  const { t, tt } = JMUI.useI18n();
  const { param, go } = JMUI.useRouter();
  const { add } = JMUI.useCart();
  const product = JM.PRODUCTS.find(p => p.slug === param) || JM.PRODUCTS[0];
  const ownVariantIds = new Set(product.variants.map(v => v.id));
  const [variantId, setVariantId] = useState(product.variants[0].id);
  const [weightId, setWeightId] = useState(product.weights ? product.weights[0].id : null);
  const [qty, setQty] = useState(1);
  useEffect(() => {
    setVariantId(product.variants[0].id);
    setWeightId(product.weights ? product.weights[0].id : null);
    setQty(1);
  }, [product.id]);

  const handleVariantClick = (v) => {
    /* If variant carries a slug pointing to a different product, navigate. */
    if (v.slug && v.slug !== product.slug) {
      go("product", v.slug);
      return;
    }
    setVariantId(v.id);
  };

  const variant = product.variants.find(v => v.id === variantId) || product.variants[0];
  const weight = product.weights ? product.weights.find(w => w.id === weightId) : null;
  const unitPrice = weight ? weight.price : product.price;
  const weightLbl = weight ? weight.label : product.weight;
  const cat = JM.CATEGORIES.find(c => c.id === product.category);
  const reviews = JM.REVIEWS[product.id] || [];
  const related = JM.PRODUCTS.filter(p => p.id !== product.id).slice(0, 4);
  return (
    <main className="pdp">
      <div className="container">
        <div className="crumbs">
          <a href="#/home" onClick={(e)=>{e.preventDefault();go("home");}}>Home</a> /{" "}
          <a href="#/shop" onClick={(e)=>{e.preventDefault();go("shop");}}>Shop</a> /{" "}
          <span style={{color:"var(--ink-900)"}}>{tt(product.name)}</span>
        </div>
        <div className="pdp-grid">
          <div className="pdp-gallery">
            <div className="pdp-mainimg"><img src={variant.image} alt={tt(product.name)}/></div>
            <div className="pdp-thumbs">
              {product.variants.map(v => (
                <div key={v.id} className={"pdp-thumb" + (v.id === variantId && (!v.slug || v.slug === product.slug) ? " active" : "")} onClick={()=>handleVariantClick(v)}>
                  <img src={v.image} alt=""/>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="pdp-eyebrow">{t(cat.labelKey)} · Made in Spain</div>
            <h1>{tt(product.name)}</h1>
            <p className="tagline">{tt(product.tagline)}</p>
            <div className="pdp-price">RM{unitPrice.toFixed(2)} <small>· {weightLbl}</small></div>
            <div className="pdp-meta">
              <span>★ {product.rating} ({product.reviews} reviews)</span>
              <span>Age {product.age}</span>
              {product.badges.map(b => <span key={b}>{b}</span>)}
            </div>
            {product.variants.length > 1 && (
              <div className="pdp-section">
                <div className="lbl">Variant — {variant.name}</div>
                <div className="pdp-variants">
                  {product.variants.map(v => {
                    const isActive = v.slug ? v.slug === product.slug : v.id === variantId;
                    return (
                      <div key={v.id} className={"pdp-variant" + (isActive ? " active" : "")} onClick={()=>handleVariantClick(v)}>
                        <span className="swatch" style={{background:v.swatch}}/>
                        <span>{v.name}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
            {product.weights && (
              <div className="pdp-section">
                <div className="lbl">Weight — {weight.label}</div>
                <div className="pdp-variants">
                  {product.weights.map(w => (
                    <div key={w.id} className={"pdp-variant" + (w.id === weightId ? " active" : "")} onClick={()=>setWeightId(w.id)}>
                      <span>{w.label}</span>
                      <span style={{opacity:.6, fontSize:12, marginLeft:6}}>RM{w.price.toFixed(2)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div className="pdp-section">
              <div className="lbl">Quantity</div>
              <div className="qty-stepper">
                <button onClick={()=>setQty(Math.max(1, qty-1))}>−</button>
                <input value={qty} onChange={e=>setQty(Math.max(1, parseInt(e.target.value||"1")))}/>
                <button onClick={()=>setQty(qty+1)}>+</button>
              </div>
            </div>
            <div className="pdp-actions">
              <button className="btn btn-primary btn-lg" onClick={()=>add(product, variantId, qty, weightId)}>{t("addtocart")} · RM{(unitPrice*qty).toFixed(2)}</button>
              <button className="btn btn-ghost btn-lg" onClick={()=>add(product, variantId, qty, weightId)}>♡ Save</button>
            </div>
            <div className="pdp-marketplaces">
              <span className="lbl">{t("buyon")}</span>
              <a href={JM.MARKETPLACES.shopee.url} target="_blank" rel="noreferrer"><img src={JM.MARKETPLACES.shopee.logo} alt=""/>Shopee</a>
              <a href={JM.MARKETPLACES.lazada.url} target="_blank" rel="noreferrer"><img src={JM.MARKETPLACES.lazada.logo} alt=""/>Lazada</a>
              <a href={JM.MARKETPLACES.tiktok.url} target="_blank" rel="noreferrer"><img src={JM.MARKETPLACES.tiktok.logo} alt=""/>TikTok</a>
            </div>
            <div className="pdp-highlights">
              <h4>What makes it different</h4>
              <ul>
                {tt(product.highlights).map((h, i) => <li key={i}>{h}</li>)}
              </ul>
            </div>
          </div>
        </div>

        {reviews.length > 0 && (
          <section className="section-sm">
            <div className="section-head"><h2>From customers</h2></div>
            <div className="reviews">
              {reviews.map((r, i) => (
                <div key={i} className="review">
                  <div className="review-head">
                    <div className="review-name">{r.name} <span>· {r.city} · {r.date}</span></div>
                    <div className="review-stars">{"★".repeat(r.rating)}</div>
                  </div>
                  <p>{tt(r.text)}</p>
                </div>
              ))}
            </div>
          </section>
        )}

        <section className="section-sm">
          <div className="section-head"><h2>You may also like</h2></div>
          <div className="prod-grid">
            {related.map(p => <JMUI.ProductCard key={p.id} product={p}/>)}
          </div>
        </section>
      </div>
    </main>
  );
};

/* =========================================================
   ABOUT — uses Home's design vocabulary:
   yellow hero-wrap · trust strip · section-head + grid · why-strip dark
   ========================================================= */
Pages.About = function About() {
  const { go } = JMUI.useRouter();
  return (
    <main>
      {/* Hero — same chrome as Home */}
      <section className="hero-wrap">
        <div className="container hero-grid hero">
          <div>
            <span className="hero-eyebrow">★ The JM Brands Story</span>
            <h1>Bringing the world's best art brands to Malaysian hands.</h1>
            <p>JM Brands Sdn Bhd is a Malaysian distribution company on a mission to put trusted, world-class creative brands into every classroom, art studio, and family home across the country.</p>
            <div className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={()=>go("shop")}>Shop the JOVI range →</button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go("contact")}>Wholesale enquiry</button>
            </div>
          </div>
          <div className="hero-art">
            <div className="pill" style={{background:"var(--ink-900)"}}>
              <img src="assets/jovi-logo.png" alt="JOVI" style={{padding:"22%", filter:"drop-shadow(0 12px 30px rgba(0,0,0,.35))"}}/>
            </div>
            <div className="floater f1"><img src="assets/plastilina-x10-dinosaur.png" alt=""/></div>
            <div className="floater f2"><img src="assets/air-dry-clay-terracotta.png" alt=""/></div>
            <div className="floater f3"><img src="assets/modelling-spatulas-3piece.png" alt=""/></div>
          </div>
        </div>
      </section>

      {/* Trust strip — same dark band */}
      <div className="trust">
        <div className="trust-item">🇪🇸 <span>JOVI · Barcelona since 1939 · 87 years</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🛡️ <span>CE & ASTM certified · EN71-compliant</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🎓 <span>Recommended by 90% of Spanish teachers</span></div>
        <span className="trust-dot"/>
        <div className="trust-item">🇲🇾 <span>Official JOVI distributor in Malaysia</span></div>
      </div>

      {/* Who we are */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>Who we are</h2>
              <div className="sub">A Malaysian distributor with a European standard.</div>
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48}}>
            <p style={{fontSize:17, lineHeight:1.7, color:"var(--fg-2)"}}>
              JM Brands is the official and exclusive Malaysian distributor of <strong style={{color:"var(--ink-900)"}}>JOVI</strong> — the iconic Spanish art materials brand founded in Barcelona in 1939, with 87 years of European craft heritage and recommended by 90% of Spanish teachers.
            </p>
            <p style={{fontSize:17, lineHeight:1.7, color:"var(--fg-2)"}}>
              We are a small, focused team that operates with one principle: every brand we represent must earn the right to sit in a Malaysian child's hand, on a teacher's desk, and on a retailer's shelf. We don't chase volume. We build brands that last.
            </p>
          </div>
        </div>
      </section>

      {/* Why we exist — yellow band, mirrors brand-strip */}
      <section className="brand-strip" style={{background:"var(--jovi-yellow)", color:"var(--ink-900)"}}>
        <div className="container">
          <h2 style={{color:"var(--ink-900)"}}>Why we exist</h2>
          <p style={{color:"var(--ink-800)", maxWidth:760}}>
            The Malaysian art materials market is dominated by two extremes: low-cost, low-safety imports, and premium brands sold at prices most families can't reach. The middle is missing — and that middle is where children's creativity actually lives.
          </p>
          <div className="brand-stats" style={{gridTemplateColumns:"1fr 1fr", gap:20, marginTop:36}}>
            <div className="stat" style={{background:"rgba(229,0,70,.08)", border:"2px solid var(--jovi-red)", color:"var(--ink-900)"}}>
              <span style={{fontSize:11, fontWeight:700, letterSpacing:"2.5px", textTransform:"uppercase", color:"var(--jovi-red)", display:"block", marginBottom:8}}>The Gap</span>
              <strong style={{fontSize:22, fontWeight:700, color:"var(--ink-900)", lineHeight:1.3, letterSpacing:"-.01em"}}>Trusted European-quality art materials, at fair prices, with proper retail and education support behind them.</strong>
            </div>
            <div className="stat" style={{background:"rgba(229,0,70,.08)", border:"2px solid var(--jovi-red)", color:"var(--ink-900)"}}>
              <span style={{fontSize:11, fontWeight:700, letterSpacing:"2.5px", textTransform:"uppercase", color:"var(--jovi-red)", display:"block", marginBottom:8}}>Our Role</span>
              <strong style={{fontSize:22, fontWeight:700, color:"var(--ink-900)", lineHeight:1.3, letterSpacing:"-.01em"}}>We close that gap by partnering with proven heritage brands and building them properly — retail, e-commerce, schools.</strong>
            </div>
          </div>
        </div>
      </section>

      {/* Brand portfolio — uses category-card grid pattern from Home */}
      <section className="section" style={{background:"var(--surface-base)"}}>
        <div className="container">
          <div className="section-head">
            <div>
              <h2>Our brand portfolio</h2>
              <div className="sub">Built around JOVI, growing with intent.</div>
            </div>
            <a className="right" href="#/shop" onClick={(e)=>{e.preventDefault(); go("shop");}}>Shop JOVI →</a>
          </div>
          <p style={{fontSize:16, lineHeight:1.65, color:"var(--fg-2)", maxWidth:760, marginBottom:32}}>
            Our portfolio strategy is deliberately narrow. We add brands only when they meet the same standards JOVI does: heritage, safety certification, educator endorsement, and a clear place in a Malaysian child's creative life.
          </p>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:18}}>
            <div style={{padding:"32px 28px", borderRadius:"var(--radius-lg)", border:"2px solid var(--jovi-red)", background:"var(--jovi-yellow)", display:"flex", gap:24, alignItems:"flex-start"}}>
              <div style={{flexShrink:0, width:84, height:84, borderRadius:"50%", background:"white", border:"3px solid var(--jovi-red)", display:"flex", alignItems:"center", justifyContent:"center", padding:10}}>
                <img src="assets/jovi-logo.png" alt="JOVI" style={{maxWidth:"100%", maxHeight:"100%"}}/>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:"2.5px", textTransform:"uppercase", color:"var(--jovi-red)", marginBottom:8}}>Flagship · Since 1939, Barcelona · 87 years</div>
                <h3 style={{fontSize:24, fontWeight:800, letterSpacing:"-.02em", color:"var(--ink-900)", marginBottom:8}}>JOVI</h3>
                <p style={{fontSize:14.5, lineHeight:1.55, color:"var(--ink-800)", margin:0}}>Air Dry Clay, Plastilina, Finger Paints, Tempera, Coloured Pencils, Markers, Face Paints. CE-certified, non-toxic, EU-made. Four product worlds — Play, Explore, Craft, Party — for ages 2 to 99.</p>
              </div>
            </div>
            <div style={{padding:"32px 28px", borderRadius:"var(--radius-lg)", border:"2px dashed var(--ink-300)", background:"var(--surface-warm)", display:"flex", gap:24, alignItems:"flex-start"}}>
              <div style={{flexShrink:0, width:84, height:84, borderRadius:"50%", background:"white", border:"2px dashed var(--ink-300)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:36, fontWeight:800, color:"var(--fg-3)"}}>+</div>
              <div>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:"2.5px", textTransform:"uppercase", color:"var(--fg-3)", marginBottom:8}}>Future partners · Under evaluation</div>
                <h3 style={{fontSize:24, fontWeight:800, letterSpacing:"-.02em", color:"var(--ink-900)", marginBottom:8}}>Selected European & Asian creative brands</h3>
                <p style={{fontSize:14.5, lineHeight:1.55, color:"var(--fg-2)", margin:0}}>We are actively evaluating complementary heritage brands across stationery, craft and educational categories — to be added only when they strengthen, never dilute, the JM Brands promise.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three commitments — same school-card pattern */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <h2>Three audiences. Three promises.</h2>
              <div className="sub">What you can expect from JM Brands.</div>
            </div>
          </div>
          <div className="school-grid">
            <div className="school-card" style={{borderColor:"var(--jovi-play-blue)"}}>
              <span className="num" style={{color:"var(--jovi-play-blue)"}}>01</span>
              <h4>To retailers</h4>
              <p>Exclusive distribution, MAP-protected pricing, full marketing support, and a buying partner who understands sell-through, not just sell-in.</p>
            </div>
            <div className="school-card">
              <span className="num">02</span>
              <h4>To schools</h4>
              <p>Curriculum-aligned art materials, educator pricing, and active support for Pendidikan Seni Visual programmes — from tadika to primary.</p>
            </div>
            <div className="school-card" style={{borderColor:"var(--jovi-party-orange)"}}>
              <span className="num" style={{color:"var(--jovi-party-orange)"}}>03</span>
              <h4>To families</h4>
              <p>Safe, certified, age-appropriate materials backed by JOVI's 87-year European heritage — at prices that respect a Malaysian family budget.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Why JM Brands — exact same dark credentials strip as Home */}
      <section className="why-strip">
        <div className="container">
          <div className="why-eyebrow">Why JM Brands</div>
          <div className="why-grid">
            <div className="why-cred"><div className="num">1939</div><div className="lbl">Year JOVI was founded in Barcelona, Spain</div></div>
            <div className="why-cred"><div className="num">80+</div><div className="lbl">Countries where JOVI is sold worldwide</div></div>
            <div className="why-cred"><div className="num">EU</div><div className="lbl">CE-certified, EN71-compliant, non-toxic</div></div>
            <div className="why-cred"><div className="num">100%</div><div className="lbl">Exclusive Malaysian distribution rights</div></div>
          </div>
        </div>
      </section>

      {/* Closing CTA — yellow band like Home Plastilina spotlight */}
      <section className="section" style={{background:"var(--jovi-yellow)", borderTop:"4px solid var(--jovi-red)", borderBottom:"4px solid var(--jovi-red)", textAlign:"center"}}>
        <div className="container-narrow">
          <h2 style={{fontSize:"clamp(36px, 5vw, 56px)", fontWeight:800, letterSpacing:"-.02em", lineHeight:1.05, color:"var(--ink-900)", marginBottom:14}}>Building a creative nation, one brushstroke at a time.</h2>
          <p style={{fontSize:17, color:"var(--ink-800)", marginBottom:28, maxWidth:560, marginLeft:"auto", marginRight:"auto"}}>JM Brands Sdn Bhd — Official & Exclusive Distributor of JOVI in Malaysia.</p>
          <div style={{display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap"}}>
            <button className="btn btn-primary btn-lg" onClick={()=>go("shop")}>Shop the range →</button>
            <button className="btn btn-ghost btn-lg" onClick={()=>go("contact")} style={{borderColor:"var(--jovi-red)"}}>Talk to us</button>
          </div>
        </div>
      </section>

      <JMUI.Newsletter/>
    </main>
  );
};

/* =========================================================
   SCHOOLS — bulk-pricing-on-request only, no published tiers
   ========================================================= */
Pages.Schools = function Schools() {
  const { go } = JMUI.useRouter();
  return (
    <main>
      <section className="school-hero">
        <div className="container" style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:48, alignItems:"center"}}>
          <div>
            <span className="hero-eyebrow">For schools & educators</span>
            <h1 style={{fontSize:"clamp(40px, 5.5vw, 64px)", fontWeight:800, letterSpacing:"-.02em", lineHeight:1.05, margin:"20px 0 16px"}}>Bulk pricing for the brand 90% of Spanish teachers already use.</h1>
            <p style={{fontSize:18, lineHeight:1.6, color:"var(--ink-800)", maxWidth:560}}>
              Tailored quotations based on your school size, product mix and delivery location. JOVI carries 87 years of European craft heritage and is recommended by 90% of Spanish teachers.
            </p>
            <div style={{display:"flex", gap:10, marginTop:24}}>
              <button className="btn btn-primary btn-lg" onClick={()=>go("contact")}>Request school pricing →</button>
              <a className="btn btn-ghost btn-lg" href="mailto:info@jmbrands.com.my">info@jmbrands.com.my</a>
            </div>
          </div>
          <div className="hero-art" style={{maxWidth:420}}>
            <div className="pill" style={{background:"var(--ink-900)"}}>
              <img src="assets/plastilina-x10-dinosaur.png" alt=""/>
            </div>
            <div className="floater f1"><img src="assets/air-dry-clay-white.png" alt=""/></div>
            <div className="floater f2"><img src="assets/modelling-spatulas-5piece.png" alt=""/></div>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="section-head"><div><h2>Why schools choose JOVI</h2><div className="sub">Specified to classroom-grade safety standards.</div></div></div>
          <div className="school-grid">
            <div className="school-card"><span className="num">01</span><h4>Vegetable-based</h4><p>Plastilina is gluten-free and made from a vegetable base — safer for children with allergies.</p></div>
            <div className="school-card"><span className="num">02</span><h4>CE & ASTM certified</h4><p>Every batch carries CE marking and ASTM D-4236 certification for art materials.</p></div>
            <div className="school-card"><span className="num">03</span><h4>Built to last a term</h4><p>Reusable. Storable. Doesn't dry out between weekly art lessons.</p></div>
          </div>
          <div style={{marginTop:64, padding:"48px 36px", background:"var(--jovi-yellow)", borderRadius:"var(--radius-lg)", border:"2px solid var(--jovi-red)"}}>
            <div style={{display:"inline-block", fontSize:11, fontWeight:700, letterSpacing:"2.5px", textTransform:"uppercase", color:"var(--jovi-red)", marginBottom:12}}>Bulk pricing on request</div>
            <h2 style={{fontSize:32, letterSpacing:"-.02em", marginBottom:12, color:"var(--ink-900)"}}>Tell us about your school — we'll quote.</h2>
            <p style={{fontSize:16, color:"var(--ink-900)", maxWidth:620, marginBottom:8, lineHeight:1.55}}>
              Every school's needs are different — class size, year level, art curriculum, delivery location. Rather than publish fixed tiers, we send a written quotation tailored to your enrolment and order, usually within one working day.
            </p>
            <p style={{fontSize:14, color:"var(--ink-800)", maxWidth:620, marginBottom:20, fontStyle:"italic"}}>
              Free delivery within Peninsular Malaysia for orders above RM80.
            </p>
            <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <button className="btn btn-primary btn-lg" onClick={()=>go("contact")}>Request a quote →</button>
              <a className="btn btn-ghost btn-lg" href="mailto:info@jmbrands.com.my" style={{borderColor:"var(--jovi-red)"}}>info@jmbrands.com.my</a>
              <a className="btn btn-ghost btn-lg" href="https://wa.me/60136067062" target="_blank" rel="noreferrer" style={{borderColor:"var(--jovi-red)"}}>WhatsApp us</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

/* =========================================================
   #JoviCreates
   ========================================================= */
Pages.Creates = function Creates() {
  const { t } = JMUI.useI18n();
  return (
    <main>
      <section className="banner">
        <div className="container">
          <div className="eyebrow">#JoviCreates community</div>
          <h1>Real makers. Real Malaysia.</h1>
          <p>Tag <strong style={{color:"var(--jovi-yellow)"}}>#JoviCreates</strong> on Instagram or TikTok and you'll show up here. Top picks each month win free clay.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="ig-grid">
            {JM.JOVICREATES.map((u, i) => <JMUI.IGCard key={i} post={u}/>)}
          </div>
        </div>
      </section>
    </main>
  );
};

/* =========================================================
   BLOG — list + article detail (param = id)
   ========================================================= */
Pages.Blog = function Blog() {
  const { tt, t } = JMUI.useI18n();
  const { param, go } = JMUI.useRouter();
  const article = param ? JM.BLOG.find(b => b.id === param) : null;
  if (article) {
    return (
      <main>
        <section className="banner" style={{padding:"40px 0"}}>
          <div className="container">
            <a href="#/blog" onClick={(e)=>{e.preventDefault(); go("blog");}} style={{fontSize:13, color:"rgba(255,220,0,.7)"}}>← {t("nav.blog")}</a>
            <div className="eyebrow" style={{marginTop:24}}>{article.tag} · {article.date} · {article.read} min read</div>
            <h1 style={{fontSize:"clamp(36px, 5vw, 60px)", marginTop:14, lineHeight:1.05}}>{tt(article.title)}</h1>
          </div>
        </section>
        <section className="section">
          <div className="container-narrow">
            <div style={{aspectRatio:"16/9", background:"var(--jovi-yellow)", borderRadius:"var(--radius-lg)", display:"flex", alignItems:"center", justifyContent:"center", marginBottom:32, overflow:"hidden"}}>
              <img src={article.cover} alt="" style={{maxWidth:"60%", maxHeight:"80%", objectFit:"contain"}}/>
            </div>
            <div className="article-body">
              {tt(article.body).map((b, i) => b.kind === "h"
                ? <h3 key={i} style={{fontSize:24, fontWeight:800, marginTop:32, marginBottom:12, color:"var(--ink-900)"}}>{b.t}</h3>
                : <p key={i} style={{fontSize:17, lineHeight:1.7, color:"var(--fg-2)", marginBottom:18}}>{b.t}</p>
              )}
            </div>
            <div style={{marginTop:48, padding:"32px 28px", background:"var(--surface-warm)", borderRadius:"var(--radius-lg)", textAlign:"center"}}>
              <p style={{margin:0, color:"var(--fg-3)", fontSize:13, letterSpacing:".06em", textTransform:"uppercase", fontWeight:700, marginBottom:12}}>Continue reading</p>
              <div style={{display:"flex", gap:12, justifyContent:"center", flexWrap:"wrap"}}>
                {JM.BLOG.filter(b => b.id !== article.id).slice(0,3).map(b => (
                  <button key={b.id} className="btn btn-ghost btn-sm" onClick={()=>go("blog", b.id)}>{tt(b.title)}</button>
                ))}
              </div>
            </div>
          </div>
        </section>
        <JMUI.Newsletter/>
      </main>
    );
  }
  return (
    <main>
      <section className="banner">
        <div className="container">
          <div className="eyebrow">Journal</div>
          <h1>Tutorials, brand stories, classroom tips.</h1>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="blog-grid">
            {JM.BLOG.map(b => (
              <article key={b.id} className="blog-card" onClick={()=>go("blog", b.id)}>
                <div className="meta"><span className="tag">{b.tag}</span><span>{b.date}</span><span>{b.read} min read</span></div>
                <h3>{tt(b.title)}</h3>
                <p>{tt(b.excerpt)}</p>
                <div style={{marginTop:18, color:"var(--jovi-red)", fontWeight:700, fontSize:14}}>Read article →</div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <JMUI.Newsletter/>
    </main>
  );
};

/* =========================================================
   FAQ
   ========================================================= */
Pages.Faq = function Faq() {
  const { tt } = JMUI.useI18n();
  return (
    <main>
      <section className="banner">
        <div className="container">
          <div className="eyebrow">Help & FAQ</div>
          <h1>Questions, answered.</h1>
        </div>
      </section>
      <section className="section">
        <div className="container-narrow">
          <div className="faq">
            {JM.FAQ.map((f, i) => (
              <details key={i} className="faq-item" open={i===0}>
                <summary>{tt(f.q)}</summary>
                <p>{tt(f.a)}</p>
              </details>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

/* =========================================================
   CONTACT — single email, single WhatsApp, reg no.
   Form posts to Google Apps Script Web App which forwards to info@jmbrands.com.my.
   Endpoint URL is set in JM.CONTACT_ENDPOINT (data.js).
   ========================================================= */
Pages.Contact = function Contact() {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const submit = async (e) => {
    e.preventDefault();
    setError(""); setSending(true);
    const f = e.target;
    const payload = {
      name: f.name_.value,
      email: f.email.value,
      role: f.role.value,
      message: f.message.value,
      page: window.location.href,
      ts: new Date().toISOString(),
    };
    try {
      const url = JM.CONTACT_ENDPOINT;
      if (!url || url.indexOf("PASTE_") === 0) {
        /* Endpoint not configured yet — fall back to mailto so nothing is lost. */
        window.location.href = `mailto:info@jmbrands.com.my?subject=${encodeURIComponent("Website enquiry — " + payload.name)}&body=${encodeURIComponent(`From: ${payload.name} <${payload.email}>\nRole: ${payload.role}\n\n${payload.message}`)}`;
        setSent(true); setSending(false); return;
      }
      /* text/plain avoids a CORS preflight, which Apps Script Web Apps reject. */
      await fetch(url, { method: "POST", mode: "no-cors", headers: { "Content-Type": "text/plain;charset=utf-8" }, body: JSON.stringify(payload) });
      setSent(true);
    } catch (err) {
      setError("Could not send right now. Please email info@jmbrands.com.my directly.");
    }
    setSending(false);
  };
  return (
    <main>
      <section className="banner">
        <div className="container">
          <div className="eyebrow">Contact</div>
          <h1>Wholesale, schools, or just hi.</h1>
          <p>We reply within one working day. For urgent orders, please <a href="https://wa.me/60136067062" target="_blank" rel="noreferrer" style={{color:"var(--jovi-yellow)", textDecoration:"underline"}}>WhatsApp +60 13-606 7062</a>.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div>
              {sent ? (
                <div style={{padding:32, background:"var(--jovi-yellow)", borderRadius:"var(--radius-lg)", border:"2px solid var(--jovi-red)"}}>
                  <h3 style={{color:"var(--jovi-red)", fontSize:24, fontWeight:800}}>Got it — thank you.</h3>
                  <p style={{marginTop:8, color:"var(--ink-800)"}}>We'll reply by the next working day.</p>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="field"><label>Name</label><input name="name_" required placeholder="Your name"/></div>
                  <div className="field"><label>Email</label><input name="email" type="email" required placeholder="you@email.com"/></div>
                  <div className="field"><label>I'm a…</label>
                    <select name="role" defaultValue="Parent / individual buyer">
                      <option>Parent / individual buyer</option>
                      <option>Teacher / school</option>
                      <option>Reseller / distributor</option>
                      <option>Press / media</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="field"><label>Message</label><textarea name="message" placeholder="Tell us what you need…" required/></div>
                  {error && <div style={{padding:"10px 14px", background:"#FFE5EC", color:"var(--jovi-red)", borderRadius:8, marginBottom:14, fontSize:14}}>{error}</div>}
                  <button className="btn btn-primary btn-lg" type="submit" disabled={sending}>{sending ? "Sending…" : "Send enquiry →"}</button>
                </form>
              )}
            </div>
            <div>
              <div className="contact-info">
                <h3>JM Brands Sdn Bhd</h3>
                <div className="row"><div className="lbl">Reg. No.</div><div className="val">202501022358 (162377-D)</div></div>
                <div className="row"><div className="lbl">Office</div><div className="val">Shah Alam, Selangor</div></div>
                <div className="row"><div className="lbl">Email</div><div className="val"><a href="mailto:info@jmbrands.com.my">info@jmbrands.com.my</a></div></div>
                <div className="row contact-wa-row"><div className="lbl">WhatsApp</div><div className="val"><a href="https://wa.me/60136067062" target="_blank" rel="noreferrer">+60 13-606 7062</a></div></div>
                <div className="row"><div className="lbl">Hours</div><div className="val">Mon–Fri · 9am–6pm MYT</div></div>
              </div>
              <div style={{marginTop:16, padding:24, background:"var(--jovi-yellow)", borderRadius:"var(--radius-lg)", border:"2px solid var(--jovi-red)"}}>
                <h4 style={{color:"var(--jovi-red)", fontSize:16, fontWeight:800, letterSpacing:".04em", textTransform:"uppercase"}}>Or, shop us live</h4>
                <p style={{margin:"10px 0 14px", color:"var(--ink-800)"}}>Easiest checkout — direct on the marketplaces.</p>
                <div className="marketplace-row">
                  <a href={JM.MARKETPLACES.shopee.url} target="_blank" rel="noreferrer" style={{background:"white"}}><img src={JM.MARKETPLACES.shopee.logo} alt="Shopee"/></a>
                  <a href={JM.MARKETPLACES.lazada.url} target="_blank" rel="noreferrer" style={{background:"white"}}><img src={JM.MARKETPLACES.lazada.logo} alt="Lazada"/></a>
                  <a href={JM.MARKETPLACES.tiktok.url} target="_blank" rel="noreferrer" style={{background:"white"}}><img src={JM.MARKETPLACES.tiktok.logo} alt="TikTok"/></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Pages = Pages;