// flippy-hero.jsx — hero + status bar + nav (rebuilt)

// =====================================================================
// StatusBar — scrolling marquee
// =====================================================================
const StatusBar = ({ ca }) => {
  const items = [
    ["LIVE", "FLIPPY ARMY", "hot"],
    ["CHAIN", "SOLANA", ""],
    ["VIBE", "UNHINGED", ""],
    ["STATUS", "PSYCHO", "hot"],
    ["WARN", "CONTAINS CHAOS", "blood"],
    ["TICKER", "$FLIPPY", "hot"],
    ["SIGNAL", "JOIN THE PSYCHO'S", ""],
  ];
  const seq = [...items, ...items, ...items];
  return (
    <div className="status-bar" aria-hidden="true">
      <div className="ticker">
        {seq.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center" }}>
            <span className="dot" />
            <span style={{ color: "var(--ash)" }}>[{it[0]}]</span>
            <span style={{ marginLeft: 8 }} className={it[2]}>{it[1]}</span>
          </span>
        ))}
      </div>
    </div>
  );
};

// =====================================================================
// Navbar
// =====================================================================
const Navbar = ({ onBuy }) => {
  const [open, setOpen] = useState(false);
  const links = [
    ["HOME", "#top"],
    ["ABOUT", "#about"],
    ["TOKENOMICS", "#tokenomics"],
    ["ROADMAP", "#roadmap"],
    ["MERCH", "#gear"],
    ["FAQ", "#faq"],
  ];
  return (
    <div style={{ display: "contents" }}>
      <nav className="nav">
        <div className="nav-inner">
          <a href="#top" className="nav-brand">
            <img src="assets/flippy/15_gear_emblem.png" alt="FLIPPY" />
            <span className="word">FLIPPY</span>
          </a>
          <div className="nav-links">
            {links.map(([l, h]) => <a key={l} href={h}>{l}</a>)}
          </div>
          <div className="nav-cta">
            <a className="nav-sock" href="https://x.com/flippythepsycho" target="_blank" rel="noopener noreferrer" aria-label="X">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2H21l-6.55 7.485L22.5 22h-6.83l-5.345-6.99L4.2 22H1.44l7.04-8.045L1 2h7.01l4.832 6.39L18.244 2Zm-2.4 18.3h1.86L7.2 3.6H5.235l10.61 16.7Z"/></svg>
            </a>
            <a className="nav-sock" href="https://t.me/flippythepsychopath" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71l-4.15-3.06-2 1.94c-.23.23-.42.42-.81.42z"/></svg>
            </a>
            <button className="btn" onClick={onBuy}>
              JOIN THE ARMY <span>★</span>
            </button>
            <button
              className="nav-burger"
              aria-label="Open menu"
              onClick={() => setOpen(!open)}
            >
              {open ? "✕" : "☰"}
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {links.map(([l, h]) => (
          <a key={l} href={h} onClick={() => setOpen(false)}>{l}</a>
        ))}
      </div>
    </div>
  );
};

// =====================================================================
// Hero — brush-stroke WE ARE FLIPPY + emblem right
// =====================================================================
const Hero = ({ onBuy }) => {
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-left">
          {/* Eyebrow removed per request */}

          <Reveal delay={220} dir="up">
            <h1 className="hero-title">
              <span className="we-are">WE ARE</span>
              <span className="flippy">
                <SplitTextReveal text="FLIPPY" delay={400} stagger={60} />
              </span>
            </h1>
          </Reveal>

          <Reveal delay={340}>
            <div className="hero-sub-line">
              JOIN THE PSYCHO'S <span className="crosshair">⊕</span>
            </div>
          </Reveal>

          <Reveal delay={460}>
            <p className="hero-sub">
              We don't ask. We bite. The Psycho's were born loud, born hungry, born wrong.<br />
              <span className="acid">Get in or get flipped.</span>
            </p>
          </Reveal>

          <Reveal delay={580}>
            <div className="hero-cta-row">
              <button className="btn" onClick={onBuy}>
                JOIN THE ARMY <span>★</span>
              </button>
              <button className="btn btn-ghost" onClick={onBuy}>
                ENTER THE CHAOS <span>⊕</span>
              </button>
            </div>
          </Reveal>

          <Reveal delay={720}>
            <TrustedRow />
          </Reveal>
        </div>

        <div className="hero-right">
          <MouseParallax intensity={26} className="emblem-parallax">
            <HeroEmblem />
          </MouseParallax>
        </div>
      </div>

      <Reveal delay={840}>
        <StatsRow />
      </Reveal>
    </section>
  );
};

// =====================================================================
// HeroEmblem — the FLIPPY emblem with a radar atmosphere behind
// =====================================================================
const HeroEmblem = () => (
  <div className="emblem-wrap">
    <div className="emblem-glow" />
    <div className="emblem-rings">
      <div className="ring r1" />
      <div className="ring r2" />
      <div className="ring r3" />
    </div>
    <img
      src="assets/flippy/02_flippy_emblem.png"
      alt="FLIPPY commander"
      className="emblem-img"
    />
    <div className="emblem-blood-drips">
      <span />
      <span />
      <span />
    </div>
  </div>
);

// =====================================================================
// Trusted by row
// =====================================================================
const TrustedRow = () => {
  const items = [
    { label: "DEXTools", svg: "▲" },
    { label: "DEXScreener", svg: "◧" },
    { label: "CoinMarketCap", svg: "◉" },
    { label: "CoinGecko", svg: "●" },
  ];
  return (
    <div className="trusted">
      <div className="trusted-label">TRUSTED BY THE PSYCHO'S</div>
      <div className="trusted-row">
        {items.map((it) => (
          <span key={it.label} className="trusted-logo">
            <span className="tg-glyph">{it.svg}</span>
            <span>{it.label}</span>
          </span>
        ))}
      </div>
    </div>
  );
};

// =====================================================================
// StatsRow — COMING SOON placeholders + a CA box
// =====================================================================
const StatsRow = () => {
  const stats = [
    { ic: "assets/flippy/03_icon_community.png", lbl: "PSYCHOS IN THE ARMY" },
    { ic: "assets/flippy/04_icon_skull.png",     lbl: "SOCIAL REACH" },
    { ic: "assets/flippy/05_icon_crosshair.png", lbl: "GLOBAL PARTNERS" },
    { ic: "assets/flippy/06_icon_flame.png",     lbl: "COMMUNITY DRIVEN" },
    { ic: "assets/flippy/07_icon_star.png",      lbl: "CHAOS CERTIFIED" },
  ];
  return (
    <div style={{ display: "contents" }}>
      <div className="stats">
        {stats.map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="stat">
              <div className="ic"><img src={s.ic} alt="" /></div>
              <div className="stat-text">
                <div className="num">COMING SOON</div>
                <div className="lbl">{s.lbl}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <Reveal delay={500}>
        <div className="ca-box" role="group" aria-label="Contract address">
          <span className="ca-tag">CA</span>
          <span className="ca-val">DROPPING SOON · STAY ON CHANNEL</span>
          <span className="ca-blink">●</span>
        </div>
      </Reveal>
    </div>
  );
};

// =====================================================================
// CaSticky — persistent contract address bar pinned under the nav
// =====================================================================
const CaSticky = ({ ca }) => (
  <div className="ca-sticky" aria-label="Contract address">
    <div className="ca-box">
      <span className="ca-tag">CA</span>
      <span className="ca-val">{ca || "DROPPING SOON · STAY ON CHANNEL"}</span>
      <span className="ca-blink">●</span>
    </div>
  </div>
);

Object.assign(window, { StatusBar, Navbar, Hero, HeroEmblem, TrustedRow, StatsRow, CaSticky });