/* store-parts.jsx — SectionHead, Nav (cart + mobile menu), Hero (+ parallax
   collage & floating labels), TrustBar, Marquee. Exported to window. */
const { Button: PBtn, Tag: PTag } = window.FluvexDesignsDesignSystem_072666;
const { Reveal: PReveal, CountUp: PCountUp, useParallax: pUseParallax, useTilt: pUseTilt, StoreIcon: PIcon, Magnetic: PMag } = window;

const NAV_LINKS = [["Shop", "#shop"], ["Best Sellers", "#best"], ["Categories", "#categories"], ["Bundles", "#bundles"], ["Reviews", "#reviews"], ["FAQ", "#faq"]];

/* ---- shared section header ---- */
function SectionHead({ tag, title, sub, align = "center" }) {
  return (
    <PReveal y={20} style={{ textAlign: align, maxWidth: align === "center" ? 720 : "none", margin: align === "center" ? "0 auto 52px" : "0 0 44px" }}>
      {tag && <div style={{ marginBottom: 16 }}><PTag>{tag}</PTag></div>}
      <h2 style={{ fontWeight: 300, fontSize: "var(--display-xl-size)", lineHeight: 1.08, letterSpacing: "var(--display-xl-ls)", margin: "0 0 14px", color: "var(--ink)" }}>{title}</h2>
      {sub && <p style={{ fontSize: "var(--body-lg-size)", lineHeight: 1.55, color: "var(--ink-mute)", margin: 0, maxWidth: 540, marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>{sub}</p>}
    </PReveal>
  );
}

/* ---- Nav ---- */
function Nav({ cartCount, onOpenCart }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [bump, setBump] = React.useState(false);
  const prev = React.useRef(cartCount);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => {
    if (cartCount !== prev.current) { setBump(true); const t = setTimeout(() => setBump(false), 450); prev.current = cartCount; return () => clearTimeout(t); }
  }, [cartCount]);
  return (
    <header className="fx-nav-in" style={{ position: "sticky", top: 0, zIndex: 100, background: scrolled ? "rgba(255,255,255,0.82)" : "rgba(255,255,255,0.35)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", borderBottom: "1px solid " + (scrolled ? "var(--hairline)" : "transparent"), transition: "background 220ms ease, border-color 220ms ease" }}>
      <div className="fx-container" style={{ display: "flex", alignItems: "center", gap: 24, height: 70 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 9, textDecoration: "none" }}>
          <span style={{ width: 28, height: 28, borderRadius: 9, background: "var(--primary)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 16, fontWeight: 400, boxShadow: "0 4px 12px rgba(83,58,253,0.35)" }}>F</span>
          <span style={{ fontSize: 20, fontWeight: 300, letterSpacing: "-0.5px", color: "var(--ink)" }}>FluvexDesigns</span>
        </a>
        <nav className="fx-nav-links" style={{ display: "flex", gap: 26, flex: 1, justifyContent: "center" }}>
          {NAV_LINKS.map(([l, h]) => <a key={l} href={h} className="fx-navlink">{l}</a>)}
        </nav>
        <div className="fx-nav-desktop-cta" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <button onClick={onOpenCart} aria-label="Cart" className={"fx-cart" + (bump ? " fx-cart-bump" : "")} style={{ position: "relative", width: 42, height: 42, borderRadius: 9999, border: "1px solid var(--hairline)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <PIcon name="cart" size={19} stroke="var(--ink)" sw={1.6} />
            {cartCount > 0 && <span className="tnum" style={{ position: "absolute", top: -6, right: -6, minWidth: 20, height: 20, padding: "0 5px", borderRadius: 9999, background: "var(--ruby)", color: "#fff", fontSize: 11, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 2px 6px rgba(234,34,97,0.4)" }}>{cartCount}</span>}
          </button>
          <a href="#shop" style={{ textDecoration: "none" }}><PBtn variant="secondary" size="sm" className="fx-btn-lift">View Products</PBtn></a>
          <PMag><a href="#best" style={{ textDecoration: "none" }}><PBtn variant="primary" size="sm" className="fx-btn-lift fx-shine">Shop Now →</PBtn></a></PMag>
        </div>
        <div className="fx-menu-btn" style={{ display: "none", marginLeft: "auto", gap: 10, alignItems: "center" }}>
          <button onClick={onOpenCart} aria-label="Cart" className={"fx-cart" + (bump ? " fx-cart-bump" : "")} style={{ position: "relative", width: 42, height: 42, borderRadius: 9999, border: "1px solid var(--hairline)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <PIcon name="cart" size={19} stroke="var(--ink)" sw={1.6} />
            {cartCount > 0 && <span className="tnum" style={{ position: "absolute", top: -6, right: -6, minWidth: 20, height: 20, padding: "0 5px", borderRadius: 9999, background: "var(--ruby)", color: "#fff", fontSize: 11, display: "flex", alignItems: "center", justifyContent: "center" }}>{cartCount}</span>}
          </button>
          <button onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{ width: 42, height: 42, borderRadius: 12, border: "1px solid var(--hairline)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round">{open ? <path d="M6 6l12 12M18 6L6 18" /> : <path d="M4 7h16M4 12h16M4 17h16" />}</svg>
          </button>
        </div>
      </div>
      <div className="fx-mobile-menu" style={{ maxHeight: open ? 420 : 0, overflow: "hidden", transition: "max-height 380ms cubic-bezier(.21,.68,.24,1)", borderTop: open ? "1px solid var(--hairline)" : "none" }}>
        <div className="fx-container" style={{ padding: open ? "16px 24px 22px" : "0 24px", display: "flex", flexDirection: "column", gap: 2 }}>
          {NAV_LINKS.map(([l, h]) => <a key={l} href={h} onClick={() => setOpen(false)} className="fx-navlink" style={{ fontSize: 16, padding: "11px 0", borderBottom: "1px solid var(--hairline)" }}>{l}</a>)}
          <a href="#best" onClick={() => setOpen(false)} style={{ textDecoration: "none", marginTop: 14 }}><PBtn variant="primary" className="fx-shine" style={{ width: "100%" }}>Shop Now →</PBtn></a>
        </div>
      </div>
    </header>
  );
}

/* ---- Hero ---- */
function FloatLabel({ text, style }) {
  return (
    <div className="fx-float fx-label" style={{ position: "absolute", zIndex: 8, ...style }}>
      <div className="fx-glass fx-label" style={{ padding: "7px 13px", borderRadius: 9999, fontSize: 12, fontWeight: 400, color: "var(--ink)", display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 9999, background: "var(--primary)" }} />{text}
      </div>
    </div>
  );
}

function HeroCollage() {
  const p1 = pUseParallax(22), p2 = pUseParallax(34), p3 = pUseParallax(16), p4 = pUseParallax(40), pl = pUseParallax(46);
  const Card = ({ pRef, pos, tilt, dur, delay, mock }) => {
    const Mock = window.MOCKS[mock];
    return (
      <div ref={pRef} style={{ position: "absolute", ...pos }}>
        <div className="fx-float" style={{ animationDuration: dur, animationDelay: delay }}>
          <div style={{ transform: `rotate(${tilt}deg)`, borderRadius: 14, overflow: "hidden", boxShadow: "0 24px 60px rgba(28,30,84,0.16)", background: "linear-gradient(155deg,#f7f5ff,#efe9ff)", position: "relative", aspectRatio: "1 / 1" }}><Mock /></div>
        </div>
      </div>
    );
  };
  return (
    <PReveal y={40} dur={900} className="fx-hero-collage" style={{ position: "relative", minHeight: 540 }}>
      <Card pRef={p1} pos={{ top: 10, right: 4, width: "46%", zIndex: 5 }} tilt={3} dur="8s" delay="0s" mock="MkPlanner" />
      <Card pRef={p2} pos={{ top: 150, left: 0, width: "42%", zIndex: 6 }} tilt={-5} dur="9s" delay="-2s" mock="MkMediaKit" />
      <Card pRef={p3} pos={{ bottom: 0, right: 40, width: "40%", zIndex: 7 }} tilt={-2} dur="7s" delay="-1s" mock="MkDashboard" />
      <Card pRef={p4} pos={{ top: 300, left: 60, width: "34%", zIndex: 8 }} tilt={4} dur="8.5s" delay="-3s" mock="MkInvoice" />
      <div ref={pl} style={{ position: "relative", zIndex: 20 }}>
        <FloatLabel text="Instant Download" style={{ top: 30, left: -6 }} />
        <FloatLabel text="Best Seller" style={{ top: 120, right: 10 }} />
        <FloatLabel text="Fully Editable" style={{ bottom: 120, left: -14 }} />
        <FloatLabel text="Interactive HTML" style={{ bottom: 24, right: 8 }} />
      </div>
    </PReveal>
  );
}

function Hero({ cartCount, onOpenCart }) {
  const avatars = ["#c9b6f5,#533afd", "#f7b986,#ea2261", "#b9b9f9,#665efd", "#9ad1c9,#533afd", "#f96bee,#533afd"];
  return (
    <div id="top" style={{ position: "relative" }}>
      <div className="fx-hero-mesh" aria-hidden="true" style={{ position: "absolute", inset: 0, height: 900 }} />
      <div style={{ position: "relative" }}>
        <Nav cartCount={cartCount} onOpenCart={onOpenCart} />
        <div className="fx-container" style={{ paddingTop: 64, paddingBottom: 48 }}>
          <div className="fx-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.02fr 0.98fr", gap: 48, alignItems: "center" }}>
            <div>
              <PReveal y={16} delay={60}><div style={{ marginBottom: 22 }}><PTag>Premium Digital Products</PTag></div></PReveal>
              <PReveal y={24} delay={140}><h1 style={{ fontWeight: 300, fontSize: "clamp(36px, 4.9vw, 58px)", lineHeight: 1.04, letterSpacing: "-1.6px", color: "var(--ink)", margin: "0 0 22px", textWrap: "balance" }}>
                Digital products that make your business look <span className="fx-gradtext">polished, organized, and ready to grow.</span>
              </h1></PReveal>
              <PReveal y={20} delay={240}><p style={{ fontSize: "var(--body-lg-size)", lineHeight: 1.58, color: "var(--ink-secondary)", maxWidth: 520, margin: "0 0 30px" }}>
                Shop premium interactive HTML tools, dashboards, planners, generators, and digital systems made for creators, students, freelancers, entrepreneurs, and professionals who want powerful products they can use directly in their browser.
              </p></PReveal>
              <PReveal y={18} delay={340}><div className="fx-hero-actions" style={{ display: "flex", gap: 14, marginBottom: 26 }}>
                <PMag><a href="#best" style={{ textDecoration: "none" }}><PBtn variant="primary" className="fx-btn-lift fx-shine">Shop Best Sellers →</PBtn></a></PMag>
                <PMag><a href="#shop" style={{ textDecoration: "none" }}><PBtn variant="secondary" className="fx-btn-lift">View All Products</PBtn></a></PMag>
              </div></PReveal>
              <PReveal y={14} delay={440}><div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                <div style={{ display: "flex" }}>
                  {avatars.map((g, i) => <span key={i} style={{ width: 30, height: 30, borderRadius: 9999, background: `linear-gradient(135deg,${g})`, border: "2px solid #fff", marginLeft: i ? -9 : 0, animation: `fxPop 500ms cubic-bezier(.21,.68,.24,1) both`, animationDelay: `${500 + i * 90}ms` }} />)}
                </div>
                <div>
                  <span style={{ color: "var(--primary)", fontSize: 14 }}>★★★★★</span>
                  <span className="tnum" style={{ fontSize: "var(--caption-size)", color: "var(--ink-secondary)", marginLeft: 6 }}><PCountUp to={15000} suffix="+" /> happy customers worldwide</span>
                </div>
              </div></PReveal>
            </div>
            <HeroCollage />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Trust bar ---- */
function TrustBar() {
  return (
    <section style={{ background: "var(--canvas)", padding: "40px 0 var(--section-pad-marketing)" }}>
      <div className="fx-container">
        <div className="fx-trust-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 18 }}>
          {window.TRUST.map((t, i) => (
            <PReveal key={t.title} y={22} delay={i * 80} style={{ height: "100%" }}>
              <div className="fx-trust fx-card-hover" style={{ height: "100%", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: "22px 18px", background: "#fff" }}>
                <span className="fx-trust-icon" style={{ display: "inline-flex", width: 42, height: 42, borderRadius: 12, background: "var(--primary-bg-subdued-hover)", alignItems: "center", justifyContent: "center", marginBottom: 14 }}><PIcon name={t.icon} size={22} /></span>
                <div style={{ fontSize: "var(--heading-sm-size)", fontWeight: 400, color: "var(--ink)", marginBottom: 5, letterSpacing: "-0.2px" }}>{t.title}</div>
                <div style={{ fontSize: "var(--caption-size)", color: "var(--ink-mute)", lineHeight: 1.5 }}>{t.text}</div>
              </div>
            </PReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Marquee ---- */
function Marquee() {
  const items = window.MARQUEE;
  const row = [...items, ...items];
  return (
    <section style={{ background: "var(--brand-dark-900)", padding: "22px 0", overflow: "hidden" }}>
      <div className="fx-marquee-track">
        {row.map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 14, padding: "0 28px", fontSize: 20, fontWeight: 300, letterSpacing: "-0.3px", color: "rgba(255,255,255,0.9)", whiteSpace: "nowrap" }}>
            <span style={{ width: 7, height: 7, borderRadius: 9999, background: "var(--primary-soft)" }} />{t}
          </span>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, Nav, Hero, TrustBar, Marquee });
/* cache-bust r2 */
