/* global React, ReactDOM */
const { useState } = React;

const YOUTUBE_URL = "https://www.youtube.com/@TheDailyTraderPierre";
const DASHBOARD_URL = "https://10xstocks.trendawareinvestor.com";
const WEB3FORMS_KEY = "a36511fa-5516-4e6d-b1b1-8ed8137cb162";

const TIERS = [
  {
    name: "Just Thank you",
    price: "C$2.99",
    blurb: "Support the channel",
    perks: ["Loyalty badges", "Custom emoji", "Members-only polls"],
    href: YOUTUBE_URL + "/membership",
    featured: false,
  },
  {
    name: "5 videos per week",
    price: "C$12.99",
    blurb: "More content",
    perks: ["Members-only videos", "Everything in Just Thank you"],
    href: YOUTUBE_URL + "/membership",
    featured: false,
  },
  {
    name: "Copy Pierre's lines",
    price: "C$79.99",
    blurb: "Pierre's research",
    perks: ["Pierre's watchlist + trendlines", "Everything in 5 videos per week"],
    href: YOUTUBE_URL + "/membership",
    featured: false,
  },
  {
    name: "Daily chart buy alerts",
    price: "C$149.99",
    blurb: "The timing layer",
    perks: ["Exclusive Stock BUY signals", "Everything in Copy Pierre's lines"],
    href: YOUTUBE_URL + "/membership",
    featured: false,
  },
  {
    name: "Private Discord Server",
    price: "C$249.99",
    blurb: "Trade alongside the community",
    perks: ["Members-only Discord access", "Live discussion of setups", "Everything in Daily chart buy alerts"],
    href: YOUTUBE_URL + "/membership",
    featured: true,
  },
];

