// app.jsx — Switch On Studio prototype

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF4F8F",
  "theme": "dark",
  "density": "regular"
}/*EDITMODE-END*/;

// Web3Forms access key — get a free one at https://web3forms.com (enter
// support@switchonstudio.com; they'll email you the key). Paste it below.
const WEB3FORMS_ACCESS_KEY = "f4afd7bf-ba1c-4c7d-a5e8-023af104ba81";

// Accent options keyed to brand gradient (purple → pink → orange) + neutrals.
const ACCENTS = {
  "#FF4F8F": { ink: "#ffffff", name: "Pink (brand)" },
  "#9747FF": { ink: "#ffffff", name: "Purple" },
  "#FF8540": { ink: "#1a0a04", name: "Orange" },
  "#7BE495": { ink: "#0c2418", name: "Mint" }
};

// ── Project data ─────────────────────────────────────────────
const PROJECTS = [
  {
    id: "tug-of-war",
    title: "Tug Of War",
    type: "game",
    short: "An easy tug-of-war game for families. Play together, pull to victory.",
    platform: "Android",
    code: "P-01",
    hue: 350,
    description: [
      "A free, family-friendly tug-of-war game with easy tap controls. Pull, laugh, and compete against friends on the same device or against clever AI opponents.",
      "Simple to learn, addictive to play. Unlock new color palettes for both players and backgrounds as you go."
    ],
    features: [
      "Two-player mode on a shared device",
      "Single-player with increasingly difficult AI",
      "Unlockable color palettes for players and backgrounds",
      "Easy-to-learn tap controls, perfect for all ages"
    ],
    video: "https://www.youtube.com/embed/R-XYFt6wiEk",
    screenshots: [
      "assets/shots/tug-of-war/1.webp",
      "assets/shots/tug-of-war/2.webp",
      "assets/shots/tug-of-war/3.webp",
      "assets/shots/tug-of-war/4.webp",
      "assets/shots/tug-of-war/5.webp"
    ],
    downloads: [
      {
        store: "Google Play",
        url: "https://play.google.com/store/apps/details?id=com.SwitchOnStudio.TugOfWar",
        small: "Get it on",
        big: "Google Play"
      }
    ]
  },
  {
    id: "color-shift",
    title: "Color Shift",
    type: "game",
    short: "A vibrant, reflex-based color-matching game. Easy to pick up, hard to master.",
    platform: "Android",
    code: "P-02",
    hue: 200,
    description: [
      "Tap, match, and navigate through dynamic obstacles in this fast-paced, addictive color-matching game. Test your timing and precision against a stream of vibrant challenges.",
      "Whether you have a minute or an hour, Color Shift offers quick, engaging gameplay that keeps you coming back for more."
    ],
    features: [
      "Quick-reflex color-matching gameplay",
      "Vibrant visuals and smooth animations",
      "Dynamic levels with varied obstacle patterns",
      "Easy to pick up, hard to master"
    ],
    video: null,
    screenshots: [
      "assets/shots/color-shift/1.webp",
      "assets/shots/color-shift/2.webp",
      "assets/shots/color-shift/3.webp",
      "assets/shots/color-shift/4.webp",
      "assets/shots/color-shift/5.webp",
      "assets/shots/color-shift/6.webp",
      "assets/shots/color-shift/7.webp"
    ],
    downloads: [
      {
        store: "Google Play",
        url: "https://play.google.com/store/apps/details?id=com.SwitchOnStudio.ColorShift",
        small: "Get it on",
        big: "Google Play"
      }
    ]
  },
  {
    id: "tic-tac-toe",
    title: "Tic Tac Toe",
    type: "game",
    short: "The classic, polished. Play against a friend or a smart AI opponent.",
    platform: "Android",
    code: "P-03",
    hue: 280,
    description: [
      "A clean take on the timeless classic. Play against a friend on the same device or test yourself against an AI with adjustable difficulty.",
      "Quick rounds, satisfying animations, no friction. Pull it out for a one-minute break or a longer streak."
    ],
    features: [
      "Local two-player on a shared device",
      "Single-player with smart AI",
      "Clean visuals, glow effects, smooth animations",
      "Lightweight and offline-friendly"
    ],
    video: null,
    screenshots: [
      "assets/shots/tic-tac-toe/1.webp",
      "assets/shots/tic-tac-toe/2.webp",
      "assets/shots/tic-tac-toe/3.webp",
      "assets/shots/tic-tac-toe/4.webp"
    ],
    downloads: [
      {
        store: "Google Play",
        url: "https://play.google.com/store/apps/details?id=com.SwitchOnStudio.TicTacToe",
        small: "Get it on",
        big: "Google Play"
      }
    ]
  },
  {
    id: "trackra",
    title: "Trackra",
    type: "app",
    short: "A calm money tracker. No banks, no ads, no judgement.",
    platform: "iOS · Android",
    code: "P-04",
    hue: 40,
    inDev: true,
    description: [
      "Personal finance without the dashboard fatigue. Log expenses in two taps, see where the month is going, and that's it.",
      "Local-first — your data lives on your phone unless you choose otherwise."
    ],
    features: [
      "Two-tap expense entry",
      "Local-first, end-to-end encrypted sync (opt-in)",
      "Honest monthly snapshot — no charts you don't read",
      "Recurring detector",
      "CSV / Apple Wallet export"
    ],
    video: null,
    screenshotCount: 0,
    downloads: [],
    // ── Feature comparison ────────────────────────────────────
    // Fill in real feature names + cell values later.
    // Cell values can be: true, false, "string", or { v: "string", note: "…" }
    comparison: {
      columns: [
        { key: "free",  label: "Trackra",   sub: "Free",        highlight: false },
        { key: "pro",   label: "Trackra",   sub: "Pro",         highlight: true  },
        { key: "altA",  label: "Alt App A", sub: "Competitor",  highlight: false },
        { key: "altB",  label: "Alt App B", sub: "Competitor",  highlight: false }
      ],
      groups: [
        {
          name: "Tracking",
          rows: [
            { feature: "Feature one",   free: true,  pro: true,  altA: true,  altB: false },
            { feature: "Feature two",   free: false, pro: true,  altA: true,  altB: true  },
            { feature: "Feature three", free: "—",   pro: "Yes", altA: "Yes", altB: "—"   }
          ]
        },
        {
          name: "Privacy",
          rows: [
            { feature: "Feature four",  free: true,  pro: true,  altA: false, altB: false },
            { feature: "Feature five",  free: true,  pro: true,  altA: false, altB: true  }
          ]
        },
        {
          name: "Power tools",
          rows: [
            { feature: "Feature six",   free: false, pro: true,  altA: true,  altB: false },
            { feature: "Feature seven", free: false, pro: true,  altA: false, altB: false },
            { feature: "Feature eight", free: false, pro: true,  altA: "Add-on", altB: "—" }
          ]
        },
        {
          name: "Pricing",
          rows: [
            { feature: "Price",         free: "$0",  pro: "$X / yr", altA: "$Y / yr", altB: "$Z / mo" },
            { feature: "Free trial",    free: "—",   pro: "14 days", altA: "7 days",  altB: "—"      }
          ]
        }
      ]
    }
  }
];

