// Auckify landing — Hero + Games sections
const SPR = "../../assets/sprites";
const GAMES_DIR = "../../assets/games";

function TrustItem({ glyph, glyphColor, lines }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span aria-hidden="true" style={{ fontSize: 22, color: glyphColor || "var(--auck-navy)", lineHeight: 1 }}>{glyph}</span>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, color: "var(--auck-navy)", lineHeight: 1.3, whiteSpace: "nowrap" }}>
        {lines[0]}<br />{lines[1]}
      </span>
    </div>
  );
}

function Hero() {
  const { Button } = window.AuckifyDesignSystem_15ec7b;
  return (
    <section data-screen-label="Hero" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", alignItems: "center", gap: 40, padding: "56px 0 72px" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <h1 style={{ fontSize: "var(--text-hero)", position: "relative" }}>
          Cute Casual<br />Games for<br />
          <span style={{ color: "var(--auck-yellow)" }}>Everyone</span>
          <img src={`${SPR}/deco-sparkle.png`} alt="" style={{ width: 34, marginLeft: 10, verticalAlign: "baseline" }} />
        </h1>
        <p style={{ fontSize: "var(--text-body-lg)", color: "var(--text-body)", maxWidth: 440 }}>
          Relax, have fun, and challenge your brain with our collection of adorable casual games. Play anytime, anywhere, completely free!
        </p>
        <div style={{ display: "flex", gap: 16 }}>
          <Button variant="primary" size="lg" icon="play" onClick={() => { const el = document.getElementById("games"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>Play Now</Button>
          <Button variant="secondary" size="lg" onClick={() => { const el = document.getElementById("games"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>Explore Games</Button>
        </div>
        <div style={{ display: "flex", gap: 36, marginTop: 12 }}>
          <TrustItem glyph="✔" lines={["Safe & Family", "Friendly"]} />
          <TrustItem glyph="♥" lines={["Play Anytime,", "Anywhere"]} />
          <TrustItem glyph="★" glyphColor="var(--auck-yellow)" lines={["Free to Play", "Always"]} />
        </div>
      </div>
      <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
        <div style={{ position: "absolute", width: 420, height: 420, borderRadius: "50%", background: "var(--surface-hero-circle)" }}></div>
        <img src={`${SPR}/duck-mascot-large.png`} alt="Auckify duck mascot" style={{ position: "relative", width: 400, filter: "drop-shadow(0 18px 28px rgba(27,37,89,0.18))" }} />
      </div>
    </section>
  );
}

const GAME_LIST = [
  { img: "duck-doku", title: "Duck Queen Sudoku", desc: "Find every duck, crack the grid!", url: "../../games/duck-doku/index.html" },
  { img: "story-puzzle", title: "Duck Puzzle", desc: "Piece together the picture!", url: "../../games/story-puzzle/index.html" },
  { img: "match-3-blast", title: "Match-3 Blast", desc: "Match, blast and enjoy endless fun!" },
  { img: "line-connect", title: "Line Connect", desc: "Connect the dots, complete the flow!" },
  { img: "tile-match", title: "Tile Match", desc: "Match tiles and clear the board!" },
  { img: "ball-sort-puzzle", title: "Ball Sort Puzzle", desc: "Sort the balls, color by color!" },
];

function GamesSection() {
  const { SectionTitle, GameCard } = window.AuckifyDesignSystem_15ec7b;
  return (
    <section data-screen-label="Games" id="games" style={{ padding: "24px 0 64px" }}>
      <SectionTitle subtitle="So fun, so easy to relax, think, and enjoy!" sparkBase={SPR}>Explore Our Games</SectionTitle>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 36 }}>
        {GAME_LIST.map((g) => (
          <GameCard
            key={g.title}
            image={`${GAMES_DIR}/${g.img}.png`}
            title={g.title}
            description={g.desc}
            playLabel={g.url ? "Play" : "Coming Soon"}
            disabled={!g.url}
            onPlay={g.url ? () => { window.location.href = g.url; } : undefined}
          />
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { AuckHero: Hero, AuckGamesSection: GamesSection });