/* ============================================================
   Landing page sections, exported to window.
   props: go(route) navigates; games = window.GAMES
   ============================================================ */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function Nav({ go, route }) {
  return (
    <nav className="nav" aria-label="Primary">
      <div className="wrap-wide nav-inner">
        <button type="button" className="brand" onClick={() => go({ name: "home" })} aria-label="Chimpanzee home">
          <img className="brand-logo" src="chimp-logo.png" alt="" width="30" height="30" />
          <span>Chimpanzee</span>
        </button>
        <div className="nav-links">
          <button type="button" onClick={() => go({ name: "home", scroll: "games" })}>Games</button>
          <button type="button" onClick={() => go({ name: "home", scroll: "reviews" })}>Reviews</button>
        </div>
        <div className="nav-right">
          <button type="button" className="btn btn-accent btn-sm" onClick={() => go({ name: "home", scroll: "games" })}>Browse games</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ go, game }) {
  return (
    <header className="hero" style={{ "--game": "oklch(0.6 0.16 " + game.hue + ")" }}>
      <div className="hero-glow"></div>
      <div className="wrap-wide">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="pill"><span className="dot"></span> New release · {game.category}</span>
            <h1>{game.tagline}</h1>
            <p className="lead">{game.blurb} No ads, no accounts. Just the climb.</p>
            <div className="hero-cta">
              <AppStore url={game.url} />
            </div>
            <div className="hero-meta">
              <span className="rating-inline"><Stars value={game.rating} gold /> <b>{game.rating.toFixed(1)}</b> · {game.ratings} ratings</span>
              <span>·</span>
              <span>Free on the App Store</span>
            </div>
          </div>
          <div className="hero-stage">
            <PhoneFrame game={game} width={300} shot={shotsOf(game)[0]} label={game.name + " · new release"} />
          </div>
        </div>
      </div>
    </header>
  );
}

const TRUST = [
  { ico: "no-ads", b: "No ads. Ever.", s: "Zero interruptions, zero banners." },
  { ico: "no-account", b: "No accounts", s: "No sign-up, no email required." },
  { ico: "lock", b: "Privacy-first", s: "We don't track or sell your data." },
  { ico: "wifi-off", b: "Plays offline", s: "Keep earning with no connection." },
];

