/* Marketing — Nav + Hero + Ticker + Features + Pricing + Footer */

const Nav = ({ onLogoClick }) => (
  <header style={{
    position: "sticky", top: 0, zIndex: 50,
    height: 64, display: "flex", alignItems: "center", padding: "0 32px",
    background: "rgba(10,13,16,0.7)", backdropFilter: "blur(16px) saturate(1.4)",
    borderBottom: "1px solid var(--line-1)",
  }}>
    <div onClick={onLogoClick} style={{ display: "flex", alignItems: "center", gap: 10, cursor: onLogoClick ? "pointer" : "default" }}>
      <img src="assets/logo-mark.svg" width="28" height="28" alt=""/>
      <span style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>
        CryptoPrice<span style={{ color: "var(--brand-lime)" }}>.co</span>
      </span>
    </div>
    <nav style={{ marginLeft: 40, display: "flex", gap: 24 }}>
      {["Markets","Pricing","API","Docs","Blog"].map(l => (
        <a key={l} href="#" style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-1)", textDecoration: "none" }}>{l}</a>
      ))}
    </nav>
    <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }}>
      <a href="#" style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-1)", textDecoration: "none" }}>Sign in</a>
      <Button variant="primary" icon={<Icons.arrow size={14}/>}>Start tracking</Button>
    </div>
  </header>
);

const Hero = () => (
  <section style={{ padding: "100px 32px 80px", maxWidth: 1200, margin: "0 auto", position: "relative" }}>
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px", borderRadius: 999, background: "var(--bg-2)", border: "1px solid var(--line-2)", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 24 }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--up)", boxShadow: "0 0 0 3px rgba(0,200,150,0.2)" }}/>
      Live · Updated every 8 seconds
    </div>
    <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 80, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--fg-0)", maxWidth: 900 }}>
      Track every coin.<br/><span style={{ color: "var(--brand-lime)" }}>In real time.</span>
    </h1>
    <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: "var(--fg-1)", maxWidth: 580 }}>
      Live prices for the top 100 cryptocurrencies. Set alerts. Watch markets. Build a portfolio — without the noise.
    </p>
    <div style={{ marginTop: 32, display: "flex", gap: 12, alignItems: "center" }}>
      <Button variant="primary" size="lg" icon={<Icons.arrow size={16}/>}>Start tracking — free</Button>
      <Button variant="ghost" size="lg">View live markets →</Button>
    </div>
    <div style={{ marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
      No credit card · 100 coins free · 5 alerts free
    </div>
  </section>
);

const Ticker = ({ onSelectCoin }) => {
  const items = COINS.slice(0, 8);
  return (
    <section style={{ borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)", background: "var(--bg-1)", overflow: "hidden" }}>
      <div style={{ display: "flex", gap: 0, animation: "scroll 40s linear infinite", whiteSpace: "nowrap" }}>
        {[...items, ...items, ...items].map((c, i) => (
          <button key={i} onClick={() => onSelectCoin && onSelectCoin(c.symbol)}
            title={`Open ${c.name} page`}
            style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "16px 24px", borderRight: "1px solid var(--line-1)",
              flexShrink: 0, background: "transparent", border: 0, borderRight: "1px solid var(--line-1)",
              cursor: "pointer", color: "inherit", fontFamily: "inherit",
              transition: "background 120ms var(--ease-out)",
            }}
            onMouseEnter={e => e.currentTarget.style.background = "var(--bg-2)"}
            onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
            <CoinLogo symbol={c.symbol} size={20}/>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-2)" }}>{c.symbol}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, color: "var(--fg-0)", fontVariantNumeric: "tabular-nums" }}>{fmtPrice(c.price)}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: c.c24h >= 0 ? "var(--up)" : "var(--down)", fontVariantNumeric: "tabular-nums" }}>
              {c.c24h >= 0 ? "▲ +" : "▼ −"}{Math.abs(c.c24h).toFixed(2)}%
            </span>
          </button>
        ))}
      </div>
      <style>{`@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }`}</style>
    </section>
  );
};

/* Featured coins grid — clickable cards under the hero */
const FeaturedCoins = ({ onSelectCoin }) => {
  const items = COINS.slice(0, 6);
  return (
    <section style={{ maxWidth: 1200, margin: "0 auto", padding: "80px 32px 0" }}>
      <div style={{ marginBottom: 24, display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brand-lime)", marginBottom: 8 }}>Top markets</div>
          <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>Tap any coin for live news + analysis</h2>
        </div>
        <a href="#" style={{ fontSize: 13, color: "var(--fg-1)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
          View all 100 coins <Icons.arrow size={14}/>
        </a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {items.map(c => (
          <button key={c.symbol} onClick={() => onSelectCoin(c.symbol)}
            style={{
              textAlign: "left", cursor: "pointer", padding: 20,
              background: "var(--bg-1)", border: "1px solid var(--line-2)", borderRadius: 12,
              display: "flex", alignItems: "center", gap: 16, color: "inherit", fontFamily: "inherit",
              transition: "border-color 120ms var(--ease-out)",
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = "var(--line-3)"}
            onMouseLeave={e => e.currentTarget.style.borderColor = "var(--line-2)"}>
            <CoinLogo symbol={c.symbol} size={40}/>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: "var(--fg-0)" }}>{c.name}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)" }}>{c.symbol}</span>
              </div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, fontWeight: 500, color: "var(--fg-0)", fontVariantNumeric: "tabular-nums" }}>{fmtPrice(c.price)}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, color: c.c24h >= 0 ? "var(--up)" : "var(--down)", fontVariantNumeric: "tabular-nums" }}>
                {c.c24h >= 0 ? "▲ +" : "▼ −"}{Math.abs(c.c24h).toFixed(2)}%
              </span>
              <div style={{ marginTop: 4, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>24h</div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
};

const Features = () => {
  const features = [
    { icon: <Icons.trend/>, title: "Real-time prices", desc: "Live data for the top 100 coins, refreshed every 8 seconds. Sub-second chart updates on Pro." },
    { icon: <Icons.bell/>,  title: "Smart alerts", desc: "Notify by email, push, or Telegram when a coin crosses your price. Five free, unlimited on Pro." },
    { icon: <Icons.wallet/>,title: "Portfolio tracking", desc: "Manual entry or wallet connect. See your allocation, P&L, and 24h change in one place." },
    { icon: <Icons.chart/>, title: "AI signals", desc: "Bullish / bearish indicators based on momentum and volume divergence. Pro." },
    { icon: <Icons.download/>, title: "Export anywhere", desc: "Download your portfolio and watchlist as CSV or Excel. No vendor lock-in." },
    { icon: <Icons.grid/>,  title: "Developer API", desc: "REST + WebSocket access to the same data that powers the app. Tiered pricing from $0." },
  ];
  return (
    <section style={{ padding: "100px 32px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brand-lime)", marginBottom: 12 }}>Features</div>
        <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.05, color: "var(--fg-0)" }}>Everything a serious tracker needs. None of the noise.</h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {features.map(f => (
          <div key={f.title} style={{ background: "var(--bg-1)", border: "1px solid var(--line-2)", borderRadius: 16, padding: 28 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-3)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--brand-lime)", marginBottom: 20 }}>
              {React.cloneElement(f.icon, { size: 18 })}
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: "var(--fg-0)", marginBottom: 8 }}>{f.title}</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--fg-2)" }}>{f.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const Pricing = () => {
  const tiers = [
    { name: "Free",   price: "$0",  period: "forever", desc: "For getting started.", features: ["Top 100 coins, real-time","5 price alerts","Basic watchlist","Email support"], cta: "Start free", variant: "secondary" },
    { name: "Pro",    price: "$10", period: "per month", featured: true, desc: "For active traders.", features: ["Everything in Free","Unlimited alerts (push, email, Telegram)","Portfolio tracking + wallet connect","AI bullish/bearish signals","CSV / Excel export","Priority support"], cta: "Start Pro trial", variant: "primary" },
    { name: "API",    price: "$49", period: "per month", desc: "For developers.", features: ["10K requests / day","REST + WebSocket","99.9% uptime SLA","Dedicated support"], cta: "Get API access", variant: "secondary" },
  ];
  return (
    <section style={{ padding: "100px 32px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ marginBottom: 56, textAlign: "center" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brand-lime)", marginBottom: 12 }}>Pricing</div>
        <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>Simple, fair, no asterisks.</h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, alignItems: "stretch" }}>
        {tiers.map(t => (
          <div key={t.name} style={{
            background: t.featured ? "var(--bg-2)" : "var(--bg-1)",
            border: `1px solid ${t.featured ? "var(--brand-lime)" : "var(--line-2)"}`,
            borderRadius: 16, padding: 28, position: "relative",
            boxShadow: t.featured ? "0 0 0 1px rgba(198,242,78,0.4), 0 12px 32px rgba(198,242,78,0.1)" : "none",
          }}>
            {t.featured && <span style={{ position: "absolute", top: -10, right: 24, padding: "3px 10px", background: "var(--brand-lime)", color: "var(--brand-ink)", borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.04em" }}>MOST POPULAR</span>}
            <div style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-2)", marginBottom: 8 }}>{t.name}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 6 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>{t.price}</span>
              <span style={{ fontSize: 13, color: "var(--fg-2)" }}>{t.period}</span>
            </div>
            <div style={{ fontSize: 13, color: "var(--fg-2)", marginBottom: 24 }}>{t.desc}</div>
            <Button variant={t.variant} style={{ width: "100%", justifyContent: "center", marginBottom: 24 }}>{t.cta}</Button>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {t.features.map(f => (
                <li key={f} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--fg-1)", lineHeight: 1.5 }}>
                  <span style={{ color: t.featured ? "var(--brand-lime)" : "var(--up)", flexShrink: 0, marginTop: 2 }}>✓</span>{f}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};

const Footer = () => (
  <footer style={{ borderTop: "1px solid var(--line-2)", background: "var(--bg-1)", padding: "48px 32px 32px", marginTop: 80 }}>
    <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr 1fr", gap: 32 }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
          <img src="assets/logo-mark.svg" width="24" height="24"/>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>CryptoPrice<span style={{ color: "var(--brand-lime)" }}>.co</span></span>
        </div>
        <div style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.6, maxWidth: 280 }}>Real-time crypto prices, alerts, and portfolio tracking. Built for clarity.</div>
      </div>
      {[
        ["Product", ["Markets","Watchlist","Portfolio","Alerts","API"]],
        ["Company", ["About","Blog","Careers","Press"]],
        ["Resources", ["Docs","Status","Changelog","Help"]],
        ["Legal", ["Privacy","Terms","Cookies","Disclaimer"]],
      ].map(([h, links]) => (
        <div key={h}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 14 }}>{h}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {links.map(l => <li key={l}><a href="#" style={{ fontSize: 13, color: "var(--fg-1)", textDecoration: "none" }}>{l}</a></li>)}
          </ul>
        </div>
      ))}
    </div>
    <div style={{ maxWidth: 1200, margin: "32px auto 0", paddingTop: 24, borderTop: "1px solid var(--line-1)", display: "flex", justifyContent: "space-between" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>© 2026 CryptoPrice.co — Not financial advice.</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>v2.4.1 · all systems operational</div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Ticker, FeaturedCoins, Features, Pricing, Footer });