// Portfolio v2 — Editorial / atelier rework
// New look: editorial type-as-art, asymmetric, aurora mesh,
// press-pass HUD, bento grid for work, cinematic marquees.

const { useState, useEffect, useRef, useLayoutEffect } = React;

// ─── EDITORIAL PALETTES ──────────────────────────────────────────────────────
const V2_PALETTES = {
  midnight: { name: "Midnight",  bg:"#06070f", a:"#5b8cff", b:"#b794ff", acc:"#f4f4ee", glow:"91,140,255" },
  noir:     { name: "Noir+",     bg:"#0a0a0c", a:"#ff5a3c", b:"#ffcc4a", acc:"#f4ede0", glow:"255,90,60" },
  forest:   { name: "Forest",    bg:"#0a0f0c", a:"#7af0c2", b:"#5b8cff", acc:"#f0e8d5", glow:"122,240,194" },
  rose:     { name: "Rose Noir", bg:"#0d0608", a:"#ff8ab6", b:"#a78bfa", acc:"#f5e8e6", glow:"255,138,182" },
  prism:    { name: "Prism",     bg:"#08081a", a:"#3B82F6", b:"#7C3AED", acc:"#f4f6fb", glow:"59,130,246" },
};

// ─── CUSTOM CURSOR ───────────────────────────────────────────────────────────
function Cursor() {
  const ringRef = useRef(null);
  const dotRef = useRef(null);
  useEffect(() => {
    let rx = 0, ry = 0, dx = 0, dy = 0, mx = 0, my = 0;
    let raf;
    const move = (e) => { mx = e.clientX; my = e.clientY; };
    const tick = () => {
      dx += (mx - dx) * 0.55;
      dy += (my - dy) * 0.55;
      rx += (mx - rx) * 0.16;
      ry += (my - ry) * 0.16;
      if (dotRef.current) dotRef.current.style.transform = `translate3d(${dx-3}px,${dy-3}px,0)`;
      if (ringRef.current) ringRef.current.style.transform = `translate3d(${rx-18}px,${ry-18}px,0)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("pointermove", move);
    raf = requestAnimationFrame(tick);

    const hoverEls = document.querySelectorAll('a, button, .v2-card, .work-cell, .agency-card, [data-cursor="hover"]');
    const onEnter = () => ringRef.current?.classList.add("on");
    const onLeave = () => ringRef.current?.classList.remove("on");
    hoverEls.forEach(el => { el.addEventListener("mouseenter", onEnter); el.addEventListener("mouseleave", onLeave); });

    return () => {
      window.removeEventListener("pointermove", move);
      cancelAnimationFrame(raf);
      hoverEls.forEach(el => { el.removeEventListener("mouseenter", onEnter); el.removeEventListener("mouseleave", onLeave); });
    };
  }, []);
  return (
    <React.Fragment>
      <div ref={ringRef} className="cur-ring" aria-hidden="true"></div>
      <div ref={dotRef} className="cur-dot" aria-hidden="true"></div>
    </React.Fragment>
  );
}

// ─── PERSISTENT HUD ──────────────────────────────────────────────────────────
function HUD() {
  const [time, setTime] = useState("");
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const f = () => {
      const d = new Date();
      const opt = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZone: 'Africa/Douala' };
      setTime(d.toLocaleTimeString('en-GB', opt));
    };
    f(); const i = setInterval(f, 1000); return () => clearInterval(i);
  }, []);
  useEffect(() => {
    const f = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setScroll(h > 0 ? Math.min(100, (window.scrollY / h) * 100) : 0);
    };
    f(); window.addEventListener("scroll", f, { passive:true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <div className="hud">
      <div className="hud-row">
        <span className="hud-k">LOC</span>
        <span className="hud-v">04°02′N · 9°41′E</span>
      </div>
      <div className="hud-row">
        <span className="hud-k">UTC</span>
        <span className="hud-v">{time} +01</span>
      </div>
      <div className="hud-row">
        <span className="hud-k">SIG</span>
        <span className="hud-v hud-sig"><i></i><i></i><i></i><i className="off"></i> 0.74</span>
      </div>
      <div className="hud-row">
        <span className="hud-k">REC</span>
        <span className="hud-v hud-rec"><span className="hud-dot"></span>live</span>
      </div>
      <div className="hud-bar">
        <div className="hud-bar-fill" style={{ width: scroll + "%" }}></div>
        <span>{scroll.toFixed(0)}% scrolled</span>
      </div>
    </div>
  );
}

// ─── TOP TICKER ──────────────────────────────────────────────────────────────
function Ticker() {
  const items = [
    "Now booking · Q3 2026",
    "Currently shipping · CallSpace v0.4",
    "Studio · McSite Express",
    "DLA · Cameroon · GMT+1",
    "Selected work · 5 case studies",
    "Available · 2 slots remaining"
  ];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {[...items, ...items, ...items].map((x, i) => (
          <span key={i} className="ticker-item">
            <span className="ticker-star">✦</span>{x}
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── HERO ────────────────────────────────────────────────────────────────────
function HeroV2() {
  return (
    <section id="top" className="v2-hero" data-screen-label="01 Hero">
      <div className="v2-aurora" aria-hidden="true">
        <div className="v2-aurora-blob a"></div>
        <div className="v2-aurora-blob b"></div>
        <div className="v2-aurora-blob c"></div>
      </div>
      <div className="v2-noise" aria-hidden="true"></div>
      <div className="v2-hero-grid" aria-hidden="true"></div>

      <div className="v2-hero-top">
        <div className="v2-hero-eyebrow">
          <span className="v2-issue">VOL. IV · ISSUE 26</span>
          <span className="v2-issue-d">PORTFOLIO · MMXXVI EDITION</span>
        </div>
        <div className="v2-hero-rule"></div>
      </div>

      <div className="v2-hero-stage">
        <div className="v2-hero-mark">
          <div className="v2-pp">
            <div className="v2-pp-hd">
              <span>PRESS / 01</span>
              <span>★ access</span>
            </div>
            <div className="v2-pp-body">
              <div className="v2-pp-photo">
                <svg viewBox="0 0 60 70" width="60" height="70">
                  <defs>
                    <linearGradient id="ppg" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="var(--a)"/>
                      <stop offset="1" stopColor="var(--b)"/>
                    </linearGradient>
                  </defs>
                  <rect width="60" height="70" fill="url(#ppg)" opacity="0.15"/>
                  <circle cx="30" cy="26" r="11" fill="none" stroke="currentColor" strokeWidth="1"/>
                  <path d="M10 65 C 14 48, 46 48, 50 65" fill="none" stroke="currentColor" strokeWidth="1"/>
                </svg>
              </div>
              <div className="v2-pp-info">
                <div className="v2-pp-name">Kountchou Ryan</div>
                <div className="v2-pp-role">software developer<br/>ai systems builder</div>
                <div className="v2-pp-line"><span>ID</span><b>MC-2026-001</b></div>
                <div className="v2-pp-line"><span>STA</span><b>active</b></div>
              </div>
            </div>
            <div className="v2-pp-bar">
              <span></span><span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
          </div>
        </div>

        <h1 className="v2-hero-title">
          <span className="v2-title-row v2-r1">
            <span className="v2-superscript">01 —</span>
            <span className="v2-display">KOUNTCHOU</span>
          </span>
          <span className="v2-title-row v2-r2">
            <span className="v2-italic">ryan</span>
            <span className="v2-amp">&amp;</span>
            <span className="v2-display v2-outline">portfolio</span>
          </span>
          <span className="v2-title-row v2-r3">
            <span className="v2-display v2-grad">— twenty&nbsp;twenty&nbsp;six</span>
            <span className="v2-superscript right">/ MMXXVI</span>
          </span>
        </h1>

        <div className="v2-hero-meta">
          <div className="v2-hero-quote">
            <span className="v2-q-open">“</span>
            <p>I design, engineer and orchestrate the digital systems behind ambitious products — from cinematic marketing surfaces to <em>AI-native</em> operating platforms.</p>
            <span className="v2-q-sig">— K. Ryan, Douala</span>
          </div>
          <div className="v2-hero-spec">
            <div className="v2-spec-row"><span>Practice</span><b>Web architect · AI builder</b></div>
            <div className="v2-spec-row"><span>Studio</span><b>McSite Express</b></div>
            <div className="v2-spec-row"><span>Based</span><b>Douala, Cameroon</b></div>
            <div className="v2-spec-row"><span>Calendar</span><b>Q3 2026 — 2 slots</b></div>
            <div className="v2-spec-row"><span>Stack</span><b>Vue · Flutter · Node · AI</b></div>
          </div>
        </div>

        <div className="v2-hero-foot">
          <div className="v2-hero-cta">
            <a href="#work" className="v2-btn v2-btn-primary">
              <span className="v2-btn-num">01</span>
              <span>View selected work</span>
              <span className="v2-btn-arr">→</span>
            </a>
            <a href="#contact" className="v2-btn v2-btn-ghost">
              <span className="v2-btn-num">02</span>
              <span>Book a discovery call</span>
            </a>
          </div>
          <div className="v2-hero-scroll">
            <span>SCROLL</span>
            <div className="v2-hero-scroll-line"><i></i></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── NAV ─────────────────────────────────────────────────────────────────────
function NavV2() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 80);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const items = [["work","Work"],["about","About"],["agency","Studio"],["stack","Stack"],["contact","Contact"]];
  return (
    <nav className={"v2-nav " + (scrolled ? "on" : "")}>
      <a href="#top" className="v2-nav-brand">
        <span className="v2-nav-mono">⌘</span>
        <span><b>KR</b>.studio</span>
      </a>
      <div className="v2-nav-mid">
        <div className="v2-nav-pill">
          {items.map(([id,l]) => (
            <a key={id} href={"#" + id}>{l}</a>
          ))}
        </div>
      </div>
      <a href="#contact" className="v2-nav-cta">
        <span className="v2-nav-status"><i></i>Available</span>
        Let's talk →
      </a>
    </nav>
  );
}

// ─── MEGA MARQUEE DIVIDER ────────────────────────────────────────────────────
function MegaMarquee({ words, italic = false, dir = 1 }) {
  return (
    <div className={"v2-mega " + (italic ? "italic " : "") + (dir < 0 ? "rev" : "")}>
      <div className="v2-mega-track">
        {[...words, ...words, ...words].map((w, i) => (
          <span key={i} className="v2-mega-w">
            {w}<span className="v2-mega-sep">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── ABOUT V2 ────────────────────────────────────────────────────────────────
function AboutV2() {
  return (
    <section id="about" className="v2-about" data-screen-label="02 About">
      <div className="v2-num">
        <span className="v2-num-lbl">CHAPTER</span>
        <span className="v2-num-big">02</span>
        <span className="v2-num-tag">About the architect</span>
      </div>
      <div className="v2-about-grid">
        <div className="v2-about-mono">
          <svg viewBox="0 0 280 280" className="v2-mono-svg" aria-hidden="true">
            <defs>
              <linearGradient id="mong" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0" stopColor="var(--a)"/>
                <stop offset="1" stopColor="var(--b)"/>
              </linearGradient>
            </defs>
            <circle cx="140" cy="140" r="138" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="1"/>
            <circle cx="140" cy="140" r="100" fill="none" stroke="rgba(255,255,255,.05)" strokeWidth="1"/>
            <text x="140" y="200" textAnchor="middle" fontFamily="'Instrument Serif',serif"
                  fontSize="220" fill="url(#mong)" fontStyle="italic">M</text>
            <text x="180" y="220" textAnchor="middle" fontFamily="'Instrument Serif',serif"
                  fontSize="120" fill="rgba(255,255,255,.85)" fontStyle="italic">c</text>
            <circle cx="40" cy="40" r="3" fill="var(--a)">
              <animateTransform attributeName="transform" type="rotate"
                from="0 140 140" to="360 140 140" dur="20s" repeatCount="indefinite"/>
            </circle>
          </svg>
          <div className="v2-mono-cap">
            <span>MC. — MONOGRAM</span>
            <span>SET IN INSTRUMENT SERIF</span>
          </div>
        </div>
        <div className="v2-about-copy">
          <p className="v2-about-lead">
            A <em>product mind</em> in an engineer's hands. I sit at the intersection of design,
            engineering and intelligent automation — and I treat each interface as a small piece
            of architecture.
          </p>
          <div className="v2-about-cols">
            <div>
              <h4>What I do</h4>
              <p>Cinematic marketing sites, SaaS platforms, AI-native operational tools and end-to-end brand systems for ambitious founders.</p>
            </div>
            <div>
              <h4>How I work</h4>
              <p>A vertically integrated, atelier-style practice. One operator, every layer — from positioning to pixels to production code.</p>
            </div>
            <div>
              <h4>Where I'm based</h4>
              <p>Douala, Cameroon — shipping for clients on three continents. Founder of McSite Express, a premium digital studio.</p>
            </div>
            <div>
              <h4>What's next</h4>
              <p>Shipping CallSpace — a voice-AI platform for outbound teams — and selectively taking on one or two flagship builds per quarter.</p>
            </div>
          </div>
          <div className="v2-about-sig">
            <svg viewBox="0 0 200 50" width="160" height="40" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round">
              <path d="M8 38 C 18 8, 38 6, 42 32 C 44 42, 36 42, 38 28 C 42 6, 64 4, 66 26 C 66 38, 58 42, 64 36 C 76 22, 88 6, 96 34 C 100 44, 90 44, 96 34 C 104 20, 124 6, 132 28 C 136 38, 144 34, 152 22 C 162 6, 178 6, 188 30"/>
            </svg>
            <div>
              <b>Kountchou Ryan</b>
              <span>Founder · McSite Express</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── EXPERTISE V2 — service menu ─────────────────────────────────────────────
const V2_EXPERTISE = [
  { n: "i.",   t: "Web architecture",      d: "Editorial sites, brand surfaces, marketing systems.",       q: "Vue · Next · Astro"   },
  { n: "ii.",  t: "AI orchestration",      d: "Voice agents, prospecting engines, RAG copilots.",          q: "OpenAI · VAPI · Claude" },
  { n: "iii.", t: "UI / UX direction",     d: "Editorial typography and considered motion.",               q: "Figma · GSAP"           },
  { n: "iv.",  t: "SaaS engineering",      d: "Auth, billing, dashboards, real-time. Built to scale.",     q: "Supabase · Stripe"      },
  { n: "v.",   t: "Brand systems",         d: "Identity that travels from logo to landing to outreach.",   q: "Strategy · Identity"    },
  { n: "vi.",  t: "Performance · SEO",     d: "Sub-second TTI, perfect Lighthouse, structured data.",      q: "Vitals · Edge"          },
];

function ExpertiseV2() {
  return (
    <section id="expertise" className="v2-exp" data-screen-label="03 Expertise">
      <div className="v2-num">
        <span className="v2-num-lbl">CHAPTER</span>
        <span className="v2-num-big">03</span>
        <span className="v2-num-tag">The practice</span>
      </div>
      <h2 className="v2-h">
        Six disciplines.<br/>
        <em>One operator.</em>
      </h2>
      <p className="v2-h-sub">A vertically integrated atelier — your product moves from sketch to ship without changing hands.</p>
      <div className="v2-exp-table">
        <div className="v2-exp-thead">
          <span>№</span><span>Service</span><span>Description</span><span>Stack</span>
        </div>
        {V2_EXPERTISE.map((e) => (
          <div key={e.n} className="v2-exp-row">
            <span className="v2-exp-n">{e.n}</span>
            <span className="v2-exp-t">{e.t}</span>
            <span className="v2-exp-d">{e.d}</span>
            <span className="v2-exp-q">{e.q}</span>
            <span className="v2-exp-arr">→</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  Cursor, HUD, Ticker, HeroV2, NavV2, MegaMarquee, AboutV2, ExpertiseV2, V2_PALETTES
});