/* ============================================================
   page.jsx — Header, sections 03–10 (pillars, tiers, exit, founder), Footer
   ============================================================ */

const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

/* ---------- HEADER ---------- */
function Header() {
  const [scrolled, setScrolled] = useStateP(false);
  const [open, setOpen] = useStateP(false);
  const [analysisOpen, setAnalysisOpen] = useStateP(false);
  useEffectP(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"header" + (scrolled ? " scrolled" : "")}>
      <div className="header-inner">
        <a className="brand" href="/" aria-label="The Long Investor home">
          <img src={(window.__resources && window.__resources.logoHorizontal) || "assets/logo-horizontal-cream.svg"} alt="The Long Investor"
            style={{ display: "block", height: 22, width: "auto" }}/>
        </a>

        <nav className="nav" aria-label="Primary">
          <div className="nav-item" tabIndex={0}>
            <a href="/analysis" style={{ color: "inherit", display: "inline-flex", alignItems: "center", gap: 6 }}>
              Analysis <span className="caret"/>
            </a>
            <div className="dropdown">
              <a href="/technical-analysis">Technical Analysis</a>
              <a href="/fundamental-analysis">Fundamental Analysis</a>
            </div>
          </div>
          <a href="/research">Research</a>
          <a href="/community">Community</a>
          <a href="/education">Education</a>
          <a href="https://thelonginvestortli.store/">Shop</a>
          <a href="/about">About</a>
        </nav>

        <a className="btn btn-gold" href="/join?src=header" target="_blank" rel="noopener" style={{ height: 38, padding: "0 18px", fontSize: 11.5 }}>
          Join →
        </a>

        <button className={"mobile-toggle" + (open ? " open" : "")} aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span/>
        </button>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")} role="dialog" aria-label="Menu">
        <nav className="mobile-menu-inner" aria-label="Mobile">
          <div className="mm-row">
            <a href="/analysis" onClick={() => setOpen(false)}>Analysis</a>
            <button
              className={"mm-caret" + (analysisOpen ? " open" : "")}
              aria-label="Show Analysis pages"
              aria-expanded={analysisOpen}
              onClick={() => setAnalysisOpen(o => !o)}
            >
              <span className="caret"/>
            </button>
          </div>
          <div className={"mm-sub" + (analysisOpen ? " open" : "")}>
            <a href="/technical-analysis" onClick={() => setOpen(false)}>Technical Analysis</a>
            <a href="/fundamental-analysis" onClick={() => setOpen(false)}>Fundamental Analysis</a>
          </div>
          <a href="/research" onClick={() => setOpen(false)}>Research</a>
          <a href="/community" onClick={() => setOpen(false)}>Community</a>
          <a href="/education" onClick={() => setOpen(false)}>Education</a>
          <a href="https://thelonginvestortli.store/" onClick={() => setOpen(false)}>Shop</a>
          <a href="/about" onClick={() => setOpen(false)}>About</a>
        </nav>
      </div>
    </header>
  );
}

/* ---------- helpers ---------- */
function CheckList({ label, items }) {
  return (
    <div>
      {label && <div className="list-label">{label}</div>}
      <ul className="check-list">
        {items.map((t, i) => (
          <li key={i}><span className="tick">✓</span><span>{t}</span></li>
        ))}
      </ul>
    </div>
  );
}

function SectionTag({ n, label }) {
  return (
    <div className="eyebrow-tag"><span>{n}</span><span>{label}</span></div>
  );
}

/* ---------- TiltCard ----------
   Wraps a visual and tilts it in 3D toward the cursor — the side under the
   mouse pushes back. A cream "back-light" sits behind it on translateZ(-90px),
   so as the visual tilts, the light peeks out asymmetrically. Used by every
   Section visual (Technical, Deep Dives, Valuation, Community, Education). */
function TiltCard({ children, style, className, max = 7, glow = 1 }) {
  const outerRef = useRefP(null);
  const innerRef = useRefP(null);
  const glowRef  = useRefP(null);
  const onMove = (e) => {
    const outer = outerRef.current, inner = innerRef.current;
    if (!outer || !inner) return;
    const r = outer.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const ry = (0.5 - px) * 2 * max;   // mouse on right → right side recedes
    const rx = (py - 0.5) * 2 * max;   // mouse on top   → top side recedes
    inner.style.transition = "transform 90ms ease-out";
    inner.style.transform  = `rotateX(${rx}deg) rotateY(${ry}deg)`;
  };
  const onEnter = () => {
    if (glowRef.current) {
      glowRef.current.style.transition = "opacity 320ms ease-out";
      glowRef.current.style.opacity = "1";
    }
  };
  const onLeave = () => {
    if (innerRef.current) {
      innerRef.current.style.transition = "transform 520ms cubic-bezier(0.2,0.8,0.25,1)";
      innerRef.current.style.transform  = "rotateX(0deg) rotateY(0deg)";
    }
    if (glowRef.current) {
      glowRef.current.style.transition = "opacity 480ms ease-out";
      glowRef.current.style.opacity = "0";
    }
  };
  // Glow size/softness scales with `glow` prop
  const glowInset = `${-7 * glow}%`;
  const glowBlur  = `${44 * glow}px`;
  return (
    <div ref={outerRef} onMouseMove={onMove} onMouseEnter={onEnter} onMouseLeave={onLeave}
      className={className}
      style={{ perspective: "1200px", ...style }}>
      <div ref={innerRef} style={{
        transformStyle: "preserve-3d",
        willChange: "transform",
        width: "100%",
        position: "relative",
      }}>
        {/* cream back-light, sits behind in 3D space — only rendered when glow>0 */}
        {glow > 0 && (
          <div ref={glowRef} aria-hidden="true" style={{
            position: "absolute",
            inset: glowInset,
            background: "radial-gradient(ellipse at center, rgba(255,250,238,0.55) 0%, rgba(255,250,238,0.32) 32%, rgba(255,250,238,0.10) 62%, rgba(255,250,238,0) 82%)",
            filter: `blur(${glowBlur})`,
            transform: "translateZ(-90px)",
            opacity: 0,
            pointerEvents: "none",
          }}/>
        )}
        {children}
      </div>
    </div>
  );
}

