/* global React */
const { useState, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────
// Tokens — inline so the whole landing page is one source of truth
// ──────────────────────────────────────────────────────────────
const C = {
  bg:        "#221E22",
  bgDeep:    "#161316",
  panel:     "#31263E",
  panelHi:   "#3A2D48",
  border:    "rgba(255,255,255,0.08)",
  borderHi:  "rgba(236,167,44,0.35)",
  text:      "#F4F2FF",
  textDim:   "#A6A2C2",
  textMuted: "#6E6A8A",
  brand:     "#C68A1C",
  brandHi:   "#ECA72C",
  brandDeep: "#9A6F18",
  hot:       "#EE5622",
  active:    "#F5C26B",
  quiet:     "#5B6B8A",
  silk:      "#E4D5A6",
};

// Mini SVG spider — used as accent. Keeps the brand voice without baking the JPEG everywhere.
function Spider({ size = 28, color = C.brandHi, glow = true, hanging = false }) {
  const id = React.useId();
  return (
    <svg width={size} height={size * (hanging ? 1.6 : 1)} viewBox={hanging ? "0 0 100 160" : "0 0 100 100"} style={{ overflow: "visible" }}>
      {glow && (
        <defs>
          <filter id={`g-${id}`} x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2.5" />
          </filter>
        </defs>
      )}
      {hanging && <line x1="50" y1="0" x2="50" y2="40" stroke={color} strokeWidth="0.8" opacity="0.6" />}
      <g transform={hanging ? "translate(0, 40)" : ""}>
        {glow && (
          <g filter={`url(#g-${id})`} opacity="0.55">
            <circle cx="50" cy="55" r="18" fill={color} />
            <circle cx="50" cy="38" r="10" fill={color} />
          </g>
        )}
        {/* legs */}
        {[-1, 1].map((s) =>
          [0, 1, 2, 3].map((i) => {
            const ang = -25 + i * 17;
            const r = (ang * Math.PI) / 180;
            const x1 = 50 + s * 14 * Math.cos(r);
            const y1 = 50 + 14 * Math.sin(r);
            const x2 = 50 + s * 38 * Math.cos(r - 0.2);
            const y2 = 50 + 38 * Math.sin(r - 0.2) - 6;
            const x3 = 50 + s * 44 * Math.cos(r + 0.1);
            const y3 = 50 + 44 * Math.sin(r + 0.1) + 4;
            return (
              <path
                key={`${s}-${i}`}
                d={`M${x1} ${y1} Q${x2} ${y2} ${x3} ${y3}`}
                stroke={color}
                strokeWidth="2.4"
                strokeLinecap="round"
                fill="none"
              />
            );
          })
        )}
        {/* body */}
        <circle cx="50" cy="55" r="16" fill={color} stroke="#fff" strokeWidth="1.2" opacity="0.95" />
        {/* head */}
        <circle cx="50" cy="38" r="9" fill={color} stroke="#fff" strokeWidth="1.2" />
        {/* eyes */}
        <circle cx="46.5" cy="37" r="1.6" fill="#fff" />
        <circle cx="53.5" cy="37" r="1.6" fill="#fff" />
        <path d="M46 41 Q50 44 54 41" stroke="#fff" strokeWidth="1" fill="none" strokeLinecap="round" />
      </g>
    </svg>
  );
}

// ──────────────────────────────────────────────────────────────
// Top bar
// ──────────────────────────────────────────────────────────────
function BetaBanner() {
  return (
    <div style={betaStyles.wrap}>
      <span style={betaStyles.pill}>Private beta</span>
      <span>Account required. Chrome Web Store listing coming soon.</span>
      <a href="faq.html" style={betaStyles.link}>Read the FAQ</a>
    </div>
  );
}

function Nav() {
  return (
    <header style={navStyles.bar}>
      <a href="#top" style={navStyles.brand}>
        {/* Real sigil logo (purple line-art spider with triangle on abdomen) — same
            asset the extension uses, so the brand reads identically across surfaces. */}
        <img src="logo-gold.png" alt="" width="32" height="32" style={{ display: "block", filter: "drop-shadow(0 0 8px rgba(236,167,44,0.4))" }} />
        <span className="nav-brand-text" style={navStyles.brandText}>AmbiWeb<em style={{ color: C.silk, fontStyle: "normal", marginLeft: -1 }}>Z</em></span>
      </a>
      <nav className="nav-links" style={navStyles.links}>
        <a href="global.html" style={navStyles.link}>Global Feed</a>
        <a href="#how" style={navStyles.link}>How it works</a>
        <a href="#features" style={navStyles.link}>Features</a>
        <a href="pricing.html" style={navStyles.link}>Pricing</a>
        <a href="faq.html" style={navStyles.link}>FAQ</a>
      </nav>
    </header>
  );
}
const betaStyles = {
  wrap: {
    display: "flex", alignItems: "center", justifyContent: "center", gap: 12, flexWrap: "wrap",
    padding: "9px 20px",
    background: "rgba(228,213,166,0.08)",
    borderBottom: `1px solid rgba(228,213,166,0.18)`,
    color: C.textDim,
    fontSize: 12.5,
  },
  pill: {
    padding: "3px 8px", borderRadius: 999,
    background: "rgba(228,213,166,0.14)", color: C.silk,
    border: "1px solid rgba(228,213,166,0.25)",
    fontSize: 10.5, fontWeight: 800, letterSpacing: 1.1, textTransform: "uppercase",
  },
  link: { color: C.silk, textDecoration: "none", fontWeight: 700 },
};
const navStyles = {
  bar: {
    position: "sticky", top: 0, zIndex: 50,
    display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center",
    gap: 24,
    padding: "14px 36px",
    background: "rgba(34,30,34,0.72)",
    backdropFilter: "blur(18px)",
    WebkitBackdropFilter: "blur(18px)",
    borderBottom: `1px solid ${C.border}`,
  },
  brand: { display: "flex", alignItems: "center", gap: 10, color: C.silk, textDecoration: "none" },
  brandText: { fontFamily: "'Cinzel', serif", fontSize: 22, fontWeight: 700, letterSpacing: 0.3, color: C.text },
  links: { display: "flex", gap: 28, flexWrap: "wrap", justifyContent: "center", gridColumn: 2 },
  link: { color: C.textDim, textDecoration: "none", fontSize: 14, fontWeight: 500, letterSpacing: -0.1 },
};

// ──────────────────────────────────────────────────────────────
// Hero — Editorial / Marc-Friedman vibe with massive serif headline
// ──────────────────────────────────────────────────────────────
const HERO_VERBS = ["discuss", "vote", "highlight", "react", "lurk", "jump in"];

function Hero() {
  const [verbIdx, setVerbIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setVerbIdx((i) => (i + 1) % HERO_VERBS.length), 2200);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="top" style={heroStyles.wrap}>
      {/* faint web background */}
      <WebBackdrop />

      <div style={heroStyles.eyebrow}>
        <span style={heroStyles.dot} />
        <span>Our Mission</span>
      </div>

      <h1 style={heroStyles.h1}>
        Every URL has<br />
        a <em style={heroStyles.em}>story</em>. Join<br />
        the conversation —<br />
        come{" "}
        <span style={heroStyles.verbSlot}>
          <span key={verbIdx} style={heroStyles.verb}>{HERO_VERBS[verbIdx]}</span>
        </span>.
      </h1>

      <p style={heroStyles.sub}>
        Thousands of people are discussing the same pages you’re browsing right
        now. You just can’t see them yet. AmbiWebZ adds a free discussion layer
        on top of every website — independent, open, yours.
      </p>

      <div className="cta-row" style={heroStyles.ctaRow}>
        <a href="#how" style={heroStyles.primary}>
          <ChromeMark /> Chrome Store listing coming soon
        </a>
        <a href="#how" style={heroStyles.ghost}>
          How it works ↓
        </a>
        <span style={heroStyles.meta}>Free to start · Account required · Quick setup</span>
      </div>

      {/* Hanging spider mascot — the page literally has a spider hanging into
          the hero. Uses the actual scholarly mascot PNG (with glasses + tie +
          laptop) shipped with the extension, so the brand character is
          consistent between site and product. The PNG already has a built-in
          gold thread at the top, and the wrapper handles the swinging motion. */}
      <div style={heroStyles.spider}>
        <img
          src="ambiwebzspidi.png"
          alt="Webzi — the AmbiWebZ mascot"
          width="200"
          style={{
            display: "block",
            filter: "drop-shadow(0 14px 30px rgba(236,167,44,0.35))",
          }}
        />
      </div>

      {/* live activity ticker */}
      <LiveTicker />
    </section>
  );
}