function TrustStrip() {
  return (
    <section className="section-pad" style={{ paddingTop: 0 }}>
      <div className="wrap-wide">
        <div className="trust reveal">
          {TRUST.map((t) => (
            <div key={t.b}>
              <div className="ico"><Icon name={t.ico} style={{ width: 22, height: 22 }} /></div>
              <b>{t.b}</b><span>{t.s}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Catalog({ go, games }) {
  return (
    <section id="games" className="section-pad alt-bg">
      <div className="wrap-wide">
        <div className="section-head reveal">
          <span className="eyebrow">The catalog</span>
          <h2 className="display" style={{ fontSize: "clamp(30px,3.8vw,52px)", marginTop: 14 }}>One studio. A dozen lives to live.</h2>
          <p className="lead">Every game is a deep, replayable career sim. Start at the bottom and claw your way to the top. Pick a life.</p>
        </div>
        <div className="cat-grid">
          {games.map((g) => (
            <a key={g.id} className="gcard reveal" href={g.url} target="_blank" rel="noopener noreferrer" style={{ "--game": "oklch(0.6 0.16 " + g.hue + ")" }}>
              <div className="gcard-top">
                <AppIcon game={g} size={58} />
                <div className="gcard-titles">
                  <h3>{g.name}</h3>
                  <div className="cat">{g.category} · {g.kind}</div>
                </div>
              </div>
              <p>{g.blurb}</p>
              <div className="gcard-foot">
                {g.isNew ? <span className="newtag">New</span> : <span className="rating-inline" style={{ fontSize: 13 }}><Stars value={g.rating} gold /> {g.rating.toFixed(1)}</span>}
                <span className="getbtn"><Apple /> App Store</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reviews({ go, games, reviews }) {
  const railRef = useRefS(null);
  const byId = Object.fromEntries(games.map((g) => [g.id, g]));
  const scroll = (dir) => {
    const el = railRef.current; if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.8), behavior: scrollBehavior() });
  };
  const avg = (games.reduce((a, g) => a + g.rating, 0) / games.length);
  return (
    <section id="reviews" className="section-pad">
      <div className="wrap-wide">
        <div className="ratings-hero reveal" style={{ marginBottom: 56 }}>
          <div>
            <span className="eyebrow">Loved by players</span>
            <div className="bignum" style={{ marginTop: 12 }}>{avg.toFixed(1)}<span>/5</span></div>
            <div style={{ marginTop: 14 }}><Stars value={5} gold /></div>
            <p className="lead" style={{ marginTop: 18, maxWidth: 460 }}>
              Across {games.length} titles and hundreds of thousands of downloads. Here's what people say when there are no ads in the way.
            </p>
          </div>
          <div>
            <div className="review-rail" ref={railRef} tabIndex={0} role="region" aria-label="Player reviews, scrollable">
              {reviews.map((r, i) => {
                const g = byId[r.game];
                return (
                  <figure className="rcard" key={i} style={{ "--game": "oklch(0.6 0.16 " + g.hue + ")" }}>
                    <Stars value={r.stars} gold />
                    <blockquote className="quote" style={{ margin: 0 }}>"{r.quote}"</blockquote>
                    <figcaption className="rcard-foot">
                      <AppIcon game={g} size={40} />
                      <span className="who"><b>{g.name}</b><span>{r.author}</span></span>
                      {r.real && <span className="realtag">Verified</span>}
                    </figcaption>
                  </figure>
                );
              })}
            </div>
            <div className="rail-nav" style={{ marginTop: 22 }}>
              <button onClick={() => scroll(-1)} aria-label="Previous"><Icon name="arrow-left" style={{ width: 20, height: 20 }} /></button>
              <button onClick={() => scroll(1)} aria-label="Next"><Icon name="arrow" style={{ width: 20, height: 20 }} /></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const PILLARS = [
  { ico: "no-ads", h: "We took the ads out", p: "Most mobile sims bury you in pop-ups and timers built to sell you something. Ours don't. You paid us nothing and we still respect your attention." },
  { ico: "infinity", h: "Built to be replayed", p: "Every run branches differently: different breaks, different luck, different empire. The systems run deep enough to pull you back for one more life." },
  { ico: "lock", h: "Yours, and only yours", p: "No accounts, no email harvesting, no tracking you across apps. Your save lives on your device. That's the whole privacy policy, basically." },
];

function Why({ go }) {
  return (
    <section id="why" className="section-pad">
      <div className="wrap-wide">
        <div className="section-head reveal">
          <h2 className="display" style={{ fontSize: "clamp(30px,3.8vw,52px)" }}>Made by people who hate ads as much as you do.</h2>
        </div>
        <div className="pillars">
          {PILLARS.map((p) => (
            <div className="pillar reveal" key={p.h}>
              <div className="pico"><Icon name={p.ico} style={{ width: 30, height: 30 }} /></div>
              <h3>{p.h}</h3>
              <p>{p.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABand({ game }) {
  return (
    <section className="section-pad">
      <div className="wrap-wide">
        <div className="cta-band reveal">
          <div className="glow2"></div>
          <span className="eyebrow">Start your come-up</span>
          <h2 style={{ marginTop: 14 }}>Pick a life. Climb to the top.</h2>
          <p className="lead">Free on the App Store. No ads, no accounts. Download and you're playing in seconds.</p>
          <div style={{ display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <AppStore url={game.url} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ go }) {
  return (
    <footer className="foot">
      <div className="wrap-wide">
        <div className="foot-grid">
          <div>
            <button type="button" className="brand" onClick={() => go({ name: "home" })} aria-label="Chimpanzee home"><img className="brand-logo" src="chimp-logo.png" alt="" width="30" height="30" /><span>Chimpanzee</span></button>
            <p className="foot-blurb">Ad-free life-simulation career games for iOS.</p>
          </div>
          <div>
            <h4>Legal</h4>
            <ul>
              <li><button type="button" onClick={() => go({ name: "privacy" })}>Privacy Policy</button></li>
              <li><button type="button" onClick={() => go({ name: "terms" })}>Terms</button></li>
              <li><a href={"mailto:" + window.STUDIO.email}>Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Chimpanzee, LLC · All rights reserved</span>
          <span>Designed for iOS · Made in the USA</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, TrustStrip, Catalog, Reviews, Why, CTABand, Footer });