/* ---------- 03 TECHNICAL ANALYSIS ---------- */
function SectionTechnical() {
  return (
    <section id="technical-analysis" className="section reveal">
      <div className="container">
        <div className="two-col reverse" style={{ gridTemplateColumns: "minmax(0, 62fr) minmax(0, 38fr)" }}>
          <div className="stack-md align-right">
            <div>
              <SectionTag n="01" label="Technical Analysis"/>
              <h2 className="serif" style={{ marginBottom: 18, maxWidth: "14ch" }}>
                <span style={{ fontWeight: 700 }}>We chart</span>{" "}
                <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>what others guess.</span>
              </h2>
              <p className="lede">
                Setups are published with the reasoning attached: Wave count, Fibonacci levels,
                Invalidation line. You don't get a call; you get the chart we drew before we took it.
              </p>
            </div>
            <CheckList
              label="WHAT YOU GET ON PATREON EVERY DAY"
              items={[
                "15 Charts with full commentary",
                "Video Analysis",
                "Live buy alerts & Updates",
              ]}
            />
            <div>
              <a className="btn btn-gold" href="/technical-analysis">Find out more →</a>
            </div>
          </div>

          <TiltCard className="sec-visual" glow={1.6} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
            <img
              className="sway"
              src="uploads/SPOT_2026-05-05_16-27-12_1a291.png"
              alt="$SPOT weekly chart with Elliott Wave count, Fibonacci levels and buy zone"
              style={{
                display: "block",
                width: "100%",
                height: "auto",
                borderRadius: 2,
                filter: "drop-shadow(0 18px 32px rgba(0,0,0,0.55))"
              }}/>
          </TiltCard>
        </div>
      </div>
    </section>
  );
}

/* ---------- 04 FUNDAMENTAL ANALYSIS ----------
   (Merges the old Deep Dives + Valuation sections into a single piece
   that mirrors the hero's "Fundamental Analysis" slide — same fanned
   stack visual, same narrative.) */