function WebBackdrop() {
  return (
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", opacity: 0.18 }} viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="webfade" cx="50%" cy="0%" r="80%">
          <stop offset="0%" stopColor={C.brandHi} stopOpacity="0.5" />
          <stop offset="60%" stopColor={C.brandHi} stopOpacity="0.05" />
          <stop offset="100%" stopColor={C.brandHi} stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* radial web from top */}
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i / 24) * Math.PI * 2;
        return <line key={i} x1="600" y1="-50" x2={600 + Math.cos(a) * 1200} y2={-50 + Math.sin(a) * 1200} stroke="url(#webfade)" strokeWidth="0.6" />;
      })}
      {[120, 240, 360, 480, 620, 800].map((r, i) => (
        <circle key={i} cx="600" cy="-50" r={r} stroke="url(#webfade)" strokeWidth="0.6" fill="none" />
      ))}
    </svg>
  );
}

function ChromeMark() {
  return (
    <svg width="16" height="16" viewBox="0 0 48 48" style={{ marginRight: 2 }}>
      <circle cx="24" cy="24" r="22" fill="#fff" />
      <circle cx="24" cy="24" r="8" fill="#4285F4" stroke="#fff" strokeWidth="2" />
      <path d="M24 6 A18 18 0 0 1 39.6 15 L26 22 A4 4 0 0 0 22 22 Z" fill="#EA4335" />
      <path d="M39.6 15 A18 18 0 0 1 39.6 33 L24 24 Z" fill="#FBBC04" />
      <path d="M39.6 33 A18 18 0 0 1 8.4 33 L22 26 A4 4 0 0 0 26 26 Z" fill="#34A853" />
      <path d="M8.4 33 A18 18 0 0 1 8.4 15 L24 24 Z" fill="#0F9D58" opacity="0" />
    </svg>
  );
}