// ── Social links ─────────────────────────────────────────────
const SOCIALS = [
  { name: "Google Play", url: "https://play.google.com/store/apps/dev?id=5454228516552923967" },
  { name: "YouTube",     url: "https://www.youtube.com/@switchonstudio" },
  { name: "X",           url: "https://x.com/SwitchOnStudio" },
  { name: "Instagram",   url: "https://www.instagram.com/switch.onstudio/" },
  { name: "Facebook",    url: "https://www.facebook.com/switchonstudio/" }
];

// Brand glyphs (Simple Icons paths, 24×24, fill = currentColor).
const SOCIAL_ICONS = {
  "Google Play": "M3.609 1.814L13.792 12 3.609 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .61-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.59 12l2.108-2.491zM5.864 2.658L16.802 8.99l-2.302 2.302-8.636-8.634z",
  "YouTube": "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
  "X": "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
  "Instagram": "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z",
  "Facebook": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
};

function SocialIcon({ name, size = 18 }) {
  const path = SOCIAL_ICONS[name];
  if (!path) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d={path} />
    </svg>
  );
}

function SocialLinks({ className = "", size }) {
  return (
    <div className={"socials " + className}>
      {SOCIALS.map(s => (
        <a key={s.name} href={s.url} target="_blank" rel="noopener"
          aria-label={s.name} title={s.name}>
          <SocialIcon name={s.name} size={size} />
        </a>
      ))}
    </div>
  );
}

// ── Procedural thumbnail art (placeholder until real screenshots) ──
function ThumbArt({ hue, code, title }) {
  const stripes = [];
  for (let i = 0; i < 24; i++) {
    stripes.push(
      <line
        key={i}
        x1={i * 50 - 100} y1="0"
        x2={i * 50 + 200} y2="600"
        stroke={`oklch(0.85 0.18 ${hue})`}
        className="layer-stripe"
      />
    );
  }
  return (
    <svg className="thumb-bg" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={`g-${code}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"  stopColor={`oklch(0.34 0.10 ${hue})`} />
          <stop offset="100%" stopColor={`oklch(0.18 0.05 ${(hue + 40) % 360})`} />
        </linearGradient>
      </defs>
      <rect width="1000" height="600" fill={`url(#g-${code})`} />
      <g>{stripes}</g>
      <text x="60" y="120"
        fontFamily="JetBrains Mono, monospace"
        fontSize="20"
        letterSpacing="4"
        fill={`oklch(0.96 0.02 ${hue})`}
        opacity="0.65">
        {code} · {title.toUpperCase()}
      </text>
      <g transform="translate(720, 320)">
        <circle r="170" fill="none" stroke={`oklch(0.85 0.18 ${hue})`} strokeWidth="1.5" opacity="0.4" />
        <circle r="120" fill="none" stroke={`oklch(0.85 0.18 ${hue})`} strokeWidth="1.5" opacity="0.55" />
        <circle r="70"  fill={`oklch(0.85 0.18 ${hue})`} opacity="0.85" />
      </g>
    </svg>
  );
}

// ── Comparison table ─────────────────────────────────────────
function CompCell({ value, highlight }) {
  if (value === true) {
    return (
      <span className={"comp-mark yes" + (highlight ? " hi" : "")} aria-label="Yes">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="5 12 10 17 19 7" />
        </svg>
      </span>
    );
  }
  if (value === false) {
    return <span className="comp-mark no" aria-label="No">—</span>;
  }
  if (value && typeof value === "object" && "v" in value) {
    return (
      <span className={"comp-text" + (highlight ? " hi" : "")}>
        {value.v}
        {value.note && <span className="comp-note">{value.note}</span>}
      </span>
    );
  }
  return <span className={"comp-text" + (highlight ? " hi" : "")}>{value}</span>;
}

function ComparisonTable({ data }) {
  const { columns, groups } = data;
  return (
    <div className="comp-wrap">
      <div className="comp-scroll">
        <table className="comp">
          <thead>
            <tr>
              <th className="comp-feature-head"></th>
              {columns.map(c => (
                <th key={c.key} className={"comp-col" + (c.highlight ? " hi" : "")}>
                  <div className="comp-col-label">{c.label}</div>
                  {c.sub && <div className="comp-col-sub">{c.sub}</div>}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {groups.map((group, gi) => (
              <React.Fragment key={gi}>
                <tr className="comp-group-row">
                  <th colSpan={columns.length + 1}>{group.name}</th>
                </tr>
                {group.rows.map((row, ri) => (
                  <tr key={ri}>
                    <th scope="row" className="comp-feature">{row.feature}</th>
                    {columns.map(c => (
                      <td key={c.key} className={"comp-cell" + (c.highlight ? " hi" : "")}>
                        <CompCell value={row[c.key]} highlight={c.highlight} />
                      </td>
                    ))}
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Card ─────────────────────────────────────────────────────
function ProjectCard({ project, onOpen }) {
  return (
    <button className="card" onClick={() => onOpen(project)}>
      <div className="card-thumb">
        <ThumbArt hue={project.hue} code={project.code} title={project.title} />
        {project.inDev && (
          <div className="card-thumb-label">
            <span className="status-pill dev">In development</span>
          </div>
        )}
      </div>
      <div className="card-meta">
        <span>{project.code}</span>
        <span>{project.platform}</span>
      </div>
      <h3 className="card-title">{project.title}</h3>
      <p className="card-desc">{project.short}</p>
      <span className="card-cta">View details →</span>
    </button>
  );
}

// ── Modal ────────────────────────────────────────────────────
function ProjectModal({ project, onClose }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  if (!project) return null;

  const screenshots = project.screenshots || [];
  const showVideo = !project.inDev; // always show video frame for live projects

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <button className="modal-close" onClick={onClose} aria-label="Close">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <line x1="6" y1="6" x2="18" y2="18" />
          <line x1="18" y1="6" x2="6" y2="18" />
        </svg>
      </button>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hero">
          <ThumbArt hue={project.hue} code={project.code} title={project.title} />
          <div className="modal-hero-overlay">
            <div className="modal-title-block">
              <span className="eyebrow">{project.code}{project.inDev ? " · In development" : ""}</span>
              <h2>{project.title}</h2>
            </div>
            <div className="modal-platforms">
              {project.platform.split(" · ").map(p => (
                <span key={p} className="platform-badge">{p}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="modal-body">
          <section className="modal-section">
            <h3>About</h3>
            {project.description.map((p, i) => <p key={i}>{p}</p>)}
          </section>

          <section className="modal-section">
            <h3>Highlights</h3>
            <ul className="features">
              {project.features.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
          </section>

          <section className="modal-section">
            <h3>Get it</h3>
            {project.downloads.length === 0 ? (
              <p style={{color: "var(--fg-3)", fontSize: 14}}>
                Not available yet — {project.title} is in active development. Check back when it ships.
              </p>
            ) : (
              <div className="download-row">
                {project.downloads.map(dl => (
                  <a key={dl.store} className="dl-btn" href={dl.url} target="_blank" rel="noopener">
                    <span className="dl-icon">▼</span>
                    <span className="dl-text">
                      <span className="dl-small">{dl.small}</span>
                      <span className="dl-big">{dl.big}</span>
                    </span>
                  </a>
                ))}
              </div>
            )}
          </section>

          {project.comparison && (
            <section className="modal-section">
              <h3>How it compares <span style={{color: "var(--fg-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--font-mono)", fontSize: 10, marginLeft: 8}}>// placeholder rows — fill in real features</span></h3>
              <ComparisonTable data={project.comparison} />
            </section>
          )}

          {showVideo && (
            <section className="modal-section">
              <h3>Trailer <span style={{color: "var(--fg-3)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--font-mono)", fontSize: 10, marginLeft: 8}}>// embed a YouTube URL here</span></h3>
              {project.video ? (
                <div className="video-frame">
                  <iframe
                    src={project.video}
                    title={`${project.title} trailer`}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    style={{position: "absolute", inset: 0, width: "100%", height: "100%", border: 0}}
                  />
                </div>
              ) : (
                <div className="video-frame">
                  <svg width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" style={{position: "absolute", inset: 0}}>
                    <rect width="1600" height="900" fill={`oklch(0.20 0.05 ${project.hue})`} />
                    {[...Array(40)].map((_, i) => (
                      <line key={i} x1={i * 40} y1="0" x2={i * 40 + 200} y2="900"
                        stroke={`oklch(0.85 0.16 ${project.hue})`} strokeWidth="0.6" opacity="0.10" />
                    ))}
                  </svg>
                  <div className="play" style={{position: "relative", zIndex: 1}}>▶</div>
                </div>
              )}
            </section>
          )}

          {screenshots.length > 0 && (
            <section className="modal-section">
              <h3>Screenshots</h3>
              <div className="gallery">
                {screenshots.map((src, i) => (
                  <div className="shot" key={i}>
                    <img src={src} alt={`${project.title} screenshot ${i + 1}`} loading="lazy" />
                  </div>
                ))}
              </div>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Contact form (Web3Forms — no backend) ───────────────────
function ContactForm() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const [error, setError] = React.useState("");

  async function onSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus("sending");
    setError("");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: new FormData(form)
      });
      const json = await res.json();
      if (json.success) {
        setStatus("success");
        form.reset();
      } else {
        setStatus("error");
        setError(json.message || "Something went wrong. Please email us directly.");
      }
    } catch {
      setStatus("error");
      setError("Network error — please try again or email us directly.");
    }
  }

  return (
    <form className="contact-form" onSubmit={onSubmit}>
      <input type="hidden" name="access_key" value={WEB3FORMS_ACCESS_KEY} />
      <input type="hidden" name="subject" value="New message from switchonstudio.com" />
      <input type="hidden" name="from_name" value="Switch On Studio website" />
      {/* honeypot — bots fill this; humans never see it */}
      <input type="checkbox" name="botcheck" tabIndex={-1} autoComplete="off"
        style={{ display: "none" }} aria-hidden="true" />

      <div className="form-grid">
        <label className="field">
          <span>Name</span>
          <input type="text" name="name" required placeholder="Your name" />
        </label>
        <label className="field">
          <span>Email</span>
          <input type="email" name="email" required placeholder="you@example.com" />
        </label>
      </div>
      <label className="field">
        <span>Message</span>
        <textarea name="message" rows={4} required placeholder="What's on your mind?" />
      </label>

      <div className="form-actions">
        <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
          {status === "sending" ? "Sending…" : "Send message →"}
        </button>
        {status === "success" && (
          <span className="form-msg ok" role="status">Thanks — we'll get back to you.</span>
        )}
        {status === "error" && (
          <span className="form-msg err" role="alert">{error}</span>
        )}
      </div>
    </form>
  );
}

// ── App ─────────────────────────────────────────────────────
function App() {
  const t = TWEAK_DEFAULTS;
  const [active, setActive] = React.useState(null);
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("sos-theme") || t.theme; }
    catch { return t.theme; }
  });

  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = theme;
    root.dataset.density = t.density;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-ink", ACCENTS[t.accent]?.ink || "#ffffff");
    try { localStorage.setItem("sos-theme", theme); } catch {}
  }, [theme, t]);

  const toggleTheme = () => setTheme(p => (p === "dark" ? "light" : "dark"));

  const [filter, setFilter] = React.useState("all"); // all | game | app
  const FILTERS = [
    { key: "all",  label: "All" },
    { key: "game", label: "Games" },
    { key: "app",  label: "Apps" }
  ];
  const visibleProjects = filter === "all"
    ? PROJECTS
    : PROJECTS.filter(p => p.type === filter);

  return (
    <>
      {/* ── Nav ── */}
      <nav className="nav" data-screen-label="01 Nav">
        <div className="wrap nav-inner">
          <a href="#" className="logo" aria-label="Switch On Studio">
            <img src="assets/logo.png" alt="Switch On Studio" />
          </a>
          <div className="nav-links">
            <a href="#work">Work</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
            <SocialLinks className="nav-socials" size={16} />
            <button
              className="theme-toggle"
              onClick={toggleTheme}
              aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
              title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}>
              {theme === "dark" ? (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="4" />
                  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
                </svg>
              ) : (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                </svg>
              )}
            </button>
          </div>
        </div>
      </nav>

      {/* ── Hero ── */}
      <header className="wrap hero" data-screen-label="02 Hero">
        <div className="hero-meta mono">
          <span className="pulse"></span>
          <span>GAMES &amp; APPS</span>
        </div>
        <h1>
          We make small <em>digital things</em> that feel good to use.
        </h1>
        <p className="hero-sub">
          A studio building games and apps. No services, no
          clients — just products we'd want on our own phones.
        </p>
        <div className="hero-ctas">
          <a href="#work" className="btn btn-primary">See the work →</a>
          <a href="#about" className="btn btn-ghost">About the studio</a>
        </div>
      </header>

      {/* ── Work ── */}
      <section id="work" className="wrap section" data-screen-label="03 Work">
        <div className="section-head">
          <h2>What we've shipped<br />and what's in the oven.</h2>
          <div className="mono count">{String(visibleProjects.length).padStart(2, "0")} projects</div>
        </div>
        <div className="work-tabs" role="tablist" aria-label="Filter projects">
          {FILTERS.map(f => (
            <button
              key={f.key}
              role="tab"
              aria-selected={filter === f.key}
              className={"work-tab" + (filter === f.key ? " active" : "")}
              onClick={() => setFilter(f.key)}>
              {f.label}
            </button>
          ))}
        </div>
        <div className="grid">
          {visibleProjects.map(p => (
            <ProjectCard key={p.id} project={p} onOpen={setActive} />
          ))}
        </div>
      </section>

      {/* ── About ── */}
      <section id="about" className="wrap section" data-screen-label="04 About">
        <div className="section-head">
          <h2>About the studio.</h2>
          <div className="mono count">About</div>
        </div>
        <div className="about-row">
          <div>
            <p className="eyebrow">Mission</p>
            <div className="facts">
              <div className="fact"><div className="k">Focus</div><div className="v">Products only</div></div>
              <div className="fact"><div className="k">Output</div><div className="v">Games · Apps</div></div>
              <div className="fact"><div className="k">Now</div><div className="v">3 live · 1 in dev</div></div>
            </div>
          </div>
          <div>
            <p>Switch On is a product studio, not an agency. Every shipped thing is something we'd use ourselves — small, considered, no dark patterns.</p>
          </div>
        </div>
      </section>

      {/* ── Contact ── */}
      <section id="contact" className="wrap section" data-screen-label="05 Contact">
        <div className="section-head">
          <h2>Get in touch.</h2>
          <div className="mono count">Contact</div>
        </div>
        <div className="about-row">
          <div>
            <p className="eyebrow">Say hello</p>
            <p>Open to feedback, never to clients. Send a note and we'll read it.</p>
            <p style={{marginTop: 12}}>
              <a href="mailto:support@switchonstudio.com" className="contact-email">support@switchonstudio.com</a>
            </p>
          </div>
          <div>
            <ContactForm />
          </div>
        </div>
      </section>

      {/* ── Footer ── */}
      <footer className="foot" data-screen-label="06 Footer">
        <div className="wrap">
          <div className="foot-grid">
            <div>
              <h4>Studio</h4>
              <ul>
                <li><a href="#work">Work</a></li>
                <li><a href="#about">About</a></li>
              </ul>
            </div>
            <div>
              <h4>Legal</h4>
              <ul>
                <li><a href="privacy.html">Privacy policy</a></li>
                <li><a href="terms.html">Terms of use</a></li>
              </ul>
            </div>
            <div>
              <h4>Social</h4>
              <SocialLinks className="foot-socials" size={20} />
            </div>
          </div>
          <div className="foot-bottom">
            <span>© 2026 Switch On Studio</span>
          </div>
        </div>
      </footer>

      {/* ── Modal ── */}
      {active && <ProjectModal project={active} onClose={() => setActive(null)} />}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);