function SectionFundamental() {
  return (
    <section id="fundamental-analysis" className="section reveal" style={{ background: "#070707" }}>
      <div className="container">
        <div className="two-col reverse">
          <TiltCard className="sec-visual" glow={0.7} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
            <div className="sway sway-delay-1" style={{
              width: "100%",
              maxWidth: 620,
              aspectRatio: "5 / 4",
              position: "relative",
            }}>
              <window.FundamentalStack/>
            </div>
          </TiltCard>

          <div className="stack-md">
            <div>
              <SectionTag n="02" label="Fundamental Analysis"/>
              <h2 className="serif" style={{ marginBottom: 18, maxWidth: "20ch" }}>
                <span style={{ fontWeight: 700 }}>The research</span>{" "}
                <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>most retail never sees.</span>
              </h2>
              <p className="lede">
                Deep Dives, Equity Briefs and Valuation Analysis;<br/>written, dated and stood by.
                Each piece carries the thesis, the financials, the position sizing and the
                explicit price target. Outcomes are tracked on the same page they were called.
              </p>
            </div>
            <CheckList
              label="Inside a typical research piece"
              items={[
                "Investment thesis (4 – 6 pages)",
                "Financial breakdown — revenue, margin, FCF",
                "Management, MOAT, risks & catalysts",
                "DCF, EV/Sales & EV/EBITDA — explicit price targets",
                "Recommended position sizing, updated quarterly",
              ]}
            />

            <div>
              <a className="btn btn-gold" href="/fundamental-analysis">Find out more →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 03 RESEARCH ---------- */
function SectionResearch() {
  return (
    <section id="research" className="section reveal">
      <div className="container">
        <div className="two-col reverse" style={{ gridTemplateColumns: "minmax(0, 55fr) minmax(0, 45fr)" }}>
          <div className="stack-md align-right">
            <div>
              <SectionTag n="03" label="Research"/>
              <h2 className="serif" style={{ marginBottom: 18, maxWidth: "16ch" }}>
                <span style={{ fontWeight: 700 }}>We track</span>{" "}
                <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>the smart money.</span>
              </h2>
              <p className="lede">
                Quarterly tracking of what the world’s super‑investors are buying, selling and holding.
                Druckenmiller, Buffett, Marks, Klarman and many more. Their positions, conviction trades and where
                capital is concentrating.
              </p>
            </div>
            <CheckList
              label="What’s inside each issue"
              items={[
                "Top positions of super\u2011investors",
                "Quarter\u2011over\u2011quarter buys & sells",
                "Where conviction is building\u2014and unwinding",
              ]}
            />
            <div>
              <a className="btn btn-gold" href="/research">Find out more →</a>
            </div>
          </div>

          <TiltCard className="sec-visual" glow={1.6} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
            <img
              className="sway"
              src="uploads/The Money Flow Research.png"
              alt="The Money Flow Research — quarterly report on what super‑investors are buying"
              style={{
                display: "block",
                width: "100%",
                height: "auto",
                borderRadius: 2,
                filter: "drop-shadow(0 18px 32px rgba(0,0,0,0.55))"
              }}/>
          </TiltCard>
        </div>
      </div>
    </section>
  );
}

/* ---------- 06 COMMUNITY ---------- */

/* ---------- CommunityGlass — darkened glass surface with a soft white
   "bubble" of light. The bubble drifts slowly toward an inverted mouse
   position (cursor right → light left) so the effect is calm and ambient,
   not reactive. The TiltCard wrapping this component handles the 3D tilt. */
function CommunityGlass({ children }) {
  const outerRef = useRefP(null);
  // tx/ty = target sheen position, cx/cy = currently-rendered position.
  // The render loop eases cx/cy toward tx/ty each frame with a small ease
  // coefficient so the bubble drifts like it's floating through liquid.
  const stateRef = useRefP({ tx: 50, ty: 50, cx: 50, cy: 50, raf: 0 });

  useEffectP(() => {
    let raf = 0;
    const tick = () => {
      const s = stateRef.current;
      const ease = 0.035;
      s.cx += (s.tx - s.cx) * ease;
      s.cy += (s.ty - s.cy) * ease;
      const el = outerRef.current;
      if (el) {
        el.style.setProperty("--sheen-x", `${s.cx.toFixed(2)}%`);
        el.style.setProperty("--sheen-y", `${s.cy.toFixed(2)}%`);
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const onMove = (e) => {
    const el = outerRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const mx = ((e.clientX - r.left) / r.width) * 100;
    const my = ((e.clientY - r.top) / r.height) * 100;
    stateRef.current.tx = 100 - mx;
    stateRef.current.ty = 100 - my;
  };
  const onLeave = () => {
    // Drift back toward the centre when the cursor leaves.
    stateRef.current.tx = 50;
    stateRef.current.ty = 50;
  };

  return (
    <div ref={outerRef}
      className="community-glass"
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ "--sheen-x": "50%", "--sheen-y": "50%" }}>
      <div className="community-glass-inner">
        {children}
      </div>
      <style>{`
        .community-glass {
          position: relative;
          isolation: isolate;
          padding: clamp(24px, 2.6vw, 38px);
          background: rgba(255,250,238,0.025);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          overflow: hidden;
        }
        /* Soft, always-on "bubble" of light — drifts to an inverted mouse pos */
        .community-glass::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          background: radial-gradient(
            48% 52% at var(--sheen-x, 50%) var(--sheen-y, 50%),
            rgba(255,250,238,0.09) 0%,
            rgba(255,250,238,0.03) 40%,
            rgba(255,250,238,0) 70%);
          filter: blur(1px);
        }
        /* Inner dark tint — gives the "darkened glass" feel */
        .community-glass::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          background: linear-gradient(180deg,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.30) 100%);
        }
        .community-glass-inner {
          position: relative;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }
        .community-glass-inner > * {
          width: 100%;
          max-width: 560px;
          transform: scale(0.96);
          transform-origin: center center;
        }
      `}</style>
    </div>
  );
}

function CountUp({ to, suffix = "", duration = 3000 }) {  const ref = useRefP(null);
  const from = Math.max(0, to - Math.max(1, Math.round(to * 0.03)));
  const [val, setVal] = useStateP(from);
  const started = useRefP(false);
  useEffectP(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(from + (to - from) * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration, from]);
  return <span ref={ref}>{val.toLocaleString("en-US")}{suffix}</span>;
}

function SectionCommunity() {
  const stats = [
    { v: 10800, suffix: "+", l: "Paid Members" },
    { v: 28000, suffix: "+", l: "Active Members" },
    { v: 50,    suffix: "+", l: "Countries" },
    { v: 4,     suffix: "",  l: "Yrs running" },
  ];
  const team = ["TLI", "VS", "MM", "SK"];
  const teamTones = ["gold","cream","graphite","cream"];

  return (
    <section id="community" className="section reveal" style={{ background: "#070707" }}>
      <div className="container">
        <div className="two-col reverse">
          <TiltCard className="sec-visual" max={5} glow={0}>
            <CommunityGlass>
              <window.ChatPreview/>
            </CommunityGlass>
          </TiltCard>

          <div className="stack-md">
            <div>
              <SectionTag n="04" label="Community"/>
              <h2 className="serif" style={{ marginBottom: 18, maxWidth: "14ch" }}>
                <span style={{ fontWeight: 700 }}>The 24/7 desk</span>{" "}
                <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>you can talk to.</span>
              </h2>
              <p className="lede">
                A working chat, not a fan channel. Members push back. Analysts answer.
                The conversation is the MOAT.
              </p>
            </div>
            <CheckList
              label="A typical day in the chat"
              items={[
                "TA setups discussed live, intraday",
                "Live discussion with members and team professionals",
                "7 dedicated chats with a specific topic",
                "Member of the Month rewards — FREE MEMBERSHIPS",
              ]}
            />
            <div>
              <div className="list-label" style={{ marginBottom: 12 }}>Behind the desk</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                {team.map((t, i) => (
                  <window.Avatar key={i} initials={t} tone={teamTones[i]} size={42}
                    style={{ marginLeft: i === 0 ? 0 : -8, boxShadow: "0 0 0 2px #070707" }}/>
                ))}
                <span style={{
                  fontSize: 12, color: window.CREAM_FAINT,
                  letterSpacing: "0.12em", textTransform: "uppercase",
                  marginLeft: 4,
                }}>+ others</span>
              </div>
              <a className="link-gold" href="/community">→ Find out more</a>
            </div>
          </div>
        </div>

        {/* Stats strip */}
        <div style={{
          marginTop: 72,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          border: "1px solid rgba(255,250,238,0.10)",
          borderRadius: 4,
          overflow: "hidden",
        }} className="stat-row">
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: "32px 28px",
              borderRight: i < stats.length - 1 ? "1px solid rgba(235,207,0,0.18)" : "none",
              background: "#0c0c0c",
            }} className="stat-cell">
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: "clamp(28px, 3.4vw, 40px)",
                color: window.GOLD,
                lineHeight: 1,
                marginBottom: 10,
              }}><CountUp to={s.v} suffix={s.suffix}/></div>
              <div style={{
                fontSize: 10.5, letterSpacing: "0.22em",
                textTransform: "uppercase",
                color: window.CREAM_FAINT,
                fontWeight: 600,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 760px) {
            .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
            .stat-row .stat-cell:nth-child(2) { border-right: none !important; }
            .stat-row .stat-cell:nth-child(1),
            .stat-row .stat-cell:nth-child(2) {
              border-bottom: 1px solid rgba(235,207,0,0.18);
            }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ---------- 07 EDUCATION ---------- */
function SectionEducation() {
  return (
    <section id="education" className="section reveal">
      <div className="container">
        <div className="two-col reverse" style={{ gridTemplateColumns: "minmax(0, 55fr) minmax(0, 45fr)" }}>
          <div className="stack-md align-right">
            <div>
              <SectionTag n="05" label="Education"/>
              <h2 className="serif" style={{ marginBottom: 18, maxWidth: "18ch" }}>
                <span style={{ fontWeight: 700 }}>Don't just follow signals.</span>{" "}
                <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>Learn the framework.</span>
              </h2>
              <p className="lede">
                The Elliott Wave course, the Learning Centre, and the Lessons collection —
                built for retail investors who want the model behind the call.
              </p>
            </div>
            <div className="row-gap-16">
              <a className="btn btn-gold" href="/education">Find out more →</a>
            </div>
          </div>

          <TiltCard className="sec-visual" glow={1.6} style={{ display: "flex", justifyContent: "center" }}>
            <window.CourseOutline/>
          </TiltCard>
        </div>
      </div>
    </section>
  );
}

/* ---------- 08 FOUNDER ---------- */
function SectionFounder() {
  return (
    <section id="founder" className="section panel reveal" style={{ background: "#0c0c0c" }}>
      <div className="container">
        <div className="stack-md" style={{
          maxWidth: 720,
          margin: "0 auto",
          alignItems: "center",
          textAlign: "center",
        }}>
          <SectionTag n="06" label="The Founder"/>
          <blockquote style={{
            margin: 0,
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 500,
            fontSize: "clamp(24px, 2.6vw, 30px)",
            lineHeight: 1.25,
            color: window.CREAM,
            letterSpacing: "-0.005em",
          }}>
            <span style={{ color: window.GOLD, marginRight: 6 }}>“</span>
            Pilots live by checklists, standard operating procedures, and constant situational awareness.
            In investing, that same discipline applies: They follow rules instead of emotions.
            <span style={{ color: window.GOLD, marginLeft: 6 }}>”</span>
          </blockquote>
          <p className="lede" style={{ maxWidth: "52ch" }}>
            From cockpit to charts. The pilot's approach: trust procedure, stay calm under pressure,
            run the checklist before you run the decision.
            <span style={{ display: "block", marginTop: "1em" }}>Applied to retail investing for the past four years.</span>
          </p>
          <a className="link-gold" href="/technical-analysis">→ Learn the strategy</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 07 SHOP ---------- */
function SectionShop() {
  // 5 hand-picked tiles. Offsets create an editorial stagger.
  const tiles = [
    { src: "assets/merch/unisex-super-heavyweight-hoodie-black-front-6a4d090ff1193.jpg",   alt: "TLI Unisex Heavyweight Hoodie",       off:  0 },
    { src: "assets/merch/mens-under-armour-athletic-t-shirt-black-front-6a53817ed11be.jpg", alt: "TLI Till I Die Tee",                 off: 44 },
    { src: "assets/merch/classic-dad-hat-white-front-6a4d16f1b06f4.jpg",                   alt: "TLI Classic Dad Hat — White",         off: 14 },
    { src: "assets/merch/black-glossy-mug-black-11-oz-front-6a537e0fcb7ef.jpg",            alt: "TLI Black Glossy Mug",                off: 56 },
    { src: "assets/merch/hardcover-bound-notebook-black-front-6a4cefd0f2472.jpg",          alt: "The Long Investor Hardcover Journal", off: 24 },
  ];

  return (
    <section id="shop" className="section reveal" style={{ background: "#070707", overflow: "hidden" }}>
      <div className="container">
        {/* Heading block — centered, mixed-weight serif */}
        <div style={{ maxWidth: 920, margin: "0 auto 56px", textAlign: "center" }}>
          <div className="eyebrow-tag" style={{ justifyContent: "center" }}>
            <span>07</span><span>SHOP</span>
          </div>
          <h2 className="serif" style={{
            fontSize: "clamp(38px, 4.8vw, 64px)",
            lineHeight: 1.04,
            letterSpacing: "-0.02em",
            marginBottom: 22,
          }}>
            <span style={{ fontWeight: 700 }}>WEAR</span>{" "}
            <span style={{ fontStyle: "italic", color: window.CREAM_DIM }}>the&nbsp;discipline.</span>
          </h2>
          <p className="lede" style={{ margin: "0 auto", maxWidth: "44ch" }}>
            Pieces engineered for the long position. No graphics, no shortcuts — built to outlast the cycle.
          </p>
        </div>

        {/* Staggered product strip */}
        <div className="shop-strip">
          {tiles.map((t, i) => (
            <a key={i} href="https://thelonginvestortli.store/"
              className="shop-tile"
              aria-label={t.alt}
              style={{ "--off": `${t.off}px` }}>
              <div className="shop-tile-frame">
                <img src={t.src} alt={t.alt} loading="lazy"/>
              </div>
            </a>
          ))}
        </div>

        {/* CTA */}
        <div style={{ textAlign: "center", marginTop: 28 }}>
          <a className="btn btn-gold" href="https://thelonginvestortli.store/" style={{ height: 50, padding: "0 30px", fontSize: 12.5 }}>
            Visit the shop →
          </a>
          <div style={{
            marginTop: 18,
            fontSize: 11,
            letterSpacing: "0.24em",
            textTransform: "uppercase",
            color: window.CREAM_FAINT,
            fontWeight: 600,
          }}>
            Ships worldwide
          </div>
        </div>
      </div>

      <style>{`
        .shop-strip {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 18px;
          max-width: 1280px;
          margin: 0 auto;
          padding: 12px 0 96px;
          align-items: start;
        }
        .shop-tile {
          --off: 0px;
          display: block;
          transform: translateY(var(--off));
          transition: transform 360ms var(--ease-out);
          text-decoration: none;
          color: inherit;
        }
        .shop-tile:hover { transform: translateY(calc(var(--off) - 8px)); }
        .shop-tile-frame {
          position: relative;
          aspect-ratio: 1 / 1;
          background: #ffffff;
          border: 1px solid rgba(255,250,238,0.10);
          overflow: hidden;
          transition: border-color 200ms var(--ease-out), box-shadow 220ms var(--ease-out);
        }
        .shop-tile:hover .shop-tile-frame {
          border-color: var(--accent);
          box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--accent);
        }
        .shop-tile-frame img {
          display: block;
          width: 100%; height: 100%;
          object-fit: cover;
          transition: transform 600ms var(--ease-out);
        }
        .shop-tile:hover .shop-tile-frame img { transform: scale(1.045); }

        @media (max-width: 980px) {
          .shop-strip {
            grid-template-columns: repeat(3, 1fr);
            padding-bottom: 36px;
            gap: 14px;
          }
          .shop-tile { transform: none !important; }
          .shop-tile:hover { transform: translateY(-6px) !important; }
        }
        @media (max-width: 560px) {
          .shop-strip { grid-template-columns: repeat(2, 1fr); }
        }
        @media (prefers-reduced-motion: reduce) {
          .shop-tile, .shop-tile-frame img { transition: none; }
        }
      `}</style>
    </section>
  );
}

/* ---------- 09 TIERS ---------- */
function SectionTiers() {
  const tiers = [
    {
      name: "FREE",
      price: "Free",
      free: true,
      featured: false,
      pitch: "Get a feel for the desk.",
      bullets: [
        "Free Members Chat",
        "The Sunday Lit News",
        "The Lit Saturday Newsletter",
        "Occasional Free Access To Posts",
      ],
    },
    {
      name: "TECHNICAL CHARTS",
      price: "$42",
      featured: true,
      pitch: "The charts and the signals.",
      bullets: [
        "Everything In Free",
        "Personal Buy & Sell Signals",
        "15 Charts Daily ·\n450 Monthly",
        "1 Technical Analysis Video Daily",
        "Weekly Fundamental Analysis & Education",
        "Private Chat Group",
        "Stocks, ETFs, Crypto, Forex, Commodities",
      ],
    },
    {
      name: "FULL ACCESS + PORTFOLIO REVIEW",
      price: "$220",
      featured: false,
      limited: true,
      pitch: "Full access — plus a monthly portfolio review.",
      bullets: [
        "Everything In Technical Charts",
        "1 Chart Request Per Week",
        "Monthly Portfolio Review — 30 Positions Max",
      ],
    },
    {
      name: "THE EXECUTIVE LOUNGE",
      price: "$1,000",
      featured: false,
      limited: true,
      pitch: "1:1 access. Portfolio built with you.",
      bullets: [
        "Everything In Pro",
        "Personal Assistant",
        "Monthly Zoom Call With The Team",
        "Portfolio Building & Assessment",
        "Private Telegram — Executive Only",
      ],
    },
  ];

  return (
    <section id="tiers" className="section reveal">
      <div className="container">
        <div style={{
          textAlign: "center",
          maxWidth: 760, margin: "0 auto 56px",
        }}>
          <div className="eyebrow-tag" style={{ justifyContent: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <span>JOIN</span><span>TIERS</span>
            </span>
          </div>
          <h2 className="serif" style={{
            fontSize: "clamp(32px, 3.6vw, 44px)",
            marginBottom: 14,
          }}>
            <span style={{ fontWeight: 700 }}>Four tiers.</span>{" "}
            <span style={{ color: "var(--fg-dim)", fontWeight: 400 }}>One disciplined approach.</span>
          </h2>
          <p className="lede" style={{ maxWidth: 540, margin: "0 auto", color: window.CREAM_DIM }}>
            Pick the level of access that fits how you invest. Free to start, paid tiers cancel anytime, billed monthly on Patreon.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
          border: "1px solid rgba(235,207,0,0.18)",
          borderRadius: 6,
          padding: 16,
          background: "rgba(235,207,0,0.015)",
        }} className="tiers-grid">
          {tiers.map((t, i) => (
            <div key={i}
              className={"tier-card " + (t.featured ? "featured" : "")}
              style={{
                background: t.featured ? "#0e0e0c" : "#0a0a0a",
                border: t.featured ? `2px solid ${window.GOLD}` : "1px solid rgba(255,250,238,0.12)",
                borderRadius: 4,
                padding: "36px 32px 32px",
                position: "relative",
                display: "flex",
                flexDirection: "column",
                gap: 22,
              }}>
              {t.featured && (
                <div style={{
                  position: "absolute",
                  top: -1, right: -1,
                  background: window.GOLD,
                  color: "#000",
                  padding: "6px 12px",
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: "0.22em",
                  fontFamily: "var(--font-text)",
                }}>MOST POPULAR</div>
              )}

              <div>
                <div style={{
                  fontSize: 11, letterSpacing: "0.28em",
                  color: t.featured ? window.GOLD : window.CREAM_FAINT,
                  fontWeight: 600,
                  marginBottom: 14,
                }}>{t.name}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
                  <span style={{
                    fontFamily: "var(--font-display)",
                    fontSize: 44, fontWeight: 500,
                    color: window.CREAM,
                    lineHeight: 1,
                  }}>{t.price}</span>
                  {!t.free && (
                    <span style={{ color: window.CREAM_FAINT, fontSize: 14 }}>/ mo</span>
                  )}
                </div>
                <div style={{
                  fontFamily: "var(--font-display)",
                  fontStyle: "italic",
                  fontSize: 14,
                  color: window.CREAM_DIM,
                }}>{t.pitch}</div>
                {t.limited && (
                  <div className="limited-badge" style={{
                    marginTop: 12,
                    display: "inline-flex", alignItems: "center",
                    fontSize: 10.5, letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    fontWeight: 600,
                    color: window.GOLD,
                  }}>
                    Limited spots
                  </div>
                )}
              </div>

              <div style={{ height: 1, background: "rgba(255,250,238,0.08)" }}/>

              <ul className="check-list" style={{ flex: 1 }}>
                {t.bullets.map((b, j) => (
                  <li key={j}><span className="tick">✓</span><span style={{ whiteSpace: "pre-line" }}>{b}</span></li>
                ))}
              </ul>

              <a
                className={"btn " + (t.featured ? "btn-gold" : "btn-ghost")}
                href={"/join?src=tier_" + t.name.toLowerCase().replace(/[^a-z0-9]+/g, "_")} target="_blank" rel="noopener"
              >Join →</a>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 36,
          paddingTop: 24,
          borderTop: "1px solid rgba(255,250,238,0.08)",
          display: "flex", flexWrap: "wrap",
          alignItems: "center", justifyContent: "center",
          gap: "10px 36px",
          fontSize: 12,
          color: window.CREAM_DIM,
          letterSpacing: "0.04em",
        }}>
          <span><span style={{ color: window.GOLD, marginRight: 8 }}>✓</span>Cancel anytime</span>
          <span><span style={{ color: window.GOLD, marginRight: 8 }}>✓</span>No lock-in</span>
          <span><span style={{ color: window.GOLD, marginRight: 8 }}>✓</span>Trusted by 10,800+ members across 50+ countries</span>
        </div>

        <style>{`
          .tier-card {
            transition: transform 320ms cubic-bezier(0.2,0.8,0.25,1),
                        box-shadow 320ms ease-out,
                        border-color 320ms ease-out;
          }
          .tier-card:hover {
            transform: translateY(-5.5px);
            box-shadow:
              0 0 34px 4px rgba(255,250,238,0.07),
              0 0 84px 10px rgba(255,250,238,0.035),
              0 16px 36px rgba(0,0,0,0.40);
          }
          .tier-card.featured:hover {
            box-shadow:
              0 0 34px 4px rgba(255,250,238,0.085),
              0 0 84px 10px rgba(235,207,0,0.055),
              0 16px 36px rgba(0,0,0,0.40);
          }
          @media (max-width: 1100px) {
            .tiers-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 640px) {
            .tiers-grid { grid-template-columns: 1fr !important; }
          }
          .limited-badge {
            animation: limitedBreath 4.5s ease-in-out infinite;
          }
          @keyframes limitedBreath {
            0%, 100% { opacity: 1;    }
            50%      { opacity: 0.45; }
          }
          @media (prefers-reduced-motion: reduce) {
            .limited-badge { animation: none; opacity: 1; }
            .tier-card, .tier-card:hover { transition: none; transform: none; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ---------- 10 EXIT STRIP ---------- */
function SectionExit() {
  return (
    <section id="exit" className="section reveal" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <div className="eyebrow-tag" style={{ marginBottom: 32, justifyContent: "flex-start" }}>
            <em style={{ color: window.CREAM_FAINT, fontStyle: "italic", fontFamily: "var(--font-display)", letterSpacing: "0.02em", textTransform: "none", fontSize: 14 }}>
              Not ready to become a paid member?
            </em>
          </div>

          <div style={{
            background: "#0a0a0a",
            border: "1px solid rgba(255,250,238,0.12)",
            borderRadius: 6,
            padding: 36,
          }}>
            <div style={{
              fontSize: 11, letterSpacing: "0.28em", fontWeight: 600,
              color: window.GOLD, marginBottom: 14,
            }}>FREE MEMBERSHIP</div>
            <div style={{ height: 2, width: 40, background: window.GOLD, marginBottom: 22 }}/>
            <h3 className="serif" style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: 26, lineHeight: 1.15,
              color: window.CREAM, marginBottom: 14,
            }}>Start free. Stay as long as you want.</h3>
            <p style={{ color: window.CREAM_DIM, fontSize: 14.5, lineHeight: 1.55, marginBottom: 22, maxWidth: "52ch" }}>
              Join the free members chat. Get The Sunday Lit News, The Lit Saturday Newsletter,
              and occasional free access to paid posts — no card, no commitment.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
              <a href="/join?src=hero_free" target="_blank" rel="noopener" className="btn btn-gold" style={{ height: 44 }}>
                Become a free member →
              </a>
              <a href="#tiers" className="link-gold">→ See what's inside</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Header = Header;
window.TiltCard = TiltCard;
window.SectionTechnical = SectionTechnical;
window.SectionFundamental = SectionFundamental;
window.SectionResearch = SectionResearch;
window.SectionCommunity = SectionCommunity;
window.SectionEducation = SectionEducation;
window.SectionFounder = SectionFounder;
window.SectionShop = SectionShop;

/* ---------- 08 CONTACT ---------- */
function SectionContact() {
  // `_hp` is the honeypot (must stay empty) and `_t` stamps when the form rendered.
  // The API silently drops anything that fills the first or submits within 2s of the second.
  const [form, setForm] = useStateP({ name: "", email: "", topic: "General", message: "", _hp: "" });
  const [renderedAt] = useStateP(() => Date.now());
  const [sent, setSent] = useStateP(false);
  const [sending, setSending] = useStateP(false);
  const [error, setError] = useStateP("");
  const topics = ["General", "Membership", "Partnership", "Press"];

  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setError("Please fill in your name, email, and message.");
      return;
    }
    setSending(true);
    setError("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, _t: renderedAt }),
      });
      if (!res.ok) throw new Error("bad response");
      setSent(true);
    } catch (err) {
      setError("Something went wrong. Please try again, or email us directly at contact@thelonginvestortli.com.");
    } finally {
      setSending(false);
    }
  };

  const field = (name) => ({
    value: form[name],
    onChange: (e) => setForm({ ...form, [name]: e.target.value }),
  });

  const inputBase = {
    width: "100%",
    background: "transparent",
    border: 0,
    borderBottom: "1px solid rgba(255,250,238,0.18)",
    color: window.CREAM,
    fontFamily: "var(--font-text)",
    fontSize: 15,
    padding: "14px 2px 12px",
    outline: "none",
    transition: "border-color 180ms var(--ease-out)",
  };
  const labelBase = {
    display: "block",
    fontSize: 10.5,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    fontWeight: 600,
    color: window.CREAM_FAINT,
    marginBottom: 0,
  };
  const focus = (e) => e.target.style.borderBottomColor = window.GOLD;
  const blur  = (e) => e.target.style.borderBottomColor = "rgba(255,250,238,0.18)";

  return (
    <section id="contact" className="section reveal" style={{ background: "#070707" }}>
      <div className="container">
        <div className="two-col" style={{ gridTemplateColumns: "minmax(0, 42fr) minmax(0, 58fr)", alignItems: "start", gap: "clamp(48px, 6vw, 96px)" }}>
          {/* LEFT — heading + direct details */}
          <div className="stack-md">
            <div>
              <SectionTag n="08" label="Contact"/>
              <h2 className="serif" style={{
                fontSize: "clamp(34px, 3.8vw, 52px)",
                lineHeight: 1.05,
                letterSpacing: "-0.018em",
                marginBottom: 18,
                maxWidth: "16ch",
              }}>
                <span style={{ fontWeight: 600 }}>Talk to the desk.</span>{" "}
                <span style={{ fontStyle: "italic", color: window.CREAM_DIM }}>Not&nbsp;a&nbsp;bot.</span>
              </h2>
              <p className="lede" style={{ maxWidth: "44ch" }}>
                Questions about membership, a partnership, or press? Send a note. We read every message and reply within two business days.
              </p>
            </div>

          </div>

          {/* RIGHT — form card */}
          <div style={{
            background: "#0a0a0a",
            border: "1px solid rgba(255,250,238,0.10)",
            borderRadius: 6,
            padding: "clamp(28px, 3.4vw, 44px)",
            position: "relative",
          }}>
            {sent ? (
              <div style={{ minHeight: 360, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ fontSize: 11, letterSpacing: "0.28em", fontWeight: 600, color: window.GOLD, marginBottom: 14 }}>
                  MESSAGE RECEIVED
                </div>
                <div style={{ height: 2, width: 40, background: window.GOLD, marginBottom: 22 }}/>
                <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.2, marginBottom: 12 }}>
                  Thanks — we've got it.
                </h3>
                <p style={{ color: window.CREAM_DIM, fontSize: 14.5, lineHeight: 1.55, maxWidth: "46ch" }}>
                  A reply will land in your inbox within two business days. For urgent membership questions, ping the chat.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} className="contact-form" noValidate>
                <div className="contact-grid">
                  <label>
                    <span style={labelBase}>Name</span>
                    <input type="text" required placeholder="Your full name"
                      style={inputBase} onFocus={focus} onBlur={blur} {...field("name")}/>
                  </label>
                  <label>
                    <span style={labelBase}>Email</span>
                    <input type="email" required placeholder="you@email.com"
                      style={inputBase} onFocus={focus} onBlur={blur} {...field("email")}/>
                  </label>
                </div>

                <div style={{ marginTop: 26 }}>
                  <span style={labelBase}>Topic</span>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
                    {topics.map(t => {
                      const on = form.topic === t;
                      return (
                        <button key={t} type="button"
                          onClick={() => setForm({ ...form, topic: t })}
                          onMouseEnter={(e) => { if (!on) e.currentTarget.style.color = window.CREAM; }}
                          onMouseLeave={(e) => { if (!on) e.currentTarget.style.color = window.CREAM_DIM; }}
                          style={{
                            height: 30,
                            padding: "0 12px",
                            borderRadius: 999,
                            border: `1px solid ${on ? window.GOLD : "rgba(255,250,238,0.18)"}`,
                            background: on ? "rgba(235,207,0,0.10)" : "transparent",
                            color: on ? window.GOLD : window.CREAM_DIM,
                            fontFamily: "var(--font-text)",
                            fontSize: 10.5,
                            letterSpacing: "0.14em",
                            textTransform: "uppercase",
                            fontWeight: 600,
                            cursor: "pointer",
                            transition: "color 150ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out)",
                          }}>
                          {t}
                        </button>
                      );
                    })}
                  </div>
                </div>

                <label style={{ display: "block", marginTop: 28 }}>
                  <span style={labelBase}>Message</span>
                  <textarea required rows={5} placeholder="Tell us what you're working on."
                    style={{ ...inputBase, resize: "vertical", lineHeight: 1.5, minHeight: 120 }}
                    onFocus={focus} onBlur={blur} {...field("message")}/>
                </label>

                {/* Honeypot. Off-screen rather than display:none, because some bots skip
                    hidden inputs but not positioned ones. aria-hidden + tabIndex keep it
                    away from screen readers and keyboard users. */}
                <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}>
                  <label>
                    Company website
                    <input type="text" tabIndex={-1} autoComplete="off" {...field("_hp")}/>
                  </label>
                </div>

                <div style={{
                  marginTop: 32,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  flexWrap: "wrap",
                  gap: 16,
                }}>
                  <div style={{
                    fontSize: 11,
                    letterSpacing: "0.18em",
                    textTransform: "uppercase",
                    color: window.CREAM_FAINT,
                    fontWeight: 500,
                  }}>
                    By sending you agree to our <a href="/privacy-policy" style={{ color: window.CREAM_DIM, borderBottom: "1px solid rgba(255,250,238,0.20)" }}>privacy policy</a>.
                  </div>
                  <button type="submit" className="btn btn-gold" disabled={sending}
                    style={{ height: 46, padding: "0 28px", opacity: sending ? 0.6 : 1, cursor: sending ? "default" : "pointer" }}>
                    {sending ? "Sending…" : "Send message →"}
                  </button>
                </div>
                {error && (
                  <div style={{ marginTop: 16, fontSize: 13, lineHeight: 1.5, color: "#ff8a8a" }}>{error}</div>
                )}
              </form>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
          color: rgba(255,250,238,0.32);
        }
        @media (max-width: 640px) {
          .contact-grid { grid-template-columns: 1fr; gap: 22px; }
        }
      `}</style>
    </section>
  );
}

window.SectionContact = SectionContact;
window.SectionTiers = SectionTiers;
window.SectionExit = SectionExit;
window.SectionContact = SectionContact;