const heroStyles = {
  wrap: {
    position: "relative",
    padding: "120px 36px 80px",
    maxWidth: 1280, margin: "0 auto",
    overflow: "visible",
  },
  eyebrow: {
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "6px 12px", borderRadius: 999,
    border: `1px solid ${C.border}`, color: C.textDim,
    fontSize: 12, fontWeight: 500, letterSpacing: 0.2, textTransform: "uppercase",
    marginBottom: 36,
    position: "relative", zIndex: 2,
  },
  dot: { width: 7, height: 7, borderRadius: "50%", background: "#34D399", boxShadow: "0 0 0 4px rgba(52,211,153,0.18)" },
  h1: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: "clamp(56px, 9.2vw, 132px)",
    lineHeight: 0.92,
    letterSpacing: -2,
    color: C.text,
    margin: 0,
    fontWeight: 400,
    position: "relative", zIndex: 2,
    textWrap: "balance",
  },
  em: { fontStyle: "italic", color: C.brandHi, fontWeight: 400 },
  verbSlot: {
    display: "inline-block",
    minWidth: "4.5ch",
    background: C.brandHi,
    color: C.bg,
    padding: "0 18px",
    borderRadius: 8,
    fontStyle: "italic",
    transform: "rotate(-1.5deg)",
    boxShadow: "0 0 60px rgba(236,167,44,0.4)",
  },
  verb: { display: "inline-block", animation: "fadeInWord 0.5s ease-out" },
  sub: {
    fontSize: 19, lineHeight: 1.55,
    color: C.textDim,
    maxWidth: 560,
    marginTop: 36,
    textWrap: "pretty",
    position: "relative", zIndex: 2,
  },
  ctaRow: {
    display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
    marginTop: 44,
    position: "relative", zIndex: 2,
  },
  primary: {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "16px 24px", borderRadius: 999,
    background: C.text, color: C.bg, textDecoration: "none",
    fontSize: 15, fontWeight: 600,
    boxShadow: "0 0 0 1px rgba(255,255,255,0.12), 0 18px 50px -16px rgba(236,167,44,0.55)",
  },
  ghost: {
    display: "inline-flex", alignItems: "center", gap: 6,
    padding: "16px 22px", borderRadius: 999,
    color: C.text, textDecoration: "none",
    fontSize: 15, fontWeight: 500,
    border: `1px solid ${C.border}`,
  },
  meta: { color: C.textMuted, fontSize: 13, marginLeft: 6 },
  spider: {
    position: "absolute",
    right: "12%", top: -10,
    animation: "swing 5s ease-in-out infinite",
    transformOrigin: "50% 0%",
    zIndex: 1,
  },
};

