const { useEffect, useRef, useState } = React;

const EDITOR_BASE = "https://app.houserulescards.com.au";

const games = [
  {
    id: "privacy-breach",
    word: "People",
    name: "Privacy Breach",
    availability: "Available now · Party Game",
    eyebrow: "For the friends who know too much",
    description:
      "Exploding Kittens & Werewolf style party deck. Personalised photos become the characters. Your group becomes the game.",
    prompt: "Who is most likely to read the group chat and not reply?",
    accent: "#3ca9ff",
    pale: "#d9eefd",
    image: "/images/people.jpg",
    alt: "Friends gathered around a table",
    price: "A$75.00",
    sticker: "BESTSELLER",
    editorUrl: `${EDITOR_BASE}/app/privacy-breach`,
    howToPlayUrl: `${EDITOR_BASE}/how-to-play/privacy-breach.html`,
  },
  {
    id: "poker-deck",
    word: "Memories",
    name: "Poker Deck",
    availability: "Available now · Classic 54-card deck",
    eyebrow: "Your crew on every Court card",
    description:
      "A full 54-card playing deck. Court cards (Kings, Queens, Jacks) and custom card backs become your people; pips stay classic.",
    prompt: "Put your best mate as the King of Spades and Mum on the Queen.",
    accent: "#ff6f3c",
    pale: "#fff0ea",
    image: "/images/memories.jpg",
    alt: "Personalised playing cards",
    price: "A$75.00",
    editorUrl: `${EDITOR_BASE}/app/poker-deck`,
  },
  {
    id: "match-it",
    word: "Reflexes",
    name: "Match It!",
    availability: "Available now · Fast-paced matching game",
    eyebrow: "For the eagle-eyed friends and family",
    description:
      "A fast-paced visual matching deck. Find the matching photo, icon, or inside joke between any two cards before anyone else calls it out!",
    prompt: "Which two cards share the exact same embarrassing photo?",
    accent: "#2665b1",
    pale: "#e4ecff",
    image: "/images/inside-jokes.jpg",
    alt: "Friends playing Match It matching card game",
    price: "A$75.00",
    editorUrl: `${EDITOR_BASE}/app/match-it`,
  },
  {
    id: "guess-who",
    word: "Faces",
    name: "Guess Who?",
    availability: "Available now · Face-guessing game",
    eyebrow: "For the nosy friends and family",
    description:
      "Twenty-four favourite faces turned into a personalised Guess Who? set. Ask yes or no questions to narrow it down — who could it be?",
    prompt: "Is your person someone who still owes me money?",
    accent: "#e05a2b",
    pale: "#fff0ea",
    image: "/images/people.jpg",
    alt: "Friends playing Guess Who card game",
    price: "A$75.00",
    editorUrl: `${EDITOR_BASE}/app/guess-who`,
  },
  {
    id: "top-trumps",
    word: "Stats",
    name: "Top Trumps & Stats",
    availability: "Available now · 4 distinct styles",
    eyebrow: "Stat-driven trading cards",
    description:
      "Stat-driven trading cards for footy teams, friends, pets, or family. Choose Classic, Archive, Sports Card, or Pokémon style.",
    prompt: "Rate your mates on Loyalty, Chaos Factor, and Cooking Ability.",
    accent: "#2488a8",
    pale: "#d9f1f4",
    image: "/images/team.jpg",
    alt: "Custom stat trading cards",
    price: "A$75.00",
    sticker: "POPULAR",
    editorUrl: `${EDITOR_BASE}/app/sports-cards-picker`,
  },
  {
    id: "make-your-own",
    word: "Canvas",
    name: "Make Your Own",
    availability: "Available now · Blank canvas builder",
    eyebrow: "Pure freedom for bespoke decks",
    description:
      "A blank canvas deck builder. You bring the rules, photos, stats, and layout — we print it on premium gaming stock.",
    prompt: "Create your own custom rules, prompts, and deck mechanics.",
    accent: "#8b5cf6",
    pale: "#f3e8ff",
    image: "/images/people.jpg",
    alt: "Custom blank canvas card deck",
    price: "A$75.00",
    editorUrl: `${EDITOR_BASE}/app/make-your-own`,
  },
];

