silma-bone-lord-bob/pages/index.tsx

import Image from "next/image";
import styles from "@/styles/Home.module.css";
import SiteLayout from "@/pages/components/SiteLayout";

const SOCIALS = [
  {
    name: "YouTube",
    handle: "@bonelordbob",
    url: "https://www.youtube.com/@bonelordbob",
    icon: "▶",
    color: "#ff0000",
  },
  {
    name: "Instagram",
    handle: "@bonelordbob",
    url: "https://www.instagram.com/bonelordbob",
    icon: "📷",
    color: "#e1306c",
  },
  {
    name: "Facebook",
    handle: "Bone Lord Bob",
    url: "https://www.facebook.com/profile.php?id=61580718487639",
    icon: "f",
    color: "#1877f2",
  },
  {
    name: "X / Twitter",
    handle: "@BoneLordBob",
    url: "https://x.com/BoneLordBob",
    icon: "𝕏",
    color: "#e8dcc8",
  },
  {
    name: "Patreon",
    handle: "BoneLordBob",
    url: "https://www.patreon.com/c/BoneLordBob",
    icon: "P",
    color: "#ff424d",
  },
  {
    name: "TikTok",
    handle: "@bonelordbob",
    url: "https://www.tiktok.com/@bonelordbob",
    icon: "♪",
    color: "#69c9d0",
  },
];

export default function Home() {
  return (
    <SiteLayout
      title="Bone Lord Bob — American Anime"
      description="Bone Lord Bob is an American Anime project — dark, brutal, beautiful. Coming soon."
      keywords="Bone Lord Bob, BLB, American Anime, indie anime, dark fantasy anime, original anime series, animated series, dark fantasy, American animation, independent animation, bone kingdom"
      canonical="/"
    >
      <div className={styles.page}>
        {/* ── 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}>
          {Array.from({ length: 10 }).map((_, i) => (
            <span key={`l${i}`} className={styles.dividerSkull}>💀</span>
          ))}
          <span className={styles.dividerText}>Coming Soon</span>
          {Array.from({ length: 10 }).map((_, i) => (
            <span key={`r${i}`} className={styles.dividerSkull}>💀</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}>
            <Image
              src="/char-blb-throne.png"
              alt="Bone Lord Bob on his throne"
              width={500}
              height={500}
              className={styles.aboutLogo}
              style={{ borderRadius: "8px", border: "1px solid rgba(160,100,255,0.2)" }}
              priority
            />
          </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>

            {/* Social grid */}
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
                gap: "12px",
                marginTop: "32px",
                maxWidth: "700px",
                width: "100%",
              }}
            >
              {SOCIALS.map((s) => (
                <a
                  key={s.name}
                  href={s.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "10px",
                    padding: "12px 16px",
                    background: "#1a1510",
                    border: "1px solid rgba(232,220,200,0.12)",
                    borderRadius: "6px",
                    color: "#e8dcc8",
                    textDecoration: "none",
                    transition: "border-color 0.2s, background 0.2s",
                  }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLAnchorElement).style.borderColor = s.color;
                    (e.currentTarget as HTMLAnchorElement).style.background = "#231e18";
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLAnchorElement).style.borderColor = "rgba(232,220,200,0.12)";
                    (e.currentTarget as HTMLAnchorElement).style.background = "#1a1510";
                  }}
                >
                  <span
                    style={{
                      fontSize: "1.1rem",
                      width: "24px",
                      textAlign: "center",
                      color: s.color,
                      fontWeight: 700,
                      flexShrink: 0,
                    }}
                  >
                    {s.icon}
                  </span>
                  <div style={{ minWidth: 0 }}>
                    <div
                      style={{
                        fontSize: "0.8rem",
                        fontWeight: 700,
                        letterSpacing: "0.05em",
                        textTransform: "uppercase",
                        color: "#9e9080",
                      }}
                    >
                      {s.name}
                    </div>
                    <div
                      style={{
                        fontSize: "0.85rem",
                        color: "#e8dcc8",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {s.handle}
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      </div>
    </SiteLayout>
  );
}