// Variation 3 — Bold / pixel-motif
// Full-bleed colour blocks, big chunky type, plays with the logo's pixel-brick motif

const V3 = ({ heroLayout = "split", palette = {} }) => {
  const d = window.BB_DATA;
  const blue = palette.blue || "#1FA1D9";
  const deep = palette.deep || "#0a2a44";
  const cream = palette.cream || "#F4ECDE";
  const ink = palette.ink || "#0a1f2e";

  // Generate a "shattered pixel" SVG decoration (deterministic via seed)
  const pixelRects = React.useMemo(() => {
    const out = [];
    let s = 17;
    const rand = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    for (let i = 0; i < 28; i++) {
      out.push({
        x: rand() * 100,
        y: rand() * 100,
        w: 8 + rand() * 32,
        h: 4 + rand() * 12,
        r: (rand() - 0.5) * 20,
        o: 0.4 + rand() * 0.5,
      });
    }
    return out;
  }, []);

  return (
    <div
      className="v3-root"
      style={{
        "--v3-blue": blue,
        "--v3-deep": deep,
        "--v3-cream": cream,
        "--v3-ink": ink,
      }}
    >
      <style>{`
        .v3-root {
          background: var(--v3-cream);
          color: var(--v3-ink);
          font-family: 'Space Grotesk', system-ui, sans-serif;
          min-height: 100%;
        }
        .v3-root * { box-sizing: border-box; }
        .v3-display {
          font-family: 'Archivo Black', 'Anton', sans-serif;
          font-weight: 900; letter-spacing: -0.02em;
          text-transform: uppercase;
        }

        /* HEADER */
        .v3-header {
          background: var(--v3-deep);
          padding: 16px 40px;
          display: flex; justify-content: space-between; align-items: center;
          color: white;
        }
        .v3-header img { height: 28px; }
        .v3-header nav {
          display: flex; gap: 28px;
          font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
        }
        .v3-header nav a { color: white; text-decoration: none; opacity: 0.85; }
        .v3-header nav a:hover { opacity: 1; }

        /* HERO */
        .v3-hero {
          background: var(--v3-blue);
          color: white;
          padding: 24px 40px 0;
          position: relative;
          overflow: hidden;
        }
        .v3-pixels {
          position: absolute; inset: 0;
          pointer-events: none;
          opacity: 0.8;
        }
        .v3-hero-inner { position: relative; z-index: 1; }

        .v3-eyebrow {
          display: inline-flex; align-items: center; gap: 10px;
          background: var(--v3-deep); color: var(--v3-cream);
          padding: 8px 14px; border-radius: 2px;
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
          margin-bottom: 32px;
        }
        .v3-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v3-blue); }

        .v3-name {
          font-family: 'Space Grotesk', sans-serif;
          font-size: clamp(42px, 5.5vw, 88px);
          font-weight: 300;
          text-transform: none;
          line-height: 1.15;
          letter-spacing: 0.01em;
          margin: 0;
          color: white;
        }
        .v3-name .line2 { display: block; color: var(--v3-deep); }

        .v3-portrait-wrap {
          position: relative;
          padding: 12px;
          background: var(--v3-cream);
          border-radius: 4px;
          outline: 4px solid var(--v3-deep);
          rotate: -2deg;
          transition: rotate .3s;
        }
        .v3-portrait-wrap:hover { rotate: 0deg; }
        .v3-portrait-wrap img {
          display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
          border-radius: 2px;
        }
        .v3-stamp {
          position: absolute; bottom: -18px; right: -18px;
          background: var(--v3-deep); color: var(--v3-cream);
          padding: 8px 14px; border-radius: 999px;
          font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
          rotate: 4deg;
        }

        /* Hero layouts */
        .v3-hero[data-layout="split"] .v3-grid {
          display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end;
          padding-top: 64px; padding-bottom: 100px;
        }
        .v3-hero[data-layout="centered"] .v3-grid {
          display: flex; flex-direction: column; gap: 48px; align-items: center; text-align: center;
          padding-top: 64px; padding-bottom: 80px;
        }
        .v3-hero[data-layout="centered"] .v3-portrait-wrap { width: 50%; rotate: 0; }
        .v3-hero[data-layout="asymmetric"] .v3-grid {
          display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
          padding-top: 80px; padding-bottom: 80px;
          max-width: 960px; margin-left: auto; margin-right: auto;
        }
        .v3-hero[data-layout="asymmetric"] { overflow: visible; }
        .v3-hero[data-layout="asymmetric"] .v3-grid > div:first-child {
          position: relative; z-index: 2;
        }
        .v3-hero[data-layout="asymmetric"] .v3-portrait-wrap {
          width: 100%; margin: 0;
          position: relative; z-index: 1; align-self: center;
        }

        /* TICKER ABOUT */
        .v3-ticker {
          position: relative; z-index: 2;
          background: var(--v3-deep);
          color: var(--v3-cream);
          padding: 18px 0;
          overflow: hidden;
          border-top: 4px solid var(--v3-cream);
          border-bottom: 4px solid var(--v3-cream);
          font-family: 'Archivo Black', sans-serif;
          text-transform: uppercase;
          letter-spacing: 0.04em;
        }
        .v3-ticker-track {
          display: flex; gap: 48px; white-space: nowrap;
          animation: v3-ticker 28s linear infinite;
          font-size: 28px;
        }
        .v3-ticker-track > span { display: inline-flex; align-items: center; gap: 48px; }
        .v3-ticker-track .dot { display: inline-block; width: 12px; height: 12px; background: var(--v3-cream); border-radius: 50%; }
        @keyframes v3-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* ABOUT */
        .v3-about {
          padding: 96px 40px;
          background: var(--v3-cream);
          display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start;
        }
        .v3-about-head { display: flex; flex-direction: column; gap: 20px; }
        .v3-about-head h2 { font-size: 96px; line-height: 0.9; margin: 0; color: var(--v3-deep); }
        .v3-about-head h2 .accent { color: var(--v3-blue); }
        .v3-about-body p { font-size: 22px; line-height: 1.5; margin: 0 0 32px; text-wrap: pretty; color: var(--v3-ink); }
        .v3-about-body .cta {
          display: inline-flex; align-items: center; gap: 12px;
          background: var(--v3-deep); color: white;
          padding: 18px 28px; border-radius: 999px;
          font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
          text-decoration: none; font-size: 14px;
          transition: transform .2s, background .2s;
        }
        .v3-about-body .cta:hover { transform: translateY(-2px); background: var(--v3-blue); }
        .v3-about-body .cta .arrow { font-size: 18px; }

        /* SKILLS */
        .v3-skills {
          background: var(--v3-deep);
          color: white;
          padding: 96px 40px 120px;
          position: relative;
          overflow: hidden;
        }
        .v3-skills-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 56px; }
        .v3-skills-head h2 { font-size: 88px; line-height: 0.9; margin: 0; color: white; }
        .v3-skills-head h2 .accent { color: var(--v3-blue); }
        .v3-skills-head .leg { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-cream); opacity: 0.7; }

        .v3-skills-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        }
        .v3-card {
          background: var(--v3-cream);
          color: var(--v3-ink);
          border-radius: 4px;
          padding: 28px;
          position: relative;
          overflow: hidden;
          transition: transform .25s ease;
          min-height: 280px;
          display: flex; flex-direction: column;
        }
        .v3-card:hover { transform: translateY(-4px); }
        .v3-card.alt { background: var(--v3-blue); color: white; }
        .v3-card-num {
          font-family: 'Archivo Black', sans-serif;
          font-size: 76px; line-height: 1; color: var(--v3-blue); opacity: 0.18;
          position: absolute; top: 4px; right: 12px;
        }
        .v3-card.alt .v3-card-num { color: var(--v3-deep); opacity: 0.35; }
        .v3-card-code {
          font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
          color: var(--v3-blue);
        }
        .v3-card.alt .v3-card-code { color: var(--v3-deep); }
        .v3-card h3 {
          font-family: 'Archivo Black', sans-serif;
          font-size: 28px; line-height: 1; margin: 12px 0 20px;
          text-transform: uppercase; letter-spacing: -0.01em;
        }
        .v3-card p {
          font-size: 14px; line-height: 1.55; margin: 0 0 10px;
        }
        .v3-card p + p { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--v3-ink) 18%, transparent); }
        .v3-card.alt p + p { border-color: rgba(255,255,255,0.25); }

        /* FOOTER */
        .v3-footer {
          background: var(--v3-blue);
          color: white;
          padding: 60px 40px 40px;
          display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
        }
        .v3-footer .big {
          font-family: 'Archivo Black', sans-serif; font-size: 88px; line-height: 0.9; text-transform: uppercase;
          color: white; letter-spacing: -0.02em;
        }
        .v3-footer .big a { color: var(--v3-deep); text-decoration: none; }
        .v3-footer .small {
          font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
          opacity: 0.85; text-align: right;
        }

        @media (max-width: 900px) {
          .v3-header { padding: 14px 20px; }
          .v3-header nav { display: none; }
          .v3-header img { height: auto; width: 100%; max-width: 320px; }
          .v3-hero { padding: 16px 20px 0; }
          .v3-hero[data-layout] .v3-grid {
            grid-template-columns: 1fr !important;
            gap: 40px; padding: 40px 0 60px; text-align: left;
          }
          .v3-hero[data-layout="asymmetric"] .v3-portrait-wrap,
          .v3-hero[data-layout="centered"] .v3-portrait-wrap { width: 100%; margin: 0; rotate: 0; }
          .v3-ticker-track { font-size: 18px; gap: 28px; }
          .v3-about { grid-template-columns: 1fr; padding: 56px 20px; gap: 32px; }
          .v3-about-head h2 { font-size: 56px; }
          .v3-about-body p { font-size: 17px; }
          .v3-skills { padding: 56px 20px 80px; }
          .v3-skills-head { flex-direction: column; align-items: flex-start; gap: 12px; }
          .v3-skills-head h2 { font-size: 48px; }
          .v3-skills-grid { grid-template-columns: 1fr; }
          .v3-footer { grid-template-columns: 1fr; padding: 40px 20px; }
          .v3-footer .big { font-size: 36px; }
          .v3-footer .small { text-align: left; }
        }
      `}</style>

      <header className="v3-header">
        <img src="assets/scan-cell-navbar-dark.png" alt="Breeze Broadcast" />
        <nav>
          <a href="#about">About</a>
          <a href="#skills">Skills</a>
          <a href={`mailto:${d.email}`}>Contact</a>
        </nav>
      </header>

      <section className="v3-hero" data-layout={heroLayout}>
        <svg className="v3-pixels" viewBox="0 0 100 100" preserveAspectRatio="none">
          {pixelRects.map((r, i) => (
            <rect key={i} x={r.x} y={r.y} width={r.w / 8} height={r.h / 8}
              fill="white" opacity={r.o * 0.4}
              transform={`rotate(${r.r} ${r.x} ${r.y})`} />
          ))}
        </svg>
        <div className="v3-hero-inner">
          <div className="v3-grid">
            <div>
              <div className="v3-eyebrow">
                <span className="dot"></span>{d.role}
              </div>
              <h1 className="v3-name v3-display">
                Jack<br/>
                <span className="line2">Garnham</span>
              </h1>
            </div>
            <div className="v3-portrait-wrap">
              <img src="assets/portrait.png" alt="Jack at a broadcast control desk" />
              <span className="v3-stamp">On Air · 15 yrs</span>
            </div>
          </div>
        </div>
      </section>

      <div className="v3-ticker">
        <div className="v3-ticker-track">
          {[0,1].map(k => (
            <span key={k}>
              Live Sports<span className="dot"></span>
              SDI · IP<span className="dot"></span>
              Satellite Uplink<span className="dot"></span>
              MPLS · Multicast<span className="dot"></span>
              Outside Broadcast<span className="dot"></span>
              Worldwide<span className="dot"></span>
            </span>
          ))}
        </div>
      </div>

      <section className="v3-about" id="about">
        <div className="v3-about-head">
          <h2 className="v3-display">Built<br/><span className="accent">for live.</span></h2>
        </div>
        <div className="v3-about-body">
          <p>{d.about}</p>
          <a href={`mailto:${d.email}`} className="cta">
            {d.email}<span className="arrow">→</span>
          </a>
        </div>
      </section>

      <section className="v3-skills" id="skills">
        <div className="v3-skills-head">
          <h2 className="v3-display">Skills<br/><span className="accent">& Expertise.</span></h2>
          <span className="leg">{String(d.skills.length).padStart(2, '0')} disciplines</span>
        </div>
        <div className="v3-skills-grid">
          {d.skills.map((s, i) => (
            <div key={s.id} className={`v3-card ${i % 4 === 1 ? 'alt' : ''}`}>
              <span className="v3-card-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="v3-card-code">{s.shortCode} · DISCIPLINE</span>
              <h3>{s.title}</h3>
              {s.points.map((p, j) => <p key={j}>{p}</p>)}
            </div>
          ))}
        </div>
      </section>

      <footer className="v3-footer">
        <div className="big v3-display">
          Let's<br/>
          <a href={`mailto:${d.email}`}>talk →</a>
        </div>
        <div className="small">
          © Breeze Broadcast<br/>
          Tarifa · 2026
        </div>
      </footer>
    </div>
  );
};

window.V3 = V3;