/* store-parts2.jsx — Why, How It Works, Reviews, FAQ, Final CTA, Footer.
   Exported to window. */
const { Button: P2Btn, Tag: P2Tag } = window.FluvexDesignsDesignSystem_072666;
const { Reveal: P2Reveal, StoreIcon: P2Icon, _fxReduce: p2Reduce, Magnetic: P2Mag } = window;

/* stars that fill left-to-right when scrolled into view */
function AnimStars() {
  const ref = React.useRef(null);
  const [go, setGo] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    if (p2Reduce()) { setGo(true); return; }
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { setGo(true); io.unobserve(el); } }), { threshold: 0.6 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <span ref={ref} style={{ display: "inline-flex", gap: 3 }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <span key={i} style={{ color: "var(--primary)", fontSize: 15, opacity: go ? 1 : 0, transform: go ? "scale(1)" : "scale(0.5)", transition: `opacity 260ms ease ${i * 90}ms, transform 260ms cubic-bezier(.21,.68,.24,1) ${i * 90}ms` }}>★</span>
      ))}
    </span>
  );
}

/* ---- Why customers love ---- */
function Why() {
  return (
    <section style={{ background: "var(--canvas)", padding: "var(--section-pad-marketing) 0" }}>
      <div className="fx-container">
        <SectionHead tag="Why FluvexDesigns" title="Made to save time, look professional, and help you move faster." />
        <div className="fx-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
          {window.BENEFITS.map(([ic, label], i) => (
            <P2Reveal key={label} y={22} delay={(i % 4) * 70} style={{ height: "100%" }}>
              <div className="fx-benefit fx-card-hover" style={{ height: "100%", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: 24, background: "#fff" }}>
                <span className="fx-benefit-icon" style={{ display: "inline-flex", width: 44, height: 44, borderRadius: 12, background: "var(--primary-bg-subdued-hover)", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><P2Icon name={ic} size={22} /></span>
                <div style={{ fontSize: "var(--body-lg-size)", fontWeight: 400, color: "var(--ink)", lineHeight: 1.35, letterSpacing: "-0.2px" }}>{label}</div>
              </div>
            </P2Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- How it works ---- */
function HowItWorks() {
  const ref = React.useRef(null);
  const [go, setGo] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    if (p2Reduce()) { setGo(true); return; }
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { setGo(true); io.unobserve(el); } }), { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <section id="how" style={{ background: "var(--canvas-soft)", padding: "var(--section-pad-marketing) 0" }}>
      <div className="fx-container">
        <SectionHead tag="How it works" title="From click to done in four steps." />
        <div ref={ref} style={{ position: "relative" }}>
          <div className="fx-timeline" style={{ position: "absolute", top: 26, left: "12%", right: "12%", height: 2, background: "var(--hairline)", overflow: "hidden" }}>
            <div style={{ height: "100%", background: "var(--primary)", transformOrigin: "left", transform: go ? "scaleX(1)" : "scaleX(0)", transition: "transform 1400ms cubic-bezier(.5,.1,.2,1) 200ms" }} />
          </div>
          <div className="fx-grid-4 fx-how-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24, position: "relative" }}>
            {window.STEPS.map(([t, d], i) => (
              <div key={t} style={{ textAlign: "center" }}>
                <div className="tnum" style={{ width: 54, height: 54, borderRadius: 9999, margin: "0 auto 18px", background: "var(--primary)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, fontWeight: 300, boxShadow: "0 8px 20px rgba(83,58,253,0.3)", opacity: go ? 1 : 0, transform: go ? "scale(1)" : "scale(0.5)", transition: `opacity 400ms ease ${300 + i * 220}ms, transform 400ms cubic-bezier(.21,.68,.24,1) ${300 + i * 220}ms` }}>{i + 1}</div>
                <h3 style={{ fontWeight: 400, fontSize: "var(--heading-sm-size)", letterSpacing: "-0.2px", margin: "0 0 8px", color: "var(--ink)" }}>{t}</h3>
                <p style={{ fontSize: "var(--body-md-size)", color: "var(--ink-secondary)", lineHeight: 1.55, margin: "0 auto", maxWidth: 220 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Reviews ---- */
function Reviews() {
  return (
    <section id="reviews" style={{ background: "var(--canvas)", padding: "var(--section-pad-marketing) 0" }}>
      <div className="fx-container">
        <SectionHead tag="Reviews" title="Loved by thousands of customers" />
        <div className="fx-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {window.REVIEWS.map((r, i) => (
            <P2Reveal key={r.name} y={28} delay={(i % 3) * 100} style={{ height: "100%" }}>
              <div className="fx-review fx-card-hover" style={{ height: "100%", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", padding: 28, background: "#fff", display: "flex", flexDirection: "column" }}>
                <div style={{ marginBottom: 16 }}><AnimStars /></div>
                <p style={{ fontSize: "var(--heading-sm-size)", fontWeight: 300, lineHeight: 1.55, letterSpacing: "-0.2px", color: "var(--ink)", margin: "0 0 22px", flex: 1 }}>“{r.text}”</p>
                <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 9999, background: `linear-gradient(135deg,${r.grad})` }} />
                  <div><div style={{ fontSize: "var(--body-md-size)", fontWeight: 400, color: "var(--ink)" }}>{r.name}</div><div style={{ fontSize: "var(--caption-size)", color: "var(--ink-mute)" }}>{r.role}</div></div>
                </div>
              </div>
            </P2Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: "var(--canvas-soft)", padding: "var(--section-pad-marketing) 0" }}>
      <div className="fx-container" style={{ maxWidth: 820 }}>
        <SectionHead tag="FAQ" title="Questions, answered." />
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {window.FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <P2Reveal key={q} y={18} delay={i * 60}>
                <div className="fx-faq fx-card-hover" style={{ background: "#fff", border: "1px solid var(--hairline)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
                  <div onClick={() => setOpen(isOpen ? -1 : i)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, padding: "20px 24px", cursor: "pointer" }}>
                    <span style={{ fontSize: "var(--heading-sm-size)", color: "var(--ink)", fontWeight: 400 }}>{q}</span>
                    <span style={{ flexShrink: 0, transform: isOpen ? "rotate(45deg)" : "rotate(0)", transition: "transform 240ms cubic-bezier(.21,.68,.24,1)" }}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
                    </span>
                  </div>
                  <div style={{ maxHeight: isOpen ? 200 : 0, overflow: "hidden", transition: "max-height 320ms cubic-bezier(.21,.68,.24,1)" }}>
                    <p style={{ margin: 0, padding: "0 24px 22px", fontSize: "var(--body-lg-size)", color: "var(--ink-secondary)", lineHeight: 1.55 }}>{a}</p>
                  </div>
                </div>
              </P2Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---- Final CTA ---- */
function FinalCTA() {
  return (
    <section style={{ background: "var(--canvas)", padding: "var(--section-pad-marketing) 0" }}>
      <div className="fx-container">
        <P2Reveal y={30}>
          <div style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)", background: "var(--brand-dark-900)", padding: "80px 48px", textAlign: "center" }}>
            <div aria-hidden="true" className="fx-drift" style={{ position: "absolute", inset: 0, opacity: 0.5, filter: "blur(80px)", backgroundImage: "radial-gradient(40% 90% at 18% 20%, #533afd 0%, rgba(83,58,253,0) 70%), radial-gradient(40% 90% at 85% 80%, #ea2261 0%, rgba(234,34,97,0) 70%), radial-gradient(40% 90% at 70% 12%, #f96bee 0%, rgba(249,107,238,0) 70%)" }} />
            <div className="fx-cta-art" aria-hidden="true">
              {/* Premium mini product mockups — each has a bespoke inner UI
                  hint (calendar grid, invoice lines, budget bars, etc.) so
                  they read as real product miniatures at 128px wide. */}
              {(() => {
                const bar = (w, c, o = 1) => <div style={{ width: w, height: 3, borderRadius: 9999, background: c, opacity: o }} />;
                const cards = [
                  {
                    key: "planner", top: "3%", left: "1%", rot: -4, d: "0s",
                    from: "#c9b6f5", to: "#533afd", icon: "planner", name: "Teacher Planner", tag: "Weekly Plan",
                    body: (
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 2 }}>
                        {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14].map(i => (
                          <div key={i} style={{ height: 8, borderRadius: 2, background: i % 4 === 1 ? "#533afd" : (i % 3 === 0 ? "#c9b6f5" : "#eef0f8") }} />
                        ))}
                      </div>
                    ),
                  },
                  {
                    key: "invoice", top: "49%", left: "1%", rot: 3, d: "-3s",
                    from: "#8f79d5", to: "#533afd", icon: "briefcase", name: "Invoice Studio", tag: "#INV-024",
                    body: (
                      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>{bar(38, "#e6e8f2")}{bar(20, "#e6e8f2")}</div>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>{bar(46, "#e6e8f2")}{bar(20, "#e6e8f2")}</div>
                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 2, paddingTop: 3, borderTop: "1px solid #eef0f8" }}>
                          <div style={{ fontSize: 6, fontWeight: 400, color: "#1c1e54", letterSpacing: "0.4px", textTransform: "uppercase" }}>Total</div>
                          <div className="tnum" style={{ fontSize: 7.5, fontWeight: 500, color: "#533afd" }}>$1,240.00</div>
                        </div>
                      </div>
                    ),
                  },
                  {
                    key: "calendar", top: "26%", right: "1%", rot: -3, d: "-1s",
                    from: "#b9b9f9", to: "#665efd", icon: "grid", name: "Content Calendar", tag: "This week",
                    body: (
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 2 }}>
                        {[..."MTWTFSS"].map((d, i) => (
                          <div key={"h"+i} style={{ fontSize: 5, textAlign: "center", color: "#8a8fa8", letterSpacing: "0.3px" }}>{d}</div>
                        ))}
                        {Array.from({ length: 14 }).map((_, i) => (
                          <div key={i} style={{ height: 7, borderRadius: 2, background: [3,6,9,12].includes(i) ? "#533afd" : (i === 8 ? "#f96bee" : "#eef0f8") }} />
                        ))}
                      </div>
                    ),
                  },
                  {
                    key: "mediakit", top: "3%", right: "1%", rot: 4, d: "-4s",
                    from: "#c9b6f5", to: "#f96bee", icon: "share", name: "Media Kit", tag: "Alex Rivera",
                    body: (
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 4 }}>
                        {[["124K","IG"],["48K","TT"],["12K","YT"]].map(([n, l], i) => (
                          <div key={i} style={{ background: "#f6f4ff", borderRadius: 4, padding: "3px 2px", textAlign: "center" }}>
                            <div className="tnum" style={{ fontSize: 7.5, fontWeight: 500, color: "#533afd", lineHeight: 1 }}>{n}</div>
                            <div style={{ fontSize: 5, color: "#8a8fa8", letterSpacing: "0.3px", marginTop: 2 }}>{l}</div>
                          </div>
                        ))}
                      </div>
                    ),
                  },
                  {
                    key: "budget", top: "72%", left: "1%", rot: 4, d: "-2s",
                    from: "#f7b986", to: "#ea2261", icon: "clock", name: "Budget Tracker", tag: "October",
                    body: (
                      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                          <span style={{ fontSize: 5.5, color: "#8a8fa8", letterSpacing: "0.3px", textTransform: "uppercase" }}>Spent</span>
                          <span className="tnum" style={{ fontSize: 8, fontWeight: 500, color: "#1c1e54" }}>$3,820</span>
                        </div>
                        <div style={{ height: 5, background: "#eef0f8", borderRadius: 9999, overflow: "hidden" }}>
                          <div style={{ width: "62%", height: "100%", background: "linear-gradient(90deg,#f7b986,#ea2261)" }} />
                        </div>
                        <div style={{ display: "flex", justifyContent: "space-between" }}>
                          <span style={{ fontSize: 5, color: "#8a8fa8" }}>62% of budget</span>
                          <span className="tnum" style={{ fontSize: 5, color: "#8a8fa8" }}>$2,180 left</span>
                        </div>
                      </div>
                    ),
                  },
                  {
                    key: "life", top: "26%", left: "1%", rot: -3, d: "-5s",
                    from: "#9ad1c9", to: "#533afd", icon: "sparkle", name: "Life Tracker", tag: "Today",
                    body: (
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <div style={{ position: "relative", width: 26, height: 26 }}>
                          <svg width="26" height="26" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="14" fill="none" stroke="#eef0f8" strokeWidth="4" />
                            <circle cx="18" cy="18" r="14" fill="none" stroke="url(#lifegrad)" strokeWidth="4" strokeLinecap="round" strokeDasharray="88 100" transform="rotate(-90 18 18)" />
                            <defs><linearGradient id="lifegrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#9ad1c9" /><stop offset="1" stopColor="#533afd" /></linearGradient></defs>
                          </svg>
                          <div className="tnum" style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 7, fontWeight: 500, color: "#1c1e54" }}>88%</div>
                        </div>
                        <div style={{ display: "flex", flexDirection: "column", gap: 3, flex: 1 }}>
                          {bar("100%", "#533afd", 0.9)}
                          {bar("70%", "#9ad1c9")}
                          {bar("55%", "#eef0f8")}
                        </div>
                      </div>
                    ),
                  },
                  {
                    key: "resume", top: "49%", right: "1%", rot: 3, d: "-6s",
                    from: "#b9b9f9", to: "#533afd", icon: "doc", name: "Photo Resume", tag: "Alex Rivera",
                    body: (
                      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                        <div style={{ width: 22, height: 22, borderRadius: 4, background: "linear-gradient(135deg,#c9b6f5,#533afd)", flexShrink: 0 }} />
                        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 3 }}>
                          <div style={{ fontSize: 6, fontWeight: 500, color: "#1c1e54" }}>Product Designer</div>
                          {bar("100%", "#e6e8f2")}
                          {bar("74%", "#e6e8f2")}
                        </div>
                      </div>
                    ),
                  },
                  {
                    key: "coverletter", top: "72%", right: "1%", rot: -3, d: "-7s",
                    from: "#f7e7cb", to: "#f7b986", icon: "edit", name: "Cover Letter", tag: "Draft",
                    body: (
                      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
                        <div style={{ fontSize: 5.5, color: "#8a8fa8", letterSpacing: "0.3px" }}>Dear Hiring Team,</div>
                        {bar("100%", "#e6e8f2")}
                        {bar("88%", "#e6e8f2")}
                        {bar("72%", "#e6e8f2")}
                        {bar("46%", "#e6e8f2")}
                      </div>
                    ),
                  },
                ];
                return cards.map((c) => (
                  <div key={c.key} className="fx-float" style={{ position: "absolute", top: c.top, bottom: c.bottom, left: c.left, right: c.right, width: 128, animationDuration: "9s", animationDelay: c.d }}>
                    <div style={{ transform: `rotate(${c.rot}deg)`, borderRadius: 14, overflow: "hidden", boxShadow: "0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(83,58,253,0.4), inset 0 1px 0 rgba(255,255,255,0.9)", background: "#ffffff", border: "1px solid rgba(255,255,255,0.85)" }}>
                      <div style={{ height: 4, background: `linear-gradient(90deg, ${c.from}, ${c.to})` }} />
                      <div style={{ padding: "9px 10px 4px", display: "flex", alignItems: "center", gap: 7 }}>
                        <div style={{ width: 22, height: 22, borderRadius: 6, background: `linear-gradient(135deg, ${c.from}, ${c.to})`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxShadow: `0 3px 8px ${c.to}66` }}>
                          <window.StoreIcon name={c.icon} size={12} stroke="#fff" sw={2} />
                        </div>
                        <div style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ fontSize: 9, fontWeight: 500, color: "#1c1e54", lineHeight: 1.1, letterSpacing: "-0.1px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</div>
                          <div style={{ fontSize: 5.5, color: "#8a8fa8", letterSpacing: "0.4px", textTransform: "uppercase", marginTop: 1 }}>{c.tag}</div>
                        </div>
                      </div>
                      <div style={{ padding: "6px 10px 12px" }}>{c.body}</div>
                    </div>
                  </div>
                ));
              })()}
            </div>
            <div style={{ position: "relative", maxWidth: 720, margin: "0 auto" }}>
              <h2 style={{ fontWeight: 300, fontSize: "clamp(30px,4vw,46px)", lineHeight: 1.08, letterSpacing: "-1px", color: "#fff", margin: "0 0 18px", textWrap: "balance" }}>Ready to make your work look premium without starting from scratch?</h2>
              <p style={{ fontSize: "var(--body-lg-size)", lineHeight: 1.55, color: "rgba(255,255,255,0.75)", margin: "0 auto 32px", maxWidth: 560 }}>Explore digital products designed to help you plan better, sell smarter, and present your brand with confidence.</p>
              <div className="fx-hero-actions" style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
                <button type="button" className="ml-onclick-form fx-btn-lift" onClick={() => { if (window.ml) window.ml('show', 'LQIrrO', true); }} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--body-md-size)", fontWeight: 400, padding: "15px 30px", borderRadius: 9999, border: "none", background: "var(--primary)", color: "#fff", cursor: "pointer", whiteSpace: "nowrap", boxShadow: "0 10px 30px rgba(83,58,253,.35)" }}>Join the Fluvex Brief</button>
                <P2Mag><a href="#best" data-fx-cta="Shop Best Sellers" style={{ textDecoration: "none" }}><P2Btn variant="on-dark" className="fx-btn-lift" style={{ border: "1px solid rgba(255,255,255,0.25)" }}>Shop Best Sellers →</P2Btn></a></P2Mag>
              </div>
            </div>
          </div>
        </P2Reveal>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer() {
  const cols = [
    ["Shop", ["All Products", "Best Sellers", "New Arrivals", "Bundles", "On Sale"]],
    ["Categories", ["HTML Planners", "Business HTML Tools", "Productivity Dashboards", "Resume & Career Tools", "Wedding HTML Studios"]],
    ["Company", ["About", "Reviews", "FAQ", "Contact"]],
    ["Support", ["How It Works", "License Terms", "Refund Policy", "Support"]],
  ];
  return (
    <footer style={{ background: "var(--canvas)", borderTop: "1px solid var(--hairline)", padding: "72px 0 40px" }}>
      <div className="fx-container fx-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr repeat(4, 1fr)", gap: 40 }}>
        <div style={{ maxWidth: 300 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 16 }}>
            <span style={{ width: 28, height: 28, borderRadius: 9, background: "var(--primary)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 16 }}>F</span>
            <span style={{ fontSize: 20, fontWeight: 300, letterSpacing: "-0.5px", color: "var(--ink)" }}>FluvexDesigns</span>
          </div>
          <p style={{ fontSize: "var(--body-md-size)", color: "var(--ink-mute)", lineHeight: 1.55, margin: 0 }}>Premium digital products that help creators, entrepreneurs, and professionals work smarter and look more polished.</p>
        </div>
        {cols.map(([title, links]) => (
          <div key={title} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: "var(--micro-cap-size)", textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--ink-mute)" }}>{title}</div>
            {links.map((l) => <a key={l} href="#product-link" className="fx-navlink" style={{ fontSize: "var(--caption-size)" }}>{l}</a>)}
          </div>
        ))}
      </div>
      <div className="fx-container" style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
        <span style={{ fontSize: "var(--caption-size)", color: "var(--ink-mute)" }}>© 2026 FluvexDesigns. All rights reserved.</span>
        <div style={{ display: "flex", gap: 10 }}>
          {["X", "Instagram", "LinkedIn"].map((s) => <a key={s} href="#product-link" className="fx-social" style={{ width: 36, height: 36, borderRadius: 9999, border: "1px solid var(--hairline)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, color: "var(--ink-secondary)", textDecoration: "none", transition: "transform 180ms ease, border-color 180ms ease, color 180ms ease" }}>{s[0]}</a>)}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Why, HowItWorks, Reviews, FAQ, FinalCTA, Footer });