// ============ Candlestick chart background (reused from dashboard) ============
function ChartBackground({ opacity = 0.5 }) {
  const W = 1400, H = 220, candles = 120, volatility = 1.2, seed = 42;
  const padTop = 16, padBottom = 50, padRight = 48;
  const chartH = H - padTop - padBottom;
  const chartW = W - padRight;

  const data = React.useMemo(() => {
    let s = seed;
    const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    let price = 100;
    let trend = 0.05;
    const out = [];
    for (let i = 0; i < candles; i++) {
      if (i > 0 && i % 20 === 0) trend = (rand() - 0.4) * 0.4;
      const drift = trend;
      const vol = (rand() - 0.5) * 2.5 * volatility;
      const open = price;
      const close = Math.max(20, open + drift + vol);
      const wick = Math.abs(close - open) * (1 + rand() * 1.5) + rand() * 1.5 * volatility;
      const high = Math.max(open, close) + rand() * wick;
      const low = Math.min(open, close) - rand() * wick;
      const volume = (Math.abs(close - open) * 8 + rand() * 4) * (0.5 + Math.abs(vol) * 0.3);
      out.push({ open, close, high, low, volume });
      price = close;
    }
    return out;
  }, []);

  const allPrices = data.flatMap(d => [d.high, d.low]);
  const pMin = Math.min(...allPrices);
  const pMax = Math.max(...allPrices);
  const pRange = (pMax - pMin) || 1;
  const yScale = p => padTop + chartH * (1 - (p - pMin) / pRange);
  const candleW = chartW / candles;
  const bodyW = Math.max(1, candleW * 0.65);

  const ma = data.map((_, i) => {
    const win = data.slice(Math.max(0, i - 19), i + 1);
    return win.reduce((a, b) => a + b.close, 0) / win.length;
  });
  const maPath = ma.map((v, i) => `${i === 0 ? "M" : "L"}${(i * candleW + candleW / 2).toFixed(1)},${yScale(v).toFixed(1)}`).join(" ");
  const maxVol = Math.max(...data.map(d => d.volume));
  const volH = 30;
  const volTop = H - padBottom + 14;

  const upColor = "#e8f0f7";
  const downColor = "#7fa3c4";
  const wickColor = "#a8c4dc";
  const maColor = "rgba(255,255,255,0.6)";

  return (
    <svg width="100%" height="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0, opacity }}>
      {data.map((d, i) => {
        const cx = i * candleW + candleW / 2;
        const isUp = d.close >= d.open;
        const bodyTop = yScale(Math.max(d.open, d.close));
        const bodyBot = yScale(Math.min(d.open, d.close));
        const bodyH = Math.max(0.5, bodyBot - bodyTop);
        return (
          <g key={i}>
            <line x1={cx} y1={yScale(d.high)} x2={cx} y2={yScale(d.low)} stroke={wickColor} strokeWidth="0.6" />
            <rect x={cx - bodyW / 2} y={bodyTop} width={bodyW} height={bodyH}
              fill={isUp ? upColor : downColor} stroke={isUp ? wickColor : downColor} strokeWidth="0.4" />
          </g>
        );
      })}
      <path d={maPath} fill="none" stroke={maColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      {data.map((d, i) => {
        const cx = i * candleW + candleW / 2;
        const h = (d.volume / maxVol) * volH;
        const isUp = d.close >= d.open;
        return <rect key={"v" + i} x={cx - bodyW / 2} y={volTop + (volH - h)} width={bodyW} height={h}
          fill={isUp ? upColor : downColor} opacity="0.5" />;
      })}
    </svg>
  );
}

// ============ Top nav ============
function Nav() {
  return (
    <nav style={s.nav}>
      <div style={s.navInner}>
        <a href="/" style={s.navBrand}>
          <span style={s.navMark}>
            <svg width="20" height="20" viewBox="0 0 32 32"><path d="M6 24 L12 16 L18 20 L26 8" stroke="#5b8db8" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
          <span style={s.navName}>Trend-Aware</span>
        </a>
        <div style={s.navLinks}>
          <a href={DASHBOARD_URL} style={s.navLink}>The Index</a>
          <a href={YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={s.navLink}>YouTube</a>
          <a href="#memberships" style={s.navLink}>Memberships</a>
          <a href={YOUTUBE_URL + "/membership"} target="_blank" rel="noopener noreferrer" style={s.navJoin}>Join</a>
        </div>
      </div>
    </nav>
  );
}

// ============ Hero ============
function Hero() {
  return (
    <section style={s.hero}>
      <div style={s.heroBg}><ChartBackground opacity={0.45} /></div>
      <div style={s.heroInner}>
        <div style={s.heroLeft}>
          <div style={s.heroKicker}>The Trend-Aware Investor</div>
          <h1 style={s.heroH1}>
            <span style={{ color: "#fff" }}>Don't try to</span><br />
            <span style={s.heroH1Accent}>predict.</span>{" "}
            <span style={{ color: "#fff" }}>Follow.</span>
          </h1>
          <p style={s.heroLede}>
            Technical analysis-first trading, deepened with fundamental scoring. Daily videos, quarterly research, and a community trading what the chart actually says — not what the headlines want.
          </p>
          <div style={s.heroCtas}>
            <a href={YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={s.btnPrimary}>Watch on YouTube →</a>
            <a href={DASHBOARD_URL} style={s.btnSecondary}>Open the index →</a>
          </div>
          <div style={s.heroProof}>
            <span style={s.proofItem}><strong>16,400+</strong> traders</span>
            <span style={s.proofDot} />
            <span style={s.proofItem}><strong>2,000+</strong> videos</span>
            <span style={s.proofDot} />
            <span style={s.proofItem}><strong>Since 2021</strong></span>
          </div>
        </div>
        <div style={s.heroRight}>
          <div style={s.heroAvatar}>
            <img src="pierre.jpeg" alt="Pierre" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div style={s.heroAvatarLabel}>Pierre Roberge</div>
          <div style={s.heroAvatarSub}>Founder · The Trend-Aware Investor</div>
        </div>
      </div>
    </section>
  );
}

// ============ Three Things ============
function ThreeThings() {
  const items = [
    {
      kicker: "Daily",
      title: "Charts on YouTube",
      body: "Daily videos breaking down setups, support and resistance, and the moves I'm tracking in real time. Free.",
      cta: "Watch on YouTube →",
      href: YOUTUBE_URL,
    },
    {
      kicker: "Quarterly",
      title: "The 10x Index",
      body: "27 stocks scored across 13 criteria, refreshed every earnings season. A fundamental filter for the universe of trade-able names.",
      cta: "Open the index →",
      href: DASHBOARD_URL,
    },
    {
      kicker: "From C$2.99",
      title: "Memberships",
      body: "From a thank-you tier to the private Discord — five levels of access for traders who want to go deeper than YouTube alone.",
      cta: "See memberships ↓",
      href: "#memberships",
    },
  ];
  return (
    <section style={s.three}>
      <div style={s.sectionInner}>
        <div style={s.sectionHead}>
          <div style={s.sectionKicker}>What you'll find here</div>
          <h2 style={s.h2}>Three doors. Pick the one that fits where you are.</h2>
        </div>
        <div style={s.threeGrid}>
          {items.map((it, i) => (
            <div key={i} style={s.threeCard}>
              <div style={s.threeKicker}>{it.kicker}</div>
              <h3 style={s.threeTitle}>{it.title}</h3>
              <p style={s.threeBody}>{it.body}</p>
              <a href={it.href} target={it.href.startsWith("http") ? "_blank" : undefined}
                rel="noopener noreferrer" style={s.threeCta}>{it.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Latest from YouTube ============
function LatestVideo() {
  return (
    <section style={s.latest}>
      <div style={s.sectionInner}>
        <div style={s.latestGrid}>
          <div style={s.latestLeft}>
            <div style={s.sectionKicker}>The channel</div>
            <h2 style={s.h2}>New chart breakdowns. Every day.</h2>
            <p style={s.latestLede}>
              The channel has been running daily since February 2021 — over 2,000 videos covering individual setups, market context, breakouts, breakdowns, and the discipline of waiting for confirmation before acting.
            </p>
            <p style={s.latestBody}>
              If you've never watched, start with the most recent upload. The pace and the framework will be obvious within five minutes.
            </p>
            <a href={YOUTUBE_URL + "/videos"} target="_blank" rel="noopener noreferrer" style={s.btnDarkPrimary}>
              See the latest videos →
            </a>
          </div>
          <div style={s.latestRight}>
            <a href={YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={s.channelCard}>
              <div style={s.channelCardTop}>
                <div style={s.channelLogoCircle}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M21.582 6.186a2.506 2.506 0 0 0-1.768-1.768C18.254 4 12 4 12 4s-6.254 0-7.814.418A2.506 2.506 0 0 0 2.418 6.186C2 7.746 2 12 2 12s0 4.254.418 5.814a2.506 2.506 0 0 0 1.768 1.768C5.746 20 12 20 12 20s6.254 0 7.814-.418a2.506 2.506 0 0 0 1.768-1.768C22 16.254 22 12 22 12s0-4.254-.418-5.814zM10 15.464V8.536L16 12l-6 3.464z" /></svg>
                </div>
                <div>
                  <div style={s.channelName}>The Trend-Aware Investor</div>
                  <div style={s.channelHandle}>@TheDailyTraderPierre</div>
                </div>
              </div>
              <div style={s.channelStats}>
                <div style={s.channelStat}>
                  <div style={s.channelStatNum}>16.4K</div>
                  <div style={s.channelStatLabel}>Subscribers</div>
                </div>
                <div style={s.channelStat}>
                  <div style={s.channelStatNum}>2,059</div>
                  <div style={s.channelStatLabel}>Videos</div>
                </div>
                <div style={s.channelStat}>
                  <div style={s.channelStatNum}>2.7M</div>
                  <div style={s.channelStatLabel}>Views</div>
                </div>
              </div>
              <div style={s.channelCta}>Open YouTube channel →</div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Index Preview ============
function IndexPreview() {
  return (
    <section style={s.idx}>
      <div style={s.sectionInner}>
        <div style={s.idxGrid}>
          <div style={s.idxLeft}>
            <div style={s.idxBadge}>FREE TOOL</div>
            <h2 style={s.h2}>The 10x Index — fundamental filter for trade-able names.</h2>
            <p style={s.idxLede}>
              27 stocks across megatrend themes — AI silicon, nuclear, quantum, defense autonomy, fintech — scored across 13 growth-skewed criteria. Refreshed automatically after each earnings season.
            </p>
            <ul style={s.idxList}>
              <li><strong>13 criteria, 100 points.</strong> Inspired by Tom Nash's lens on operating quality.</li>
              <li><strong>Growth-skewed weighting.</strong> Half the score comes from the growth engine.</li>
              <li><strong>Tier bands and position sizing.</strong> Every name has a recommended sizing posture.</li>
              <li><strong>Quarterly auto-refresh.</strong> Score moves and email briefings every Feb / May / Aug / Nov.</li>
            </ul>
            <a href={DASHBOARD_URL} style={s.btnDarkPrimary}>Open the index →</a>
            <div style={s.idxNote}>
              Selection is half the game. The index narrows the universe — technical analysis on the channel handles the timing.
            </div>
          </div>
          <div style={s.idxRight}>
            <div style={s.previewCard}>
              <div style={s.previewHeader}>
                <span style={s.previewDots}>
                  <span style={{ ...s.previewDot, background: "#ff5f56" }} />
                  <span style={{ ...s.previewDot, background: "#ffbd2e" }} />
                  <span style={{ ...s.previewDot, background: "#27c93f" }} />
                </span>
                <span style={s.previewUrl}>10xstocks.trendawareinvestor.com</span>
              </div>
              <div style={s.previewBody}>
                <div style={s.previewBigNum}>67</div>
                <div style={s.previewBigLabel}>Average score across 27 stocks</div>
                <div style={s.previewBars}>
                  <div style={{ ...s.previewBar, width: "92%", background: "#0a875a" }}><span style={s.previewBarText}>AEVA · 95</span></div>
                  <div style={{ ...s.previewBar, width: "85%", background: "#0a875a" }}><span style={s.previewBarText}>CRDO · 85</span></div>
                  <div style={{ ...s.previewBar, width: "80%", background: "#0570de" }}><span style={s.previewBarText}>SOFI · 80</span></div>
                  <div style={{ ...s.previewBar, width: "80%", background: "#0570de" }}><span style={s.previewBarText}>SYM · 80</span></div>
                  <div style={{ ...s.previewBar, width: "75%", background: "#0570de" }}><span style={s.previewBarText}>SMCI · 75</span></div>
                  <div style={{ ...s.previewBar, width: "70%", background: "#0570de" }}><span style={s.previewBarText}>HIMS · 70</span></div>
                </div>
                <div style={s.previewFooter}>Q1 2026 · v2 framework · refreshed Apr 27</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Memberships ============
function Memberships() {
  return (
    <section style={s.mem} id="memberships">
      <div style={s.sectionInner}>
        <div style={s.sectionHead}>
          <div style={s.sectionKicker}>Memberships</div>
          <h2 style={s.h2}>Five levels of access.</h2>
          <p style={s.memLede}>
            Free YouTube content is the top of the funnel. The membership tiers go deeper — from members-only videos all the way up to the private Discord where the real conversations happen.
          </p>
        </div>
        <div style={s.memGrid}>
          {TIERS.map((t, i) => (
            <div key={i} style={{ ...s.memCard, ...(t.featured ? s.memCardFeatured : {}) }}>
              {t.featured && <div style={s.memBadge}>RECOMMENDED</div>}
              <div style={s.memTierName}>{t.name}</div>
              <div style={s.memBlurb}>{t.blurb}</div>
              <div style={s.memPriceRow}>
                <span style={s.memPrice}>{t.price}</span>
                <span style={s.memPriceUnit}>/month</span>
              </div>
              <ul style={s.memPerks}>
                {t.perks.map((p, j) => (
                  <li key={j} style={s.memPerk}>
                    <span style={s.memCheck}>✓</span>
                    {p}
                  </li>
                ))}
              </ul>
              <a href={t.href} target="_blank" rel="noopener noreferrer"
                style={t.featured ? s.memCtaFeatured : s.memCta}>
                Join {t.featured ? "the Discord" : "this tier"} →
              </a>
            </div>
          ))}
        </div>
        <div style={s.memMeta}>Prices in CAD. Memberships are managed through YouTube — cancel anytime, no contract.</div>
      </div>
    </section>
  );
}

// ============ About ============
function About() {
  return (
    <section style={s.about}>
      <div style={s.sectionInner}>
        <div style={s.aboutGrid}>
          <div style={s.aboutLeft}>
            <div style={s.aboutAvatar}>
              <img src="pierre.jpeg" alt="Pierre" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={s.aboutName}>Pierre Roberge</div>
            <div style={s.aboutRole}>Founder · The Trend-Aware Investor</div>
            <a href={YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={s.aboutLink}>
              youtube.com/@TheDailyTraderPierre →
            </a>
          </div>
          <div style={s.aboutRight}>
            <div style={s.sectionKicker}>About</div>
            <h2 style={s.h2}>The philosophy, in plain terms.</h2>
            <div style={s.aboutBody}>
              <p>Welcome. I run The Trend-Aware Investor — a channel built on a simple idea: don't try to predict the market, follow it.</p>
              <p>Most traders fail because they cling to stocks based on hope, news, or fundamentals when the chart is screaming the opposite. Tesla can crush earnings and the stock still drops — because institutions are rotating, or future growth is in question, or the chart simply isn't ready. <strong>The chart tells you what's actually happening.</strong></p>
              <p>I focus on support, resistance, and the dynamics between buyers and sellers. I find the levels where the market is decided, then trade in alignment with what I see — not what I want to see.</p>
              <p>In 2026 I added a fundamental scoring layer to filter the universe before I look at charts. The 10x Index on this site is the result. But selection is only half the game. Timing — knowing when to act on a stock that scores well — is what separates a great idea from a real return.</p>
              <p>That's what I cover daily on YouTube, and what the membership tiers go deeper on. Welcome.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Newsletter ============
function Newsletter() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    if (!email || status === "submitting") return;
    setStatus("submitting");
    setError("");
    try {
      const fd = new FormData();
      fd.append("access_key", WEB3FORMS_KEY);
      fd.append("email", email);
      fd.append("subject", "New subscriber — The Trend-Aware Investor");
      fd.append("from_name", "Trend-Aware Investor");
      fd.append("source", "trendawareinvestor.com");
      const r = await fetch("https://api.web3forms.com/submit", { method: "POST", body: fd });
      const d = await r.json();
      if (d.success) { setStatus("success"); setEmail(""); }
      else { setStatus("error"); setError(d.message || "Submission failed."); }
    } catch (err) {
      setStatus("error");
      setError("Network error. Try again.");
    }
  }

  return (
    <section style={s.news}>
      <div style={s.sectionInner}>
        <div style={s.newsGrid}>
          <div style={s.newsLeft}>
            <div style={s.newsKicker}>Quarterly briefing</div>
            <h2 style={s.newsH2}>The next index refresh, in your inbox.</h2>
            <p style={s.newsLede}>
              Every quarter, when the dashboard refreshes after earnings season, subscribers get a short briefing — biggest score moves, tier changes, and the bull/bear callouts. Nothing else.
            </p>
            <div style={s.newsTiny}>No spam. Unsubscribe anytime. ~4 emails per year.</div>
          </div>
          <form style={s.newsForm} onSubmit={handleSubmit}>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)}
              placeholder="you@yourname.com" required
              disabled={status === "submitting" || status === "success"}
              style={s.newsInput} />
            <button type="submit" disabled={status === "submitting" || status === "success"}
              style={{ ...s.newsBtn, ...((status === "submitting" || status === "success") ? s.newsBtnDisabled : {}) }}>
              {status === "submitting" ? "Subscribing…" : status === "success" ? "Subscribed ✓" : "Subscribe"}
            </button>
            {status === "success" && <div style={s.newsSuccess}>You're on the list. See you next quarter.</div>}
            {status === "error" && <div style={s.newsError}>{error}</div>}
          </form>
        </div>
      </div>
    </section>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer style={s.foot}>
      <div style={s.sectionInner}>
        <div style={s.footGrid}>
          <div>
            <div style={s.footBrand}>
              <span style={s.navMark}>
                <svg width="20" height="20" viewBox="0 0 32 32"><path d="M6 24 L12 16 L18 20 L26 8" stroke="#5b8db8" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
              <span style={s.navName}>The Trend-Aware Investor</span>
            </div>
            <div style={s.footTagline}>Don't try to predict. Follow.</div>
          </div>
          <div style={s.footCols}>
            <div style={s.footCol}>
              <div style={s.footColHead}>Content</div>
              <a href={YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={s.footLink}>YouTube channel</a>
              <a href={YOUTUBE_URL + "/videos"} target="_blank" rel="noopener noreferrer" style={s.footLink}>Latest videos</a>
              <a href={YOUTUBE_URL + "/playlists"} target="_blank" rel="noopener noreferrer" style={s.footLink}>Playlists</a>
            </div>
            <div style={s.footCol}>
              <div style={s.footColHead}>Tools</div>
              <a href={DASHBOARD_URL} style={s.footLink}>The 10x Index</a>
              <a href="#memberships" style={s.footLink}>Memberships</a>
              <a href={YOUTUBE_URL + "/membership"} target="_blank" rel="noopener noreferrer" style={s.footLink}>Join</a>
            </div>
          </div>
        </div>
        <div style={s.footBottom}>
          <span>© {new Date().getFullYear()} The Trend-Aware Investor. Educational content — not financial advice.</span>
          <span>Built with care.</span>
        </div>
      </div>
    </footer>
  );
}

// ============ HomePage root ============
function HomePage() {
  return (
    <div style={s.root}>
      <Nav />
      <Hero />
      <ThreeThings />
      <LatestVideo />
      <IndexPreview />
      <Memberships />
      <About />
      <Newsletter />
      <Footer />
    </div>
  );
}

window.HomePage = HomePage;

// ============ Styles ============
const s = {
  root: {
    background: "#fbfaf6",
    color: "#0a2540",
    minHeight: "100%",
    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
    fontSize: 14,
  },

  /* Nav */
  nav: {
    background: "rgba(251,250,246,0.95)",
    backdropFilter: "blur(8px)",
    borderBottom: "1px solid #e3e8ee",
    position: "sticky",
    top: 0,
    zIndex: 50,
  },
  navInner: {
    maxWidth: 1200,
    margin: "0 auto",
    padding: "16px 32px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  navBrand: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    textDecoration: "none",
    color: "#0a2540",
  },
  navMark: { display: "flex", alignItems: "center" },
  navName: { fontSize: 15, fontWeight: 700, letterSpacing: "-0.01em" },
  navLinks: { display: "flex", alignItems: "center", gap: 28 },
  navLink: {
    fontSize: 14, fontWeight: 500, color: "#425466",
    textDecoration: "none",
  },
  navJoin: {
    fontSize: 14, fontWeight: 600, color: "#fff",
    background: "#0a2540",
    padding: "8px 18px", borderRadius: 6,
    textDecoration: "none",
  },

  /* Hero */
  hero: {
    position: "relative",
    background: "linear-gradient(180deg, #5b8db8 0%, #4a7ba8 50%, #3a6d92 100%)",
    overflow: "hidden",
    minHeight: 540,
  },
  heroBg: { position: "absolute", inset: 0 },
  heroInner: {
    position: "relative",
    maxWidth: 1200,
    margin: "0 auto",
    padding: "80px 32px 88px",
    display: "grid",
    gridTemplateColumns: "1.4fr 1fr",
    gap: 64,
    alignItems: "center",
  },
  heroLeft: {},
  heroKicker: {
    display: "inline-block",
    fontSize: 12, fontWeight: 700, color: "rgba(255,255,255,0.9)",
    letterSpacing: "0.1em", textTransform: "uppercase",
    marginBottom: 24,
    background: "rgba(255,255,255,0.12)",
    padding: "6px 14px", borderRadius: 4,
  },
  heroH1: {
    margin: 0,
    fontSize: 76,
    fontWeight: 800,
    letterSpacing: "-0.035em",
    lineHeight: 1.0,
    color: "#fff",
    textShadow: "0 2px 4px rgba(10,37,64,0.15)",
  },
  heroH1Accent: {
    color: "#0a2540",
    fontStyle: "italic",
    background: "rgba(255,255,255,0.85)",
    padding: "0 12px",
    borderRadius: 6,
    display: "inline-block",
  },
  heroLede: {
    fontSize: 18, color: "rgba(255,255,255,0.92)",
    lineHeight: 1.55,
    marginTop: 24, marginBottom: 32, maxWidth: 580,
    textShadow: "0 1px 2px rgba(10,37,64,0.2)",
  },
  heroCtas: { display: "flex", gap: 12, flexWrap: "wrap" },
  btnPrimary: {
    background: "#fff", color: "#0a2540",
    padding: "14px 22px", borderRadius: 8,
    fontSize: 15, fontWeight: 700,
    textDecoration: "none", display: "inline-block",
    boxShadow: "0 4px 12px rgba(10,37,64,0.2)",
  },
  btnSecondary: {
    background: "rgba(10,37,64,0.55)", color: "#fff",
    padding: "14px 22px", borderRadius: 8,
    fontSize: 15, fontWeight: 600,
    textDecoration: "none", display: "inline-block",
    border: "1px solid rgba(255,255,255,0.3)",
  },
  btnDarkPrimary: {
    background: "#0a2540", color: "#fff",
    padding: "14px 24px", borderRadius: 8,
    fontSize: 15, fontWeight: 600,
    textDecoration: "none", display: "inline-block",
  },
  heroProof: {
    display: "flex", alignItems: "center", gap: 16,
    marginTop: 32, fontSize: 13, color: "rgba(255,255,255,0.85)",
    flexWrap: "wrap",
  },
  proofItem: {},
  proofDot: { width: 4, height: 4, borderRadius: 999, background: "rgba(255,255,255,0.5)" },

  heroRight: {
    display: "flex", flexDirection: "column", alignItems: "center",
  },
  heroAvatar: {
    width: 200, height: 200, borderRadius: "50%", overflow: "hidden",
    border: "4px solid #fff",
    boxShadow: "0 8px 24px rgba(10,37,64,0.3)",
  },
  heroAvatarLabel: {
    fontSize: 18, fontWeight: 700, color: "#fff",
    marginTop: 18, textShadow: "0 1px 2px rgba(10,37,64,0.3)",
  },
  heroAvatarSub: {
    fontSize: 13, color: "rgba(255,255,255,0.85)",
    marginTop: 4, letterSpacing: "0.02em",
  },

  /* Section shared */
  sectionInner: {
    maxWidth: 1200,
    margin: "0 auto",
    padding: "0 32px",
  },
  sectionHead: { marginBottom: 40, maxWidth: 700 },
  sectionKicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    background: "#e8eff6",
    padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 16,
  },
  h2: {
    margin: 0,
    fontSize: 42,
    fontWeight: 800,
    letterSpacing: "-0.025em",
    lineHeight: 1.1,
    color: "#0a2540",
  },

  /* Three Things */
  three: { padding: "88px 0", background: "#fbfaf6" },
  threeGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 16,
  },
  threeCard: {
    background: "#fff",
    border: "1px solid #e3e8ee",
    borderRadius: 14,
    padding: "32px 28px",
    display: "flex",
    flexDirection: "column",
    transition: "border-color 0.15s, box-shadow 0.15s",
    boxShadow: "0 1px 2px rgba(10,37,64,0.04)",
  },
  threeKicker: {
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 14,
  },
  threeTitle: {
    margin: "0 0 12px",
    fontSize: 26, fontWeight: 800, color: "#0a2540",
    letterSpacing: "-0.02em", lineHeight: 1.15,
  },
  threeBody: {
    fontSize: 14, color: "#425466", lineHeight: 1.6,
    marginTop: 0, marginBottom: 24, flex: 1,
  },
  threeCta: {
    fontSize: 14, fontWeight: 600, color: "#3a6d92",
    textDecoration: "none",
  },

  /* Latest video */
  latest: { padding: "88px 0", background: "#fff", borderTop: "1px solid #e3e8ee" },
  latestGrid: {
    display: "grid",
    gridTemplateColumns: "1.2fr 1fr",
    gap: 64,
    alignItems: "center",
  },
  latestLeft: {},
  latestLede: {
    fontSize: 18, color: "#0a2540", fontWeight: 600,
    lineHeight: 1.5, marginTop: 16, marginBottom: 18, maxWidth: 540,
  },
  latestBody: {
    fontSize: 15, color: "#425466", lineHeight: 1.65,
    marginTop: 0, marginBottom: 28, maxWidth: 540,
  },
  latestRight: {},
  channelCard: {
    display: "block",
    background: "#0a2540",
    color: "#fff",
    borderRadius: 14,
    padding: "28px 28px 24px",
    textDecoration: "none",
    boxShadow: "0 8px 24px rgba(10,37,64,0.15)",
    transition: "transform 0.15s",
  },
  channelCardTop: { display: "flex", alignItems: "center", gap: 14, marginBottom: 28 },
  channelLogoCircle: {
    width: 48, height: 48, borderRadius: 999,
    background: "#ff0000",
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  channelName: { fontSize: 16, fontWeight: 700, color: "#fff" },
  channelHandle: { fontSize: 12, color: "#a3acb9", fontFamily: "'JetBrains Mono', monospace", marginTop: 2 },
  channelStats: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 12,
    paddingTop: 20,
    borderTop: "1px solid rgba(255,255,255,0.12)",
    marginBottom: 24,
  },
  channelStat: {},
  channelStatNum: {
    fontSize: 26, fontWeight: 800, color: "#fff",
    letterSpacing: "-0.02em", lineHeight: 1,
    fontVariantNumeric: "tabular-nums",
  },
  channelStatLabel: {
    fontSize: 11, color: "#a3acb9", marginTop: 4,
    letterSpacing: "0.04em",
  },
  channelCta: {
    fontSize: 14, fontWeight: 600, color: "#5b8db8",
    paddingTop: 16,
    borderTop: "1px solid rgba(255,255,255,0.12)",
  },

  /* Index preview */
  idx: { padding: "88px 0", background: "#fbfaf6", borderTop: "1px solid #e3e8ee" },
  idxGrid: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 64,
    alignItems: "center",
  },
  idxLeft: {},
  idxBadge: {
    display: "inline-block",
    fontSize: 10, fontWeight: 800, color: "#0a875a",
    background: "#ecfdf5",
    padding: "5px 12px", borderRadius: 999,
    letterSpacing: "0.1em", textTransform: "uppercase",
    marginBottom: 16,
  },
  idxLede: {
    fontSize: 17, color: "#425466",
    lineHeight: 1.6, marginTop: 18, marginBottom: 24, maxWidth: 540,
  },
  idxList: {
    margin: "0 0 28px", padding: 0, listStyle: "none",
    fontSize: 14, color: "#425466",
  },
  idxNote: {
    fontSize: 13, color: "#697386", lineHeight: 1.5,
    marginTop: 16, fontStyle: "italic",
    paddingLeft: 14, borderLeft: "2px solid #5b8db8",
  },
  idxRight: { display: "flex", justifyContent: "center" },
  previewCard: {
    background: "#fff",
    border: "1px solid #e3e8ee",
    borderRadius: 12,
    overflow: "hidden",
    width: "100%",
    maxWidth: 460,
    boxShadow: "0 12px 36px rgba(10,37,64,0.08)",
  },
  previewHeader: {
    display: "flex", alignItems: "center", gap: 12,
    background: "#f6f8fa", padding: "12px 16px",
    borderBottom: "1px solid #e3e8ee",
  },
  previewDots: { display: "flex", gap: 6 },
  previewDot: { width: 12, height: 12, borderRadius: 999 },
  previewUrl: {
    fontSize: 12, color: "#697386",
    fontFamily: "'JetBrains Mono', monospace",
  },
  previewBody: { padding: "28px 28px 24px" },
  previewBigNum: {
    fontSize: 64, fontWeight: 800, color: "#0a2540",
    letterSpacing: "-0.04em", lineHeight: 1,
    fontVariantNumeric: "tabular-nums",
  },
  previewBigLabel: {
    fontSize: 13, color: "#697386",
    marginTop: 4, marginBottom: 24,
  },
  previewBars: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 16 },
  previewBar: {
    height: 26,
    borderRadius: 4,
    display: "flex", alignItems: "center", paddingLeft: 10,
  },
  previewBarText: {
    fontSize: 11, fontWeight: 700, color: "#fff",
    fontFamily: "'JetBrains Mono', monospace",
    letterSpacing: "0.02em",
  },
  previewFooter: {
    fontSize: 11, color: "#8898aa",
    fontFamily: "'JetBrains Mono', monospace",
    paddingTop: 12, borderTop: "1px solid #f0eeed",
  },

  /* Memberships */
  mem: { padding: "96px 0", background: "#fff", borderTop: "1px solid #e3e8ee" },
  memLede: {
    fontSize: 17, color: "#425466",
    lineHeight: 1.6, marginTop: 18, marginBottom: 0, maxWidth: 660,
  },
  memGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(5, 1fr)",
    gap: 14,
    alignItems: "stretch",
  },
  memCard: {
    background: "#fff",
    border: "1px solid #e3e8ee",
    borderRadius: 12,
    padding: "24px 22px",
    display: "flex",
    flexDirection: "column",
    position: "relative",
    transition: "transform 0.15s, box-shadow 0.15s",
    boxShadow: "0 1px 2px rgba(10,37,64,0.04)",
  },
  memCardFeatured: {
    background: "#0a2540",
    color: "#fff",
    border: "1px solid #0a2540",
    transform: "translateY(-12px)",
    boxShadow: "0 16px 40px rgba(10,37,64,0.25)",
  },
  memBadge: {
    position: "absolute",
    top: -12, left: 22,
    fontSize: 10, fontWeight: 800,
    background: "#5b8db8",
    color: "#fff",
    padding: "5px 12px",
    borderRadius: 999,
    letterSpacing: "0.1em",
  },
  memTierName: {
    fontSize: 17, fontWeight: 800,
    letterSpacing: "-0.01em",
    color: "inherit",
  },
  memBlurb: {
    fontSize: 12, color: "#697386",
    marginTop: 4, marginBottom: 18,
  },
  memPriceRow: {
    display: "flex", alignItems: "baseline", gap: 4,
    marginBottom: 18,
    paddingBottom: 18,
    borderBottom: "1px solid #f0eeed",
  },
  memPrice: {
    fontSize: 28, fontWeight: 800,
    letterSpacing: "-0.02em",
    fontVariantNumeric: "tabular-nums",
  },
  memPriceUnit: {
    fontSize: 12, color: "#8898aa",
  },
  memPerks: {
    margin: 0, padding: 0, listStyle: "none",
    flex: 1, marginBottom: 22,
  },
  memPerk: {
    fontSize: 13,
    lineHeight: 1.5,
    marginBottom: 8,
    display: "flex", gap: 10,
    color: "inherit",
  },
  memCheck: {
    color: "#0a875a",
    fontWeight: 700,
    flexShrink: 0,
  },
  memCta: {
    background: "#fff",
    color: "#0a2540",
    padding: "10px 14px",
    borderRadius: 6,
    fontSize: 13, fontWeight: 600,
    textDecoration: "none",
    textAlign: "center",
    border: "1px solid #d8dde3",
    transition: "all 0.15s",
  },
  memCtaFeatured: {
    background: "#5b8db8",
    color: "#fff",
    padding: "10px 14px",
    borderRadius: 6,
    fontSize: 13, fontWeight: 700,
    textDecoration: "none",
    textAlign: "center",
    border: "1px solid #5b8db8",
  },
  memMeta: {
    fontSize: 12, color: "#8898aa",
    marginTop: 32,
    textAlign: "center",
    fontFamily: "'JetBrains Mono', monospace",
  },

  /* About */
  about: { padding: "88px 0", background: "#f6f5f0", borderTop: "1px solid #e3e8ee" },
  aboutGrid: {
    display: "grid",
    gridTemplateColumns: "0.7fr 1.3fr",
    gap: 72,
    alignItems: "start",
  },
  aboutLeft: { paddingTop: 12 },
  aboutAvatar: {
    width: 220, height: 220, borderRadius: "50%", overflow: "hidden",
    border: "4px solid #fff",
    boxShadow: "0 8px 24px rgba(10,37,64,0.15)",
    marginBottom: 20,
  },
  aboutName: { fontSize: 22, fontWeight: 800, color: "#0a2540", letterSpacing: "-0.01em" },
  aboutRole: { fontSize: 13, color: "#697386", marginTop: 4 },
  aboutLink: {
    display: "inline-block",
    marginTop: 20,
    fontSize: 13, color: "#3a6d92",
    fontFamily: "'JetBrains Mono', monospace",
    textDecoration: "none",
  },
  aboutRight: {},
  aboutBody: {
    marginTop: 28,
    fontSize: 16,
    color: "#0a2540",
    lineHeight: 1.7,
  },

  /* Newsletter */
  news: { padding: "80px 0", background: "#0a2540", color: "#fff" },
  newsGrid: {
    display: "grid",
    gridTemplateColumns: "1.2fr 1fr",
    gap: 64,
    alignItems: "center",
  },
  newsLeft: {},
  newsKicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#b1c1d6",
    background: "rgba(255,255,255,0.08)",
    padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 16,
  },
  newsH2: {
    margin: 0, fontSize: 36, fontWeight: 800,
    letterSpacing: "-0.025em", lineHeight: 1.1,
  },
  newsLede: {
    fontSize: 16, color: "#a3acb9", lineHeight: 1.6,
    marginTop: 14, marginBottom: 14, maxWidth: 480,
  },
  newsTiny: {
    fontSize: 12, color: "#7c8895",
    fontFamily: "'JetBrains Mono', monospace",
  },
  newsForm: { display: "flex", flexDirection: "column", gap: 10, maxWidth: 380 },
  newsInput: {
    background: "#fff", color: "#0a2540",
    border: "1px solid transparent",
    borderRadius: 8,
    padding: "14px 16px",
    fontSize: 15, fontFamily: "inherit",
    outline: "none",
  },
  newsBtn: {
    background: "#5b8db8", color: "#fff",
    border: "none", borderRadius: 8,
    padding: "14px 18px",
    fontSize: 15, fontWeight: 600,
    cursor: "pointer", fontFamily: "inherit",
  },
  newsBtnDisabled: { background: "#3a6d92", cursor: "default", opacity: 0.7 },
  newsSuccess: { fontSize: 13, color: "#7ed957", marginTop: 4, fontWeight: 500 },
  newsError: { fontSize: 13, color: "#ff8585", marginTop: 4, fontWeight: 500 },

  /* Footer */
  foot: { padding: "56px 0 32px", background: "#fafbfc", borderTop: "1px solid #e3e8ee" },
  footGrid: {
    display: "grid",
    gridTemplateColumns: "1.5fr 1fr",
    gap: 64,
    paddingBottom: 32,
    borderBottom: "1px solid #e3e8ee",
  },
  footBrand: { display: "flex", alignItems: "center", gap: 10 },
  footTagline: {
    fontSize: 14, color: "#697386",
    marginTop: 12,
    fontStyle: "italic",
  },
  footCols: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 32,
  },
  footCol: { display: "flex", flexDirection: "column", gap: 10 },
  footColHead: {
    fontSize: 11, fontWeight: 700, color: "#0a2540",
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 4,
  },
  footLink: {
    fontSize: 13, color: "#425466",
    textDecoration: "none",
  },
  footBottom: {
    display: "flex",
    justifyContent: "space-between",
    fontSize: 12, color: "#8898aa",
    paddingTop: 24,
    flexWrap: "wrap",
    gap: 12,
  },
};