import Head from "next/head";
import styles from "@/styles/Home.module.css";

export default function Home() {
  return (
    <>
      <Head>
        <title>Bone Lord Bob — American Anime</title>
        <meta name="description" content="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon." />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />

        {/* Open Graph */}
        <meta property="og:title" content="Bone Lord Bob" />
        <meta property="og:description" content="American Anime. Dark. Brutal. Beautiful." />
        <meta property="og:type" content="website" />
      </Head>

      <div className={styles.page}>

        {/* ── Nav ─────────────────────────────────────────────────────── */}
        <nav className={styles.nav}>
          <span className={styles.navLogo}>
            Bone Lord <span>Bob</span>
          </span>
          <ul className={styles.navLinks}>
            <li><a href="#about">About</a></li>
            <li><a href="#characters">Characters</a></li>
            <li><a href="#follow">Follow</a></li>
          </ul>
        </nav>

        {/* ── Hero ────────────────────────────────────────────────────── */}
        <section className={styles.hero}>
          <div className={styles.heroBg} />
          <div className={styles.heroContent}>
            <span className={styles.eyebrow}>American Anime</span>
            <h1 className={styles.heroTitle}>
              Bone Lord <em>Bob</em>
            </h1>
            <p className={styles.heroSub}>
              A story born from the bones of American myth. Dark. Brutal. Alive.
              An original anime series unlike anything you&apos;ve seen before.
            </p>
            <div className={styles.heroCtas}>
              <a href="#about" className={styles.btnPrimary}>
                Enter the World
              </a>
              <a href="#follow" className={styles.btnSecondary}>
                Stay Updated
              </a>
            </div>
          </div>
        </section>

        {/* ── Divider ─────────────────────────────────────────────────── */}
        <div className={styles.divider}>
          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
            <span key={i} className={styles.dividerSkull}>{s}</span>
          ))}
          <span className={styles.dividerText}>Coming Soon</span>
          {["💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀", "💀"].map((s, i) => (
            <span key={i} className={styles.dividerSkull}>{s}</span>
          ))}
        </div>

        {/* ── About ───────────────────────────────────────────────────── */}
        <section id="about" className={styles.about}>
          <div>
            <span className={styles.sectionLabel}>The Project</span>
            <h2 className={styles.sectionTitle}>
              American stories.<br />Anime soul.
            </h2>
            <p className={styles.sectionBody}>
              Bone Lord Bob is an original American Anime project — a dark, hand-crafted
              universe that pulls from the grit of American storytelling and channels it
              through the visual language of anime.
            </p>
            <p className={styles.sectionBody}>
              Not an adaptation. Not a tribute. Something new.
              A world of bone and blood and meaning, built from scratch.
            </p>
          </div>
          <div className={styles.aboutVisual}>
            <span className={styles.aboutPlaceholder}>💀</span>
          </div>
        </section>

        {/* ── Characters ──────────────────────────────────────────────── */}
        <section id="characters" className={styles.characters}>
          <div className={styles.sectionHeader}>
            <span className={styles.sectionLabel}>The Cast</span>
            <h2 className={styles.sectionTitle}>Characters</h2>
            <p className={styles.sectionBody}>
              Every soul in this world has a price. Meet the ones who pay it.
            </p>
          </div>
          <div className={styles.characterGrid}>
            <div className={styles.characterCard}>
              <span className={styles.characterEmoji}>🦴</span>
              <h3 className={styles.characterName}>Bone Lord Bob</h3>
              <p className={styles.characterRole}>The Protagonist</p>
              <p className={styles.characterDesc}>
                A man cursed to walk between worlds — carrying the weight
                of the dead and the rage of the living. He answers to no one.
              </p>
            </div>
            <div className={styles.characterCard}>
              <span className={styles.characterEmoji}>🔥</span>
              <h3 className={styles.characterName}>???</h3>
              <p className={styles.characterRole}>Coming Soon</p>
              <p className={styles.characterDesc}>
                More characters will be revealed as the story unfolds.
                The roster is deep. The world is darker than it looks.
              </p>
            </div>
            <div className={styles.characterCard}>
              <span className={styles.characterEmoji}>⚔️</span>
              <h3 className={styles.characterName}>???</h3>
              <p className={styles.characterRole}>Coming Soon</p>
              <p className={styles.characterDesc}>
                Every legend needs its foil. Every bone lord needs someone
                willing to break them.
              </p>
            </div>
          </div>
        </section>

        {/* ── Follow CTA ──────────────────────────────────────────────── */}
        <section id="follow" className={styles.cta}>
          <div className={styles.ctaContent}>
            <span className={styles.sectionLabel}>Stay in the loop</span>
            <h2 className={styles.ctaTitle}>
              The story is <em>coming</em>.
            </h2>
            <p className={styles.sectionBody}>
              Bone Lord Bob is in active development. Follow along as the
              world takes shape — art, lore, characters, and more.
            </p>
            <a
              href="https://x.com/bonelordbob"
              className={styles.btnPrimary}
              target="_blank"
              rel="noopener noreferrer"
            >
              Follow on X
            </a>
          </div>
        </section>

        {/* ── Footer ──────────────────────────────────────────────────── */}
        <footer className={styles.footer}>
          <span className={styles.footerLogo}>
            Bone Lord <span>Bob</span>
          </span>
          <span className={styles.footerNote}>
            © {new Date().getFullYear()} Mathison Projects Inc. All rights reserved.
          </span>
        </footer>

      </div>
    </>
  );
}
