// flippy-sections.jsx — about, features, gear container, roadmap, final CTA

// =====================================================================
// SectionHead (simplified — no // 01 // hashes)
// =====================================================================
const SectionHead = ({ eyebrow, title, titleAcid, sub }) => (
  <div className="section-head">
    <div>
      <h2 className="section-title">
        {title}{titleAcid && <> <span className="acid">{titleAcid}</span></>}
      </h2>
      {sub && <div className="section-sub">{sub}</div>}
    </div>
  </div>
);

// =====================================================================
// About / Manifesto
// =====================================================================
const Manifesto = () => (
  <section className="section" id="about">
    <SectionHead
      title="A LITTLE GREEN"
      titleAcid="MENACE."
    />

    <div className="manifesto">
      <Reveal>
        <div>
          <p>
            FLIPPY is not a token. FLIPPY is a <strong>disease</strong>.
            He's friendly. He's hungry. He's behind you.
          </p>
          <p>
            We don't beg. We don't pitch. We don't apologize.
            We arrive, we flip, we leave the chart bleeding.
          </p>
          <p>
            Want a polite roadmap? Wrong room.
            <span className="acid"> You're one of us now.</span>
          </p>
          <div className="kicker">
            STAY SHARP. STAY LOUD.<br />
            <span className="acid">STAY PSYCHO.</span>
          </div>
        </div>
      </Reveal>

      <Reveal delay={180} dir="left">
        <StayPsychoCard />
      </Reveal>
    </div>
  </section>
);

// =====================================================================
// StayPsychoCard — uses the "STAY PSYCHO" sticker prominently
// =====================================================================
const StayPsychoCard = () => (
  <div className="psycho-figure">
    <img
      src="assets/flippy/14_gear_stay_psycho.png"
      alt="Stay Psycho"
      className="psycho-sticker"
    />
  </div>
);

