// WE26 — Landing for the FIFA World Cup 2026 prediction market dapp.
// Aesthetic: organic / rounded / photo-forward. Poppins everywhere.

const { useState, useEffect, useRef } = React;

const TWEAKS = /*EDITMODE-BEGIN*/{
  "theme": "field",
  "heroVideo": "assets/hero-placeholder.mp4",
  "showCards": true,
  "showOdds": true
}/*EDITMODE-END*/;

const TOURNAMENT_ODDS = [
  { team: "Argentina",   code: "AR", price: 4.20, mv: "+0.12", trend: "up" },
  { team: "France",      code: "FR", price: 4.80, mv: "−0.05", trend: "down" },
  { team: "Brazil",      code: "BR", price: 5.50, mv: "+0.30", trend: "up" },
  { team: "Spain",       code: "ES", price: 6.00, mv: "+0.10", trend: "up" },
  { team: "England",     code: "GB", price: 7.50, mv: "−0.20", trend: "down" },
  { team: "Germany",     code: "DE", price: 11.0, mv: "−0.50", trend: "down" },
  { team: "Portugal",    code: "PT", price: 12.0, mv: "+0.00", trend: "flat" },
  { team: "Netherlands", code: "NL", price: 14.0, mv: "+0.40", trend: "up" },
  { team: "USA",         code: "US", price: 26.0, mv: "−1.00", trend: "down" },
  { team: "Mexico",      code: "MX", price: 41.0, mv: "+2.00", trend: "up" },
];

const FEATURED_MARKETS = [
  {
    label: "Tournament winner",
    headline: "Argentina lifts the trophy",
    image: "assets/img-trio.jpg",
    yes: 24,
    volume: "$4.21M",
    closes: "Jul 19, 2026",
    accent: "#E6332A",
  },
  {
    label: "Golden boot",
    headline: "Mbappé finishes top scorer",
    image: "assets/img-flying.jpg",
    yes: 18,
    volume: "$1.84M",
    closes: "Jul 19, 2026",
    accent: "#1B2A4E",
  },
  {
    label: "Group D · opener",
    headline: "USA beats Mexico, Jun 14",
    image: "assets/img-keeper.jpg",
    yes: 41,
    volume: "$612K",
    closes: "Jun 14, 2026",
    accent: "#1F5F3F",
  },
];

const FLAG_PALETTES = {
  AR: ["#75AADB", "#fff", "#75AADB"],
  FR: ["#0055A4", "#fff", "#EF4135"],
  BR: ["#009C3B", "#FFDF00", "#002776"],
  ES: ["#AA151B", "#F1BF00", "#AA151B"],
  GB: ["#012169", "#fff", "#C8102E"],
  DE: ["#000", "#DD0000", "#FFCE00"],
  PT: ["#006600", "#FF0000", "#FF0000"],
  NL: ["#AE1C28", "#fff", "#21468B"],
  US: ["#B22234", "#fff", "#3C3B6E"],
  MX: ["#006847", "#fff", "#CE1126"],
};

function Flag({ code }) {
  const c = FLAG_PALETTES[code] || ["#222", "#666", "#aaa"];
  return (
    <svg viewBox="0 0 18 12" width="18" height="12" style={{ display: "block", borderRadius: 3, boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,.35)" }}>
      <rect x="0"  y="0" width="6" height="12" fill={c[0]} />
      <rect x="6"  y="0" width="6" height="12" fill={c[1]} />
      <rect x="12" y="0" width="6" height="12" fill={c[2]} />
    </svg>
  );
}

function EthGlyph({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2 5 12.5 12 16l7-3.5L12 2Zm0 16-7-3.5L12 22l7-7.5L12 18Z" />
    </svg>
  );
}

// ─── Header ──────────────────────────────────────────────────────────────

function Header() {
  return (
    <header className="we-header">
      <div className="we-header-inner">
        <a className="we-mark" href="#">
          <span className="we-mark-dot" />
          <span className="we-mark-name">we<span className="we-mark-26">26</span></span>
        </a>
        <nav className="we-nav">
          <a href="#markets">Markets</a>
          <a href="#how">How it works</a>
          <a href="#">Leaderboard</a>
          <a href="#">Docs</a>
        </nav>
        <div className="we-header-cta">
          <span className="we-conn">
            <EthGlyph size={12} />
            <span>Ethereum</span>
            <span className="we-dot" />
          </span>
          <a className="we-btn we-btn-primary" href="#" data-cta="launch">
            Launch app
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </header>
  );
}

// ─── Floating market card ────────────────────────────────────────────────

function MarketCard({ market, idx }) {
  return (
    <article
      className="we-mkt"
      style={{ "--i": idx, "--accent": market.accent }}
      tabIndex="0"
    >
      <div
        className="we-mkt-img"
        style={{ backgroundImage: `url(${market.image})` }}
      >
        <span className="we-mkt-tag">{market.label}</span>
      </div>
      <div className="we-mkt-body">
        <h3 className="we-mkt-q">{market.headline}</h3>
        <div className="we-mkt-bar">
          <div className="we-mkt-bar-fill" style={{ width: market.yes + "%" }} />
          <span className="we-mkt-bar-yes">YES · {market.yes}¢</span>
          <span className="we-mkt-bar-no">NO · {100 - market.yes}¢</span>
        </div>
        <footer className="we-mkt-foot">
          <span><span className="we-mkt-foot-k">Vol</span> {market.volume}</span>
          <span><span className="we-mkt-foot-k">Closes</span> {market.closes}</span>
        </footer>
      </div>
    </article>
  );
}

// ─── Live odds rail ──────────────────────────────────────────────────────

function OddsRail() {
  const [hover, setHover] = useState(null);
  return (
    <div className="we-rail">
      <div className="we-rail-label">
        <span className="we-rail-dot" />
        <span>Live odds · winner</span>
      </div>
      <div className="we-rail-track">
        {TOURNAMENT_ODDS.map((t, i) => (
          <button
            key={t.code}
            className={"we-chip" + (hover === t.code ? " is-hot" : "")}
            onMouseEnter={() => setHover(t.code)}
            onMouseLeave={() => setHover(null)}
            onFocus={() => setHover(t.code)}
            onBlur={() => setHover(null)}
            style={{ "--i": i }}
          >
            <Flag code={t.code} />
            <span className="we-chip-name">{t.team}</span>
            <span className="we-chip-price">{t.price.toFixed(2)}×</span>
            <span className={"we-chip-mv we-mv-" + t.trend}>{t.mv}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────────

function Hero({ tweaks }) {
  return (
    <section className="we-hero" data-screen-label="01 Hero">
      <div className="we-hero-bg">
        <video
          key={tweaks.heroVideo}
          className="we-hero-video"
          src={tweaks.heroVideo}
          autoPlay
          muted
          loop
          playsInline
        />
        <div className="we-hero-tint" />
        <div className="we-hero-grain" />
      </div>

      {/* Decorative photo cutouts overlapping the hero — softens the rectangles */}
      <div className="we-hero-cutout we-hero-cutout-circle" aria-hidden="true">
        <img src="assets/img-circle.jpg" alt="" />
      </div>
      <div className="we-hero-cutout we-hero-cutout-blob" aria-hidden="true">
        <img src="assets/img-confetti.jpg" alt="" />
      </div>

      <div className="we-hero-grid">
        <div className="we-hero-meta">
          <span className="we-meta-pill">
            <span className="we-meta-num">N°23</span>
            FIFA World Cup
          </span>
          <span className="we-meta-pill">USA · CAN · MEX</span>
          <span className="we-meta-pill">Jun 11 — Jul 19, 2026</span>
        </div>

        <h1 className="we-hero-title">
          <span className="we-line we-line-1">
            <span className="we-w">Trade</span>{" "}
            <span className="we-w">every</span>{" "}
            <span className="we-w">kick.</span>
          </span>
          <span className="we-line we-line-2">
            <span className="we-w">Own</span>{" "}
            <span className="we-w">the</span>{" "}
            <span className="we-w we-w-stamp">outcome.</span>
          </span>
        </h1>

        <p className="we-hero-sub">
          A peer-to-peer prediction market for the 2026 World Cup, built on
          Ethereum. Non-custodial, settled in <strong>USDC</strong> the minute
          the final whistle blows.
        </p>

        <div className="we-hero-cta">
          <a className="we-btn we-btn-primary we-btn-lg" href="#">
            Launch app
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
          <a className="we-btn we-btn-ghost we-btn-lg" href="#markets">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
              <polygon points="5,3 19,12 5,21" fill="currentColor" />
            </svg>
            Watch the trailer
          </a>
        </div>

        <div className="we-hero-stats">
          <div className="we-hstat">
            <span className="we-hstat-num">$8.42M</span>
            <span className="we-hstat-lbl">24h volume</span>
          </div>
          <div className="we-hstat">
            <span className="we-hstat-num">62k</span>
            <span className="we-hstat-lbl">Traders</span>
          </div>
          <div className="we-hstat">
            <span className="we-hstat-num">1,284</span>
            <span className="we-hstat-lbl">Live markets</span>
          </div>
        </div>

        {tweaks.showOdds && <OddsRail />}
      </div>

      {tweaks.showCards && (
        <aside className="we-hero-cards">
          {FEATURED_MARKETS.map((m, i) => (
            <MarketCard key={m.label} market={m} idx={i} />
          ))}
        </aside>
      )}
    </section>
  );
}

// ─── Markets section (image-forward, organic) ────────────────────────────

function Markets() {
  const tiles = [
    { img: "assets/img-stadium.jpg",  title: "Group stage",   meta: "72 markets · $2.1M" },
    { img: "assets/img-action.jpg",   title: "Knockouts",     meta: "16 markets · $4.8M" },
    { img: "assets/img-running.jpg",  title: "Player props",  meta: "412 markets · $1.6M" },
    { img: "assets/img-camp.jpg",     title: "Long shots",    meta: "USA to lift it · 26.0×" },
  ];
  return (
    <section className="we-markets" id="markets" data-screen-label="02 Markets">
      <div className="we-markets-head">
        <div>
          <span className="we-eyebrow"><span className="we-eyebrow-dot" /> Mechanics</span>
          <h2 className="we-markets-title">
            One ball.<br />
            Forty-eight teams.<br />
            <span className="we-h-stamp">Every market settles itself.</span>
          </h2>
        </div>
        <div className="we-markets-lede">
          <p>
            We&rsquo;re not a sportsbook. <strong>We&rsquo;re a market</strong> —
            peer-to-peer, on Ethereum, with prices set by the people putting
            money on the line. Buy YES or NO shares on any 2026 outcome and
            hold them until the final whistle.
          </p>
          <a className="we-btn we-btn-primary we-btn-lg" href="#">
            Browse all 1,284 markets
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <div className="we-tiles">
        {tiles.map((t) => (
          <a key={t.title} className="we-tile" href="#">
            <div className="we-tile-img">
              <img src={t.img} alt="" loading="lazy" />
              <span className="we-tile-arrow">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M7 17 17 7M9 7h8v8" />
                </svg>
              </span>
            </div>
            <div className="we-tile-foot">
              <span className="we-tile-title">{t.title}</span>
              <span className="we-tile-meta">{t.meta}</span>
            </div>
          </a>
        ))}
      </div>

      <div className="we-trust">
        <span className="we-trust-l">Settled trustlessly via</span>
        <ul className="we-trust-list">
          <li><EthGlyph size={14} /> Ethereum L1</li>
        </ul>
      </div>
    </section>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer className="we-footer">
      <div className="we-footer-inner">
        <div className="we-footer-mark">
          <span className="we-mark-dot we-mark-dot-lg" />
          <div>
            <span className="we-footer-name">we26</span>
            <span className="we-footer-tag">A prediction market for the 2026 World Cup. Not affiliated with FIFA.</span>
          </div>
        </div>
        <div className="we-footer-meta">
          <span>v0.4.1</span>
          <span>·</span>
          <a href="#">Terms</a>
          <a href="#">Risk disclosures</a>
          <a href="https://x.com/We26Official" target="_blank" rel="noopener noreferrer">@We26Official</a>
        </div>
      </div>
    </footer>
  );
}

// ─── Tweaks ──────────────────────────────────────────────────────────────

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection title="Theme">
        <TweakRadio
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "ink",   label: "Ink" },
            { value: "paper", label: "Paper" },
            { value: "field", label: "Field" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero video">
        <TweakSelect
          value={tweaks.heroVideo}
          onChange={(v) => setTweak("heroVideo", v)}
          options={[
            { value: "assets/hero-placeholder.mp4", label: "Placeholder · A" },
            { value: "assets/hero-alt-1.mp4",       label: "Placeholder · B" },
            { value: "assets/hero-alt-2.mp4",       label: "Placeholder · C" },
            { value: "assets/hero-alt-3.mp4",       label: "Placeholder · D" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero overlays">
        <TweakToggle label="Floating market cards" value={tweaks.showCards} onChange={(v) => setTweak("showCards", v)} />
        <TweakToggle label="Live odds rail"        value={tweaks.showOdds}  onChange={(v) => setTweak("showOdds", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// ─── App ─────────────────────────────────────────────────────────────────

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS);
  const [entering, setEntering] = useState(true);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  useEffect(() => {
    if (entering) document.body.classList.add("is-entering");
    else document.body.classList.remove("is-entering");
  }, [entering]);

  return (
    <div className="we-app">
      {entering && (
        <Entrance
          src="assets/hero-alt-1.mp4"
          onComplete={() => setEntering(false)}
        />
      )}
      <Header />
      <Hero tweaks={tweaks} />
      <Markets />
      <Footer />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);