// Auckify landing — Why / Featured / CTA sections
const SPR2 = "../../assets/sprites";

function WhySection() {
  const { FeatureItem } = window.AuckifyDesignSystem_15ec7b;
  const items = [
    { icon: "icon-circle-gamepad", title: "Easy to Play", desc: "Simple controls and intuitive gameplay for everyone." },
    { icon: "icon-circle-relax", title: "Relaxing Experience", desc: "Unwind and de-stress with soothing, satisfying games." },
    { icon: "icon-circle-brain", title: "Brain Training", desc: "Boost your logic, memory, and problem-solving skills." },
    { icon: "icon-circle-people", title: "Games for Everyone", desc: "Perfect for all ages. Fun for the whole family!" },
  ];
  return (
    <section data-screen-label="Why Auckify" id="features" style={{ padding: "16px 0 56px" }}>
      <h2 style={{ fontSize: "var(--text-h2)", textAlign: "center" }}>Why Auckify?</h2>
      <div style={{ marginTop: 32, background: "var(--surface-card)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-card)", boxShadow: "var(--shadow-card)", padding: "36px 24px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
        {items.map((it, i) => (
          <div key={it.title} style={{ padding: "0 18px", borderLeft: i ? "1px solid var(--border-card)" : "none" }}>
            <FeatureItem icon={`${SPR2}/${it.icon}.png`} title={it.title} description={it.desc} />
          </div>
        ))}
      </div>
    </section>
  );
}

function FeaturedBanner() {
  const { Badge, Button } = window.AuckifyDesignSystem_15ec7b;
  return (
    <section data-screen-label="Featured Game" style={{ padding: "8px 0 48px" }}>
      <div style={{ background: "var(--surface-cream)", borderRadius: "var(--radius-banner)", padding: "48px 56px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 40, alignItems: "center", position: "relative", overflow: "hidden" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 18 }}>
          <Badge>Featured Game</Badge>
          <h3 style={{ fontSize: "var(--text-h3)" }}>Wood Block Puzzle</h3>
          <p style={{ fontSize: "var(--text-body-md)", color: "var(--text-body)", maxWidth: 380 }}>
            A classic puzzle game that's easy to learn and hard to put down. Clear lines, earn high scores, and train your mind!
          </p>
          <Button variant="primary" icon="play">Play Now</Button>
        </div>
        <div style={{ position: "relative", minHeight: 280 }}>
          <img src="../../assets/games/wood-block-puzzle.png" alt="Wood Block Puzzle board" style={{ width: "82%", borderRadius: 18, display: "block", margin: "0 auto", boxShadow: "var(--shadow-sticker)" }} />
          <img src={`${SPR2}/blocks-yellow-L.png`} alt="" style={{ position: "absolute", left: -18, top: -8, width: 96 }} />
          <img src={`${SPR2}/blocks-green-2x2.png`} alt="" style={{ position: "absolute", right: -10, top: -22, width: 86 }} />
          <img src={`${SPR2}/block-pink-cube.png`} alt="" style={{ position: "absolute", right: 30, bottom: -14, width: 60 }} />
        </div>
      </div>
    </section>
  );
}

function CtaBanner() {
  const { Button } = window.AuckifyDesignSystem_15ec7b;
  return (
    <section data-screen-label="Ready to Play" style={{ padding: "8px 0 64px" }}>
      <div style={{ background: "var(--surface-cream)", borderRadius: "var(--radius-banner)", padding: "40px 56px", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }}>
        <img src={`${SPR2}/duck-mascot-small.png`} alt="" style={{ width: 170 }} />
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14, position: "relative" }}>
          <img src={`${SPR2}/deco-star-yellow.png`} alt="" style={{ position: "absolute", left: -10, top: -6, width: 34, opacity: 0.9 }} />
          <img src={`${SPR2}/deco-star-purple.png`} alt="" style={{ position: "absolute", right: -4, bottom: 10, width: 28, opacity: 0.9 }} />
          <h3 style={{ fontSize: "var(--text-h3)" }}>Ready to Play?</h3>
          <p style={{ fontSize: "var(--text-body-md)", color: "var(--text-body)" }}>Jump into fun, relaxing games anytime, anywhere.</p>
          <div style={{ display: "flex", gap: 16 }}>
            <Button variant="primary" icon="play">Play Online</Button>
            <Button variant="secondary" icon="download">Download App</Button>
          </div>
        </div>
        <img src={`${SPR2}/phone-game.png`} alt="" style={{ width: 130 }} />
      </div>
    </section>
  );
}

Object.assign(window, { AuckWhySection: WhySection, AuckFeaturedBanner: FeaturedBanner, AuckCtaBanner: CtaBanner });