// =====================================================================
// Features — image already contains the title, only show description
// =====================================================================
const Features = () => {
  const items = [
    {
      img: "assets/flippy/08_feat_built_different.png",
      desc: "A movement for misfits and real ones. We flip the game.",
    },
    {
      img: "assets/flippy/09_feat_viral.png",
      desc: "Memes. Mayhem. Madness. Built to dominate the timeline.",
    },
    {
      img: "assets/flippy/10_feat_tactical.png",
      desc: "Fueled by community. Powered by conviction. Designed to go nuclear.",
    },
    {
      img: "assets/flippy/11_feat_ecosystem.png",
      desc: "Expanding utility. Building tools. Full-scale psycho-powered ecosystem.",
    },
  ];
  return (
    <section className="section" id="features">
      <SectionHead
        title="FOUR REASONS"
        titleAcid="WE WIN."
      />
      <div className="features-grid">
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <article className="feature">
              <div className="feature-img">
                <img src={it.img} alt="" />
              </div>
              <div className="feature-body">
                <p className="feature-desc">{it.desc}</p>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// =====================================================================
// Roadmap — uses the full designed asset 18 on pure black
// =====================================================================
const Roadmap = () => (
  <section className="section section-roadmap" id="roadmap">
    <Reveal>
      <div className="roadmap-frame">
        <img
          src="assets/flippy/18_roadmap.png"
          alt="FLIPPY roadmap — deployment, recruitment, operations, domination, takeover"
          className="roadmap-image"
        />
      </div>
    </Reveal>
  </section>
);

// =====================================================================
// FinalCTA — the entire footer is the asset 19 banner, stretched page-wide.
// Invisible click overlays make the JOIN NOW area + social positions live.
// =====================================================================
const FinalCTA = ({ onBuy }) => (
  <section className="final-cta-page" id="final">
    <div className="final-banner-stretch">
      <img
        src="assets/flippy/19_footer_cta.png"
        alt="FLIPPY — the takeover starts now. Join the army."
        className="final-stretch-img"
      />
      {/* JOIN NOW overlay button on the right side of the image */}
      <button
        className="final-stretch-cta"
        onClick={onBuy}
        aria-label="Join the army — buy FLIPPY"
      />
      {/* Social overlays bottom-right of the image */}
      <div className="final-stretch-socials">
        <a href="https://x.com/flippythepsycho" target="_blank" rel="noopener noreferrer" aria-label="X"></a>
        <a href="https://t.me/flippythepsychopath" target="_blank" rel="noopener noreferrer" aria-label="Telegram"></a>
      </div>
    </div>
  </section>
);

// =====================================================================
// Footer — slim functional bar (image already has socials baked in,
// so this stays minimal and works with screen readers / keyboard).
// =====================================================================
const SOCIAL_LINKS = {
  x: "https://x.com/flippythepsycho",
  telegram: "https://t.me/flippythepsychopath",
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-left">
      <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <img
          src="assets/flippy/15_gear_emblem.png"
          alt=""
          style={{ width: 28, height: 28, filter: "drop-shadow(0 0 8px var(--acid-glow-45))" }}
        />
        <span className="cartoon" style={{ color: "var(--acid)", fontSize: 16, fontFamily: "var(--f-cartoon)" }}>FLIPPY</span>
      </span>
      <span className="copy">© {new Date().getFullYear()} FLIPPY · PSYCHO BY NATURE</span>
    </div>

    <div className="footer-legal">
      <a href="#about">ABOUT</a>
      <a href="#roadmap">ROADMAP</a>
      <a href="#gear">MERCH</a>
    </div>

    <div className="socials" aria-label="Channels">
      <a className="sock" href={SOCIAL_LINKS.x} 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="sock" href={SOCIAL_LINKS.telegram} 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>
    </div>
  </footer>
);

// =====================================================================
// Tokenomics — black HUD panel with the key tactical metrics
// =====================================================================
const Tokenomics = () => {
  const cells = [
    { k: "TICKER",     v: "$FLIPPY",        sub: "PSYCHO ASSET" },
    { k: "CHAIN",      v: "SOLANA",         sub: "SPL TOKEN" },
    { k: "SUPPLY",     v: "1,000,000,000",  sub: "FIXED. NO MINT." },
    { k: "TAX",        v: "0 / 0",          sub: "BUY / SELL" },
    { k: "LIQUIDITY",  v: "BURNED",         sub: "LP LOCKED · NO RUG" },
    { k: "AUTHORITY",  v: "REVOKED",        sub: "MINT + FREEZE OFF" },
  ];
  return (
    <section className="section section-tokenomics" id="tokenomics">
      <SectionHead
        title="TOKENOMICS."
        sub="No tax. No tricks. Numbers a psycho can read in the dark."
      />
      <div className="tok-grid">
        {cells.map((c, i) => (
          <Reveal key={c.k} delay={i * 70}>
            <div className="tok-cell">
              <span className="tok-k">// {c.k}</span>
              <span className="tok-v">{c.v}</span>
              <span className="tok-sub">{c.sub}</span>
              <span className="tok-corner" aria-hidden="true" />
            </div>
          </Reveal>
        ))}
      </div>
      <Reveal delay={520}>
        <p className="tok-disclaimer">
          $FLIPPY is a memecoin. No promises. No utility theater.
          Contract is open. Unit is loud. <span className="acid">Stay psycho.</span>
        </p>
      </Reveal>
    </section>
  );
};

// =====================================================================
// HowToBuy — 3-step recruitment briefing (replaces FAQ ASK THE UNIT)
// =====================================================================
const Faq = () => {
  const steps = [
    {
      n: "01",
      title: "GET A WALLET",
      body: "Install Phantom or Solflare. Fund it with SOL. Write down the twelve words.",
      link: { href: "https://phantom.app", label: "PHANTOM.APP" },
    },
    {
      n: "02",
      title: "LOAD THE WEAPON",
      body: "Open pump.fun. Paste the FLIPPY contract. Set slippage to 5%. Send it.",
      link: { href: "https://pump.fun", label: "PUMP.FUN" },
    },
    {
      n: "03",
      title: "FLIP THE GAME",
      body: "Hold. Post. Recruit. The unit moves together. Don't be the one who panicked first.",
      link: { href: "https://t.me/flippythepsychopath", label: "JOIN COMMS" },
    },
  ];
  return (
    <section className="section section-faq" id="faq">
      <SectionHead
        title="HOW TO"
        titleAcid="BUY."
      />
      <div className="buy-steps">
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 120}>
            <article className="buy-step">
              <div className="buy-step-num">{s.n}</div>
              <h3 className="buy-step-title">{s.title}</h3>
              <p className="buy-step-body">{s.body}</p>
              <a
                href={s.link.href}
                target={s.link.href.startsWith("http") ? "_blank" : undefined}
                rel="noopener noreferrer"
                className="buy-step-link"
              >
                {s.link.label} <span>↗</span>
              </a>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// =====================================================================
// MarqueeStrip — auto-scrolling slogans, dual rows
// =====================================================================
const MarqueeStrip = ({ items, reverse = false, className = "" }) => {
  const seq = [...items, ...items, ...items];
  return (
    <div className={`marquee ${reverse ? "reverse" : ""} ${className}`} aria-hidden="true">
      <div className="marquee-track">
        {seq.map((it, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-star">★</span> {it}
          </span>
        ))}
      </div>
    </div>
  );
};

// =====================================================================
// PsychoSquad — silent full-bleed TRANSITION strip. Just the bears image,
// no overlay text. The image bleeds out of the page and the rest of the
// page fades back to black above and below.
// =====================================================================
const PsychoSquad = () => (
  <section className="psycho-band" id="squad" aria-hidden="true">
    <div className="band-bg">
      <img src="assets/flippy/08_feat_built_different.png" alt="" className="band-bg-img" />
    </div>
    <div className="band-vignette" />
  </section>
);

// =====================================================================
// IntelGrid — small HUD-style stat tiles (used between hero & manifesto)
// =====================================================================
const IntelGrid = () => {
  const tiles = [
    { k: "CHAIN", v: "SOLANA" },
    { k: "LAUNCH", v: "PUMP.FUN" },
    { k: "STATUS", v: "ARMED" },
    { k: "CLASSIFICATION", v: "PSYCHO" },
  ];
  return (
    <div className="intel-grid">
      {tiles.map((t, i) => (
        <Reveal key={i} delay={i * 60} className="intel-tile">
          <span className="intel-k">{t.k}</span>
          <span className="intel-v">{t.v}</span>
        </Reveal>
      ))}
    </div>
  );
};

Object.assign(window, { SectionHead, Manifesto, StayPsychoCard, Features, Roadmap, FinalCTA, Footer, SOCIAL_LINKS, MarqueeStrip, PsychoSquad, IntelGrid, Tokenomics, Faq });