// ──────────────────────────────────────────────────────────────
// Live ticker – scrolling band of "what's happening right now"
// ──────────────────────────────────────────────────────────────
const TICKER = [
  { url: "a news site / article on censorship",        emoji: "🔥", n: 412 },
  { url: "a video platform / interview",                emoji: "💬", n: 88 },
  { url: "an online shop / product page",               emoji: "💬", n: 23 },
  { url: "an open encyclopedia / topic page",           emoji: "💡", n: 17 },
  { url: "a social network / viral post",               emoji: "🔥", n: 1204 },
  { url: "a research preprint / paper",                 emoji: "🤓", n: 56 },
  { url: "a forum / hot thread",                        emoji: "💬", n: 41 },
  { url: "a hacker news–style aggregator",              emoji: "🔥", n: 219 },
];
function LiveTicker() {
  const items = [...TICKER, ...TICKER];
  return (
    <div style={tickerStyles.wrap}>
      <div style={tickerStyles.label}>
        <span style={{ color: "#34D399" }}>● LIVE</span>
        <span style={{ color: C.textMuted }}>activity across the web</span>
      </div>
      <div style={tickerStyles.scrollClip}>
        <div style={tickerStyles.track}>
          {items.map((t, i) => (
            <div key={i} style={tickerStyles.chip}>
              <span style={{ fontSize: 14 }}>{t.emoji}</span>
              <span style={tickerStyles.chipUrl}>{t.url}</span>
              <span style={tickerStyles.chipN}>{t.n}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
const tickerStyles = {
  wrap: { marginTop: 88, position: "relative", zIndex: 2 },
  label: {
    display: "flex", gap: 12, fontSize: 11, letterSpacing: 1.5,
    textTransform: "uppercase", marginBottom: 14, fontWeight: 600,
  },
  scrollClip: {
    overflow: "hidden",
    maskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)",
  },
  track: {
    display: "flex", gap: 10,
    animation: "scroll-x 40s linear infinite",
    width: "max-content",
  },
  chip: {
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "8px 14px", borderRadius: 999,
    background: C.panel, border: `1px solid ${C.border}`,
    fontSize: 13, color: C.textDim, fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    whiteSpace: "nowrap",
    flexShrink: 0,
  },
  chipUrl: { color: C.text },
  chipN: { color: C.brandHi, fontWeight: 600 },
};

Object.assign(window, { Spider, BetaBanner, Nav, Hero, C });