const topTrumpsStyles = [
  {
    id: "top-trumps-classic",
    name: "Classic",
    blurb: "Clean modern stats card. Pick your categories, add your people.",
    pip: "♠",
    accent: "#3ca9ff",
    editorUrl: `${EDITOR_BASE}/app/sports-cards-picker`,
  },
  {
    id: "top-trumps-archive",
    name: "Archive Edition",
    blurb: "Vintage newspaper aesthetic. Classy stats for classy people.",
    pip: "♦",
    accent: "#ec4899",
    editorUrl: `${EDITOR_BASE}/app/sports-cards-picker`,
  },
  {
    id: "sports-cards",
    name: "Sports Card Edition",
    blurb: "Stats, photos, and ratings everyone argues about on game day.",
    pip: "♣",
    accent: "#f59e0b",
    editorUrl: `${EDITOR_BASE}/app/sports-cards-picker`,
  },
  {
    id: "top-trumps-pokemon",
    name: "Pokémon Style",
    blurb: "Type matchups, HP, special moves. Gotta personalise them all.",
    pip: "★",
    accent: "#10b981",
    editorUrl: `${EDITOR_BASE}/app/sports-cards-picker`,
  },
];

const occasions = [
  ["♥", "Birthdays", "A gift that gets the whole table talking and laughing."],
  ["♦", "Weddings", "Bring speeches, stories, and healthy mischief back home."],
  ["♣", "Families", "Turn old favorites and legendary stories into a new family tradition."],
  ["♠", "Teams & clubs", "Your crew’s legends, quirks, and recurring scoreboard myths."],
  ["♥", "Farewells", "A proper send-off full of the people and moments they’ll miss."],
  ["♦", "Christmas", "One present. Years of highly competitive family rematches."],
];

const reviews = [
  {
    stars: 5,
    quote: "Gave my dad the Top Trumps deck of his football mates for his 70th. He hasn’t put it down.",
    name: "Priya R.",
    deck: "Top Trumps",
  },
  {
    stars: 5,
    quote: "Made a Werewolf deck where my flatmates are the villagers. Game night is unhinged now.",
    name: "Sam W.",
    deck: "Privacy Breach",
  },
  {
    stars: 5,
    quote: "Two days from order to door. Mum cried, then said 'oh god is that me on the Queen'.",
    name: "Jess A.",
    deck: "Poker Deck",
  },
];

const examples = [
  ["DAD’S 60TH BIRTHDAY", "A big birthday deck stacked with backyard stories and dad-isms.", "Poker Deck"],
  ["THE SATURDAY FOOTBALL CREW", "An end-of-season game full of legendary kicks and scoreboard myths.", "Top Trumps"],
  ["OUR FAMILY TIMELINE", "A playful timeline for the moments no one can agree happened when.", "Spot It"],
];

function ProductComposition({ game }) {
  return (
    <div className="product-stage" style={{ "--accent": game.accent }}>
      <div className="stage-glow" />
      <div className="photo-card">
        <img src={game.image.replace("/images/", "images/")} alt={game.alt} />
        <span>Made with your real photos</span>
      </div>
      <div className="game-box">
        <small>{game.availability}</small>
        <strong>{game.name}</strong>
        <span>House Rules</span>
      </div>
      <div className="prompt-card">
        <small>{game.eyebrow}</small>
        <strong>{game.prompt}</strong>
      </div>
      <div className="player-badge">Made for<br />your people</div>
    </div>
  );
}

function Hero() {
  const [active, setActive] = useState(0);
  const [visible, setVisible] = useState(true);
  const heroRef = useRef(null);
  const game = games[active];

  useEffect(() => {
    if (!heroRef.current || typeof IntersectionObserver === "undefined") return;
    const observer = new IntersectionObserver(
      ([entry]) => setVisible(entry.isIntersecting),
      { threshold: 0.15 },
    );
    observer.observe(heroRef.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!visible || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const timer = window.setInterval(
      () => setActive((current) => (current + 1) % games.length),
      8000,
    );
    return () => window.clearInterval(timer);
  }, [visible]);

  return (
    <section className="hero shell" ref={heroRef}>
      <div className="hero-copy">
        <div className="eyebrow-pill">Personalised card games · Printed & Posted in Australia</div>
        <h1>Your own game,<br />for your own person.</h1>
        <p className="made-line">
          Turn your{" "}
          <span key={game.word} style={{ color: game.accent }}>{game.word.toLowerCase()}.</span>
          {" "}into the game.
        </p>
        <p className="hero-description" key={game.description}>
          {game.description}
        </p>
        <div className="hero-actions">
          <a className="button button-primary" href={game.editorUrl} target="_blank" rel="noreferrer">
            Start your deck ({game.price})
          </a>
          <a className="button button-secondary" href="#choose-a-game">
            Explore formats <span>↓</span>
          </a>
        </div>
        <ul className="proof-list" aria-label="Order benefits">
          <li><span>✓</span> Made from your real photos</li>
          <li><span>✓</span> Live preview before ordering</li>
          <li><span>✓</span> Printed on premium gaming stock here in Australia</li>
          <li><span>✓</span> ★★★★★ 4.8 · 139+ reviews · Posted same business day</li>
        </ul>
      </div>
      <div className="hero-product" aria-live="polite">
        <div className="product-swap" key={game.name}><ProductComposition game={game} /></div>
        <div className="game-tabs" role="group" aria-label="Preview a game style">
          {games.map((item, index) => (
            <button
              key={item.word}
              type="button"
              aria-pressed={active === index}
              style={{ "--tab-accent": item.accent }}
              onClick={() => setActive(index)}
            >
              {item.word}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function GameCard({ game }) {
  return (
    <article className="game-card" style={{ "--accent": game.accent, "--pale": game.pale }}>
      {game.sticker && (
        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 8 }}>
          <span style={{
            background: "var(--ink)", color: "#ffffff", fontSize: 11, fontWeight: 700,
            letterSpacing: ".12em", padding: "4px 10px", borderRadius: 999, textTransform: "uppercase"
          }}>
            ★ {game.sticker}
          </span>
        </div>
      )}
      <div className="game-card-art">
        <div className="mini-photo"><img src={game.image.replace("/images/", "images/")} alt="" /></div>
        <div className="mini-box">
          <small>{game.availability}</small>
          <strong>{game.name}</strong>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 20 }}>
        <p className="availability" style={{ margin: 0 }}>{game.availability}</p>
        <span style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>From {game.price}</span>
      </div>
      <h3>{game.name}</h3>
      <p>{game.description}</p>
      
      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 18, alignItems: "center" }}>
        <a className="button button-primary" style={{ height: 42, minHeight: 42, padding: "0 18px", fontSize: 14 }} href={game.editorUrl} target="_blank" rel="noreferrer">
          Customise {game.name} <span>→</span>
        </a>
        {game.howToPlayUrl && (
          <a className="text-link" style={{ margin: 0, fontSize: 13 }} href={game.howToPlayUrl} target="_blank" rel="noreferrer">
            ▸ How to play
          </a>
        )}
      </div>
    </article>
  );
}

function Home() {
  return (
    <main>
      <header className="site-header">
        <nav className="nav shell" aria-label="Primary navigation">
          <a className="brand" href="#top">
            <img src="mark.png" alt="House Rules logo" />
            <span>House Rules</span>
          </a>
          <div className="nav-links">
            <a href="#materials">The Good Stuff</a>
            <a href="#choose-a-game">Formats</a>
            <a href="#how-it-works">How it works</a>
            <a href="#occasions">Occasions</a>
            <a href="#reviews">Reviews</a>
            <a className="nav-cta" href="#choose-a-game">Make a game</a>
          </div>
        </nav>
      </header>
      <div id="top" />
      <Hero />

      {/* MATERIALS & QUALITY ("The Good Stuff") */}
      <section className="materials-section shell" id="materials" style={{ margin: "40px auto 60px" }}>
        <div className="materials-copy">
          <p className="kicker">The good stuff</p>
          <h2>Printed here. Played everywhere.</h2>
          <p>Made in Australia on premium gaming card stock, with a live interactive preview before you order and fast tracked delivery to get the good times moving.</p>
        </div>
        <ul className="materials-list">
          <li><span>♠</span> Premium gaming card stock</li>
          <li><span>♥</span> Australian production & local shipping</li>
          <li><span>♦</span> Same business day dispatch</li>
          <li><span>♣</span> Live instant preview in editor</li>
        </ul>
      </section>

      {/* GAME FORMATS */}
      <section className="games-section shell" id="choose-a-game">
        <div className="section-heading split-heading">
          <div>
            <p className="kicker">The House Rules shelf</p>
            <h2>Five flavours of custom deck.</h2>
          </div>
          <p>Each editor is purpose-built. Pick a format below to open its live interactive builder.</p>
        </div>
        <div className="game-grid">{games.map((game) => <GameCard game={game} key={game.name} />)}</div>
      </section>

      {/* HOW EASY IS IT? (HOW IT WORKS) */}
      <section className="shell" id="how-it-works" style={{ margin: "40px auto 70px" }}>
        <div style={{
          background: "#111827",
          color: "#ffffff",
          borderRadius: "28px",
          padding: "64px 36px",
          position: "relative",
          overflow: "hidden"
        }}>
          <div className="section-heading centered-heading" style={{ maxWidth: 680, margin: "0 auto 48px" }}>
            <p className="kicker" style={{ color: "#f59e0b", fontSize: 16 }}>How easy is it?</p>
            <h2 style={{ color: "#ffffff", fontSize: "clamp(40px, 5vw, 64px)", margin: "8px 0 0" }}>Incredibly.</h2>
          </div>

          <div className="steps-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24 }}>
            <article style={{ position: "relative", padding: "32px 26px", background: "#1f2937", border: "3px solid #ef4444", borderRadius: 18 }}>
              <div style={{ fontFamily: '"Savate", sans-serif', fontSize: 72, lineHeight: 0.9, color: "#ef4444", fontWeight: 700 }}>01</div>
              <div style={{ position: "absolute", top: 22, right: 24, fontSize: 32, color: "#ef4444" }}>♥</div>
              <h3 style={{ fontFamily: '"Savate", sans-serif', fontSize: 26, margin: "14px 0 8px", color: "#ffffff" }}>Pick a format</h3>
              <p style={{ fontSize: 15, lineHeight: 1.5, color: "#d1d5db", margin: 0 }}>Poker decks, Privacy Breach, Spot It, Top Trumps / Stats Cards, or a blank slate.</p>
            </article>

            <article style={{ position: "relative", padding: "32px 26px", background: "#1f2937", border: "3px solid #f59e0b", borderRadius: 18 }}>
              <div style={{ fontFamily: '"Savate", sans-serif', fontSize: 72, lineHeight: 0.9, color: "#f59e0b", fontWeight: 700 }}>02</div>
              <div style={{ position: "absolute", top: 22, right: 24, fontSize: 32, color: "#f59e0b" }}>♦</div>
              <h3 style={{ fontFamily: '"Savate", sans-serif', fontSize: 26, margin: "14px 0 8px", color: "#ffffff" }}>Build it in a few clicks!</h3>
              <p style={{ fontSize: 15, lineHeight: 1.5, color: "#d1d5db", margin: 0 }}>Drag in photos. Type the names. Add the inside jokes. Live preview as you go.</p>
            </article>

            <article style={{ position: "relative", padding: "32px 26px", background: "#1f2937", border: "3px solid #10b981", borderRadius: 18 }}>
              <div style={{ fontFamily: '"Savate", sans-serif', fontSize: 72, lineHeight: 0.9, color: "#10b981", fontWeight: 700 }}>03</div>
              <div style={{ position: "absolute", top: 22, right: 24, fontSize: 32, color: "#10b981" }}>♣</div>
              <h3 style={{ fontFamily: '"Savate", sans-serif', fontSize: 26, margin: "14px 0 8px", color: "#ffffff" }}>Posted the same day</h3>
              <p style={{ fontSize: 15, lineHeight: 1.5, color: "#d1d5db", margin: 0 }}>We print on premium gaming card stock and post it the same day via Australia Express Post. Most decks arrive in 2-3 working days after submitting!</p>
            </article>
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
            <a href="#choose-a-game" className="button" style={{ background: "#f59e0b", color: "#111827", border: "none", fontWeight: 700, padding: "14px 32px", borderRadius: 12, textDecoration: "none", fontSize: 16, boxShadow: "0 10px 24px rgba(245, 158, 11, 0.3)" }}>
              Start yours →
            </a>
          </div>
        </div>
      </section>

      {/* EXAMPLES */}
      <section className="examples-section shell" id="examples">
        <div className="section-heading split-heading">
          <div><p className="kicker">Concepts to make yours</p><h2>Made for real people.</h2></div>
          <p>Start with the people you know best, then give the finished game a name that makes it theirs.</p>
        </div>
        <div className="example-grid">
          {examples.map(([title, copy, deck], index) => (
            <article className="example-card" key={title}>
              <div className={"example-photo example-" + index}><span>{deck}</span></div>
              <h3>{title}</h3>
              <p>{copy}</p>
            </article>
          ))}
        </div>
      </section>

      {/* REVIEWS BAND ("What players say") */}
      <section className="shell" id="reviews" style={{ padding: "40px 0 80px" }}>
        <div className="section-heading centered-heading">
          <p className="kicker">What players say</p>
          <h2>"Why didn't this exist already?"</h2>
          <p>Rated ★★★★★ 4.8 out of 5 across 139+ reviews from deck builders nationwide.</p>
        </div>
        <div className="occasion-grid" style={{ marginTop: 36 }}>
          {reviews.map((r, i) => (
            <article className="occasion-card" key={i} style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div style={{ color: "#f59e0b", fontSize: 20, letterSpacing: ".1em", marginBottom: 12 }}>
                  {"★".repeat(r.stars)}
                </div>
                <p style={{ fontSize: 18, fontStyle: "italic", color: "var(--ink)", lineHeight: 1.35 }}>"{r.quote}"</p>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 20, paddingTop: 14, borderTop: "1px dashed #dbe5ec", fontSize: 13, fontWeight: 700 }}>
                <span>{r.name}</span>
                <span style={{ color: "var(--blue)", textTransform: "uppercase", letterSpacing: ".08em" }}>{r.deck}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* CLOSING CTA */}
      <section className="closing shell" style={{ marginTop: 20 }}>
        <p className="kicker dark-kicker">House Rules · Games made personal</p>
        <h2>They already have enough stuff. Make them a game.</h2>
        <p>Personalised card games for the people who make your life more fun.</p>
        <div className="hero-actions">
          <a className="button closing-button" href="#choose-a-game">Start your game</a>
          <a className="button closing-secondary" href="#choose-a-game">Browse all formats <span>→</span></a>
        </div>
      </section>

      <footer className="footer shell">
        <a className="brand" href="#top">
          <img src="mark.png" alt="House Rules logo" />
          <span>House Rules</span>
        </a>
        <p>Printed & shipped in Australia · All rights reserved</p>
      </footer>
    </main>
  );
}