/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakSelect, TweakToggle */

const { useState, useEffect, useRef } = React;

/* ──────────────────────────────────────────────────────────────────
   Tweakable defaults
   ────────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "heroVariant": "intro",
  "showMarkets": true,
  "showEducation": true,
  "showIndustries": true
} /*EDITMODE-END*/;

/* ──────────────────────────────────────────────────────────────────
   Real content
   ────────────────────────────────────────────────────────────────── */

const STATS = {
  spend: "$200K+",
  brands: "40+",
  industries: "14+",
  years: "3+",
  roasLift: "3×",
  tourRevenue: "$50K+"
};

const INDUSTRIES = [
"Marketing Agencies",
"Luxury Watches",
"Beauty & Hair",
"Entertainment & Leisure",
"Education Centres",
"Education Consulting",
"Construction",
"Restaurants & F&B",
"Printing & Publishing",
"Food Production",
"Coding Bootcamps",
"Language Schools",
"Luxury Glassware",
"Logistics"];


const BRAND_LOGOS = [
{ name: "MOF Agency", file: "assets/logos/mof.png", h: 64 },
{ name: "BHT", file: "assets/logos/bht.png", h: 88 },
{ name: "Education Consulting", file: "assets/logos/education.png", h: 100 },
{ name: "HAIRBOSS", file: "assets/logos/hairboss.png", h: 100 },
{ name: "Watch brand", file: "assets/logos/watch.png", h: 84 },
{ name: "nude", file: "assets/logos/nude.png", h: 48 },
{ name: "ONTOP", file: "assets/logos/ontop.png", h: 58 },
{ name: "Barakat", file: "assets/logos/barakat.png", h: 52 },
{ name: "Avto Element", file: "assets/logos/avtoelement.png", h: 60 },
{ name: "Silver Med", file: "assets/logos/silvermed.png", h: 92 }];



const HERO_VARIANTS = {
  intro: {
    headline: "Tarlan Khanaliyev.\nDigital marketer.",
    sub: "Three years in paid media, content and creative. $200K+ in ad spend across Meta, TikTok and Google. Now pursuing my Master's in Management International at the University of Würzburg."
  },
  numbers: {
    headline: "$200K+ in ad spend.\n40+ brands.",
    sub: "Three years building digital-marketing systems that move actual numbers — across 14 industries and four languages. Now in Würzburg, between roles."
  },
  craft: {
    headline: "Digital marketing,\nas a craft.",
    sub: "Hi — I’m Tarlan. Paid media, content, creative and reporting. Spreadsheet rigour, applied to growth."
  }
};

const CONTACT = {
  email: "tarlan.khanaliyev@stud-mail.uni-wuerzburg.de",
  linkedin: "https://www.linkedin.com/in/tarlankhanaliyev/",
  location: "Würzburg, Germany"
};

/* ──────────────────────────────────────────────────────────────────
   Tiny inline icons
   ────────────────────────────────────────────────────────────────── */
const Arrow = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8H13M13 8L8.5 3.5M13 8L8.5 12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;

const Spark = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor">
    <path d="M8 0L9.5 5.5L15 7L9.5 8.5L8 14L6.5 8.5L1 7L6.5 5.5L8 0Z" />
  </svg>;

const Pin = ({ size = 12 }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M8 14C8 14 13 9.5 13 6C13 3.2 10.8 1 8 1C5.2 1 3 3.2 3 6C3 9.5 8 14 8 14Z" stroke="currentColor" strokeWidth="1.4" />
    <circle cx="8" cy="6" r="2" stroke="currentColor" strokeWidth="1.4" />
  </svg>;

const LinkedinGlyph = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.07c.62-1.12 2.13-2.3 4.38-2.3 4.69 0 5.55 3.08 5.55 7.08V24h-5v-7.1c0-1.7-.03-3.88-2.36-3.88-2.36 0-2.72 1.84-2.72 3.76V24h-5V8z" />
  </svg>;


/* ──────────────────────────────────────────────────────────────────
   Hooks
   ────────────────────────────────────────────────────────────────── */
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useScrolled() {
  const [s, setS] = useState(false);
  useEffect(() => {
    const f = () => setS(window.scrollY > 12);
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return s;
}

/* ──────────────────────────────────────────────────────────────────
   Nav
   ────────────────────────────────────────────────────────────────── */
function Nav() {
  const scrolled = useScrolled();
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`} data-screen-label="00 Nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">TK</span>
          <span>Tarlan Khanaliyev</span>
        </a>
        <div className="nav-links" aria-hidden="true" />
        <a href={`mailto:${CONTACT.email}`} className="nav-cta">
          <span className="dot"><Arrow size={12} /></span>
          Email me
        </a>
      </div>
    </nav>);

}

/* ──────────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────────── */
function Hero({ variant }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.intro;
  return (
    <header className="hero hero-split reveal in" id="top" data-screen-label="01 Hero">
      <div className="hero-copy">
        <div className="hero-eyebrow">digital marketer</div>
        <h1 className="h-display hero-headline">
          {v.headline.split("\n").map((line, i, arr) =>
          <React.Fragment key={i}>
              {line}{i < arr.length - 1 && <br />}
            </React.Fragment>
          )}
        </h1>
        <p className="hero-sub">{v.sub}</p>
        <div className="hero-ctas">
          <a href={`mailto:${CONTACT.email}`} className="cta-pill">
            <span className="arrow"><Arrow /></span>
            Start a conversation
          </a>
          <a href={CONTACT.linkedin} target="_blank" rel="noopener" className="cta-ghost">
            <LinkedinGlyph /> LinkedIn
          </a>
        </div>
        <div className="hero-strip">
          <div className="hero-strip-item">
            <span className="k">$200K+</span>
            <span className="v">ad spend managed</span>
          </div>
          <div className="hero-strip-item">
            <span className="k">40+</span>
            <span className="v">brands · 14 sectors</span>
          </div>
          <div className="hero-strip-item">
            <span className="k">3×</span>
            <span className="v">avg. ROAS lift</span>
          </div>
        </div>
      </div>
      <div className="hero-portrait">
        <div className="hero-portrait-frame">
          <img src="assets/portrait-hero.png" alt="Tarlan Khanaliyev" />
        </div>
        <div className="hero-portrait-tag">
          <span className="dot-live" />
          <div>
            <div className="tag-name">Tarlan Khanaliyev</div>
            <div className="tag-loc"><Pin size={11} /> Würzburg, DE · open to work</div>
          </div>
        </div>
        <div className="hero-portrait-meta">
          <span>/ portfolio · 2026</span>
          <span>vol. 01</span>
        </div>
      </div>
    </header>);

}

/* ──────────────────────────────────────────────────────────────────
   Numbers strip — tilted gradient cards with real stats
   ────────────────────────────────────────────────────────────────── */
function Numbers() {
  const cards = [
  { tilt: 1, grad: "grad-1", label: "ad spend", stat: <><span className="small">$</span>200<span className="small">K+</span></>, desc: "Managed across Meta, TikTok and Google Ads." },
  { tilt: 2, grad: "grad-warm", label: "brands", stat: <>40<span className="small">+</span></>, desc: "From local SMBs to luxury e-commerce." },
  { tilt: 3, grad: "grad-sky", label: "roas lift", stat: <>3<span className="small">×</span></>, desc: "Average uplift on accounts I took over at MOF Agency." },
  { tilt: 4, grad: "grad-3", label: "tour revenue", stat: <><span className="small">$</span>50<span className="small">K+</span></>, desc: "Bookings generated for a tour brand in Azerbaijan — paid ads paired with an organic strategy." },
  { tilt: 5, grad: "grad-deep", label: "years in digital", stat: <>3<span className="small">+</span></>, desc: "Hands-on through platform shifts and creative cycles." }];

  return (
    <section className="numbers" data-screen-label="02 Numbers">
      <div className="numbers-row">
        {cards.map((c, i) =>
        <div key={i} className={`num-card ${c.grad}`} data-tilt={c.tilt}>
            <span className="label-light">{c.label}</span>
            <div>
              <div className="stat">{c.stat}</div>
              <p className="desc" style={{ marginTop: 12 }}>{c.desc}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Trusted-by logo strip
   ────────────────────────────────────────────────────────────────── */
function TrustedBy() {
  // Duplicate for seamless marquee loop
  const loop = [...BRAND_LOGOS, ...BRAND_LOGOS];
  return (
    <section className="trusted reveal" data-screen-label="03 Trusted">
      <div className="trusted-head">
        <div className="trusted-head-row">
          <div className="label" style={{ fontSize: "17px" }}>brands I&rsquo;ve worked with</div>
          <div className="trusted-count">
            <span className="trusted-count-num">40<span className="trusted-plus">+</span></span>
            <span className="trusted-count-label" style={{ fontSize: "17px" }}>brands · 14 sectors</span>
          </div>
        </div>
      </div>
      <div className="logo-track">
        <div className="logo-row">
          {loop.map((b, i) =>
          <div key={i} className="logo-cell" title={b.name}>
              <img src={b.file} alt={b.name} style={{ maxHeight: `${b.h}px` }} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Intro
   ────────────────────────────────────────────────────────────────── */
function Intro() {
  const [animated, setAnimated] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setAnimated(true); io.disconnect(); }
    }, { threshold: 0.55 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  // Career arc — milestones positioned along curve.
  // x = horizontal %, y = vertical % from bottom (curve y at that x)
  const milestones = [
    { x: 6,  y: 22, year: "2020", title: "B.Sc. Finance",    sub: "full scholarship · ASUE" },
    { x: 28, y: 30, year: "2022", title: "first ad account", sub: "freelance · curiosity" },
    { x: 50, y: 45, year: "2023", title: "MOF Agency",       sub: "in-house · paid lead" },
    { x: 70, y: 70, year: "2024", title: "$200K+ managed",   sub: "40+ brands · 14 sectors" },
    { x: 88, y: 88, year: "2025", title: "M.Sc. Würzburg",   sub: "management international", accent: true },
  ];

  return (
    <section className="intro-visual reveal cream-band cream-band-soft" id="about" ref={ref} data-screen-label="04 Intro">
      <div className="iv-card">
        <div className="iv-head">
          <div className="iv-col iv-col-left">
            <div className="iv-eyebrow"><span className="iv-num">/01</span> before</div>
            <h3 className="iv-h">Trained<br/>in finance.</h3>
            <p className="iv-p">B.Sc. in Finance, on full scholarship. I came up reading balance sheets and learning that every number tells a story — if you ask it the right question.</p>
          </div>

          <div className="iv-arrow" aria-hidden="true">
            <svg viewBox="0 0 80 24" fill="none">
              <path d="M2 12 Q 30 12, 50 12 L 70 12" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2 4"/>
              <path d="M62 6 L 72 12 L 62 18" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span>then</span>
          </div>

          <div className="iv-col iv-col-right">
            <div className="iv-eyebrow"><span className="iv-num">/02</span> now</div>
            <h3 className="iv-h">Fluent<br/>in performance.</h3>
            <p className="iv-p">Now I'm in Würzburg, studying for an M.Sc. in Management International. Three years and $200K+ in ad spend later — same rigour, faster feedback loop.</p>
          </div>
        </div>

        <div className={`iv-chart${animated ? " in" : ""}`}>
          {/* Cards row at top */}
          <div className="iv-cards-row">
            {milestones.map((m, i) => (
              <div key={`card-${i}`}
                   className={`iv-mcard${m.accent ? " accent" : ""}`}
                   style={{ left: `${m.x}%`, transitionDelay: `${1800 + i * 320}ms` }}>
                <div className="iv-mcard-year">{m.year}</div>
                <div className="iv-mcard-title">{m.title}</div>
                <div className="iv-mcard-sub">{m.sub}</div>
              </div>
            ))}
          </div>

          {/* Plot area: svg, guides, and dots all share the same coordinate space */}
          <div className="iv-plot">
            <svg className="iv-chart-svg" viewBox="0 0 1000 220" preserveAspectRatio="none">
              <defs>
                <linearGradient id="ivStroke" x1="0" x2="1" y1="0" y2="0">
                  <stop offset="0%" stopColor="#9a958c"/>
                  <stop offset="45%" stopColor="#7a7c9a"/>
                  <stop offset="100%" stopColor="#5b5fdb"/>
                </linearGradient>
                <linearGradient id="ivFill" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="#5b5fdb" stopOpacity="0.18"/>
                  <stop offset="100%" stopColor="#5b5fdb" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {/* horizontal grid */}
              {[40, 100, 160].map((y, i) => (
                <line key={i} x1="0" x2="1000" y1={y} y2={y} stroke="currentColor" strokeOpacity="0.08" strokeDasharray="2 4"/>
              ))}
              {/* fill */}
              <path className="iv-path-fill"
                pathLength="1"
                d="M 60 172 C 180 170, 240 165, 280 155 S 420 130, 500 120 S 640 88, 700 70 S 820 38, 880 30 L 880 200 L 60 200 Z"
                fill="url(#ivFill)"/>
              {/* main stroke */}
              <path className="iv-path"
                pathLength="1"
                d="M 60 172 C 180 170, 240 165, 280 155 S 420 130, 500 120 S 640 88, 700 70 S 820 38, 880 30"
                fill="none" stroke="url(#ivStroke)" strokeWidth="2.4" strokeLinecap="round"/>
            </svg>

            {/* Vertical guides from top of plot down to dot */}
            {milestones.map((m, i) => (
              <div key={`guide-${i}`}
                   className="iv-guide"
                   style={{ left: `${m.x}%`, height: `calc(100% - ${m.y}%)`, transitionDelay: `${2400 + i * 320}ms` }} />
            ))}

            {/* Dots positioned at their curve coordinates */}
            {milestones.map((m, i) => (
              <div key={`dot-${i}`}
                   className={`iv-dot${m.accent ? " accent" : ""}`}
                   style={{ left: `${m.x}%`, bottom: `${m.y}%`, transitionDelay: `${2100 + i * 320}ms` }} />
            ))}
          </div>

          <div className="iv-chart-axis">
            <span>career arc · 2020 → today</span>
            <span>↗ trajectory</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Toolkit — interactive orbital stage
   A single character at the center, tools arranged in arcs around it.
   Hovering any tool fires a beam from the mascot toward that tool,
   the mascot reacts (arms up, mouth O, antenna flares) and an info
   card surfaces. Cursor naturally drives eye/head tracking.
   ────────────────────────────────────────────────────────────────── */
const STAGE_W = 1240;
const STAGE_H = 800;
const STAGE_CX = STAGE_W / 2;
const STAGE_CY = STAGE_H / 2;

const STAGE_CATS = [
  { id: "perf",    num: "01", name: "performance",      blurb: "the ad platforms I run",   x: 620,  y: -60, align: "bc", color: "#3a6df0" },
  { id: "ai",      num: "02", name: "ai",               blurb: "",                         x: 1226, y: 400, align: "rm", color: "#5b5cff" },
  { id: "content", num: "03", name: "content & motion", blurb: "static, social, video",    x: 620,  y: 860, align: "tc", color: "#d97757" },
  { id: "office",  num: "04", name: "office & docs",    blurb: "",                         x: 14,   y: 400, align: "lm", color: "#a87a36" }
];

// Dodecagon layout — 12 tools spaced at exactly 30° around the central
// mascot on a single circle of radius 360 from (620, 400). Each
// category occupies 3 contiguous positions, so the four disciplines
// still read as discrete arcs (top / right / bottom / left) while
// every logo is the same distance from the center AND from its two
// neighbours. No more uneven gaps where the cross arms used to meet.
//   θ measured clockwise from 12 o'clock (top).
//   (x, y) = (620 + 360·sin θ, 400 − 360·cos θ).
const STAGE_TOOLS = [
  // PERFORMANCE — top arc (θ = 330°, 0°, 30°)
  { name: "Meta Ads",       logo: "meta",       freq: "proficient", cat: "perf",    x: 440,  y: 88,
    desc: "My strongest area. On most accounts I've taken over, I've cut cost-per-result by 30–50%." },
  { name: "TikTok Ads",     logo: "tiktok",     freq: "proficient", cat: "perf",    x: 620,  y: 40,
    desc: "I focus on what makes content go viral here, then build the ads around it." },
  { name: "Google Ads",     logo: "googleads",  freq: "proficient", cat: "perf",    x: 800,  y: 88,
    desc: "Where people search with the clearest intent. I make every click earn its place." },

  // AI — right arc (θ = 60°, 90°, 120°)
  { name: "Claude",         logo: "claude",     freq: "daily",      cat: "ai",      x: 932,  y: 220,
    desc: "I use it to build things from scratch — posters, websites, fresh copy — in minutes." },
  { name: "ChatGPT",        logo: "chatgpt",    freq: "daily",      cat: "ai",      x: 980,  y: 400,
    desc: "My daily helper. I polish drafts with it and clear small tasks fast." },
  { name: "Gemini",         logo: "gemini",     freq: "daily",      cat: "ai",      x: 932,  y: 580,
    desc: "My go-to for web research." },

  // CONTENT — bottom arc (θ = 150°, 180°, 210°)
  { name: "Adobe Premiere", logo: "premiere",   freq: "projects",   cat: "content", x: 800,  y: 712,
    desc: "For longer promotional videos that need a polished, professional finish." },
  { name: "CapCut",         logo: "capcut",     freq: "weekly",     cat: "content", x: 620,  y: 760,
    desc: "For short videos — Reels, TikToks and Stories." },
  { name: "Canva",          logo: "canva",      freq: "daily",      cat: "content", x: 440,  y: 712,
    desc: "Fast daily design — posts, stories and carousels, kept on-brand." },

  // OFFICE — left arc (θ = 240°, 270°, 300°)
  { name: "Word",           logo: "word",       freq: "weekly",     cat: "office",  x: 308,  y: 580,
    desc: "Where I write briefs, strategy docs and contracts." },
  { name: "Excel",          logo: "excel",      freq: "daily",      cat: "office",  x: 260,  y: 400,
    desc: "Reports, dashboards and performance tracking." },
  { name: "PowerPoint",     logo: "powerpoint", freq: "weekly",     cat: "office",  x: 308,  y: 220,
    desc: "Presentations for reports, pitches and internal updates." }
];

const CAT_BY_ID = Object.fromEntries(STAGE_CATS.map((c) => [c.id, c]));


/* Inline SVG brand logos — original geometric renderings, 40-unit viewBox. */
const LOGOS = {
  meta: "logos/meta.png",
  tiktok: "logos/tiktok.png",
  googleads: "logos/googleads.png",
  canva: "logos/canva.png",
  capcut: "logos/capcut.png",
  premiere: "logos/premiere.png",
  claude: "logos/claude.png",
  chatgpt: "logos/chatgpt.png",
  gemini: "logos/gemini.png",
  excel: "logos/excel.png",
  powerpoint: "logos/powerpoint.png",
  word: "logos/word.png"
};

function ToolLogo({ name, label }) {
  const src = LOGOS[name];
  if (!src) return <span className="tk2-logo" />;
  return (
    <span className={`tk2-logo tk2-logo--${name}`}>
      <img src={src} alt={label || name} loading="lazy" />
    </span>);

}

/* ──────────────────────────────────────────────────────────────────
   Toolkit Mascot — a small CRT-faced robot whose eyes follow the
   user's cursor. Hovering a tool tile makes it react (mouth opens,
   brows raise, antenna flares) and pop a speech bubble holding the
   tool's logo + frequency. The mascot lives in the section header.
   ────────────────────────────────────────────────────────────────── */
function ToolkitMascot({ hoveredTool }) {
  const wrapRef = useRef(null);
  const headRef = useRef(null);
  const leftPupilRef = useRef(null);
  const rightPupilRef = useRef(null);
  const leftEyeRef = useRef(null);
  const rightEyeRef = useRef(null);

  useEffect(() => {
    let rafId;
    let mx = window.innerWidth * 0.5;
    let my = window.innerHeight * 0.5;
    const cur = { lpx: 0, lpy: 0, rpx: 0, rpy: 0, hr: 0 };

    function onMove(e) {
      mx = e.clientX;
      my = e.clientY;
    }

    function calcPupil(eyeEl, maxR) {
      const r = eyeEl.getBoundingClientRect();
      if (!r.width) return { x: 0, y: 0 };
      const cx = r.left + r.width * 0.5;
      const cy = r.top + r.height * 0.5;
      const dx = mx - cx;
      const dy = my - cy;
      const dist = Math.hypot(dx, dy) || 1;
      const reach = Math.min(1, dist / 280);
      const f = (reach * maxR) / dist;
      return { x: dx * f, y: dy * f };
    }

    function tick() {
      if (!wrapRef.current || !headRef.current || !leftEyeRef.current || !rightEyeRef.current) {
        rafId = requestAnimationFrame(tick);
        return;
      }
      const tlp = calcPupil(leftEyeRef.current, 6);
      const trp = calcPupil(rightEyeRef.current, 6);

      const headRect = headRef.current.getBoundingClientRect();
      const hx = headRect.left + headRect.width * 0.5;
      const dx = mx - hx;
      const targetHr = Math.max(-7, Math.min(7, dx / 70));

      const k = 0.16;
      cur.lpx += (tlp.x - cur.lpx) * k;
      cur.lpy += (tlp.y - cur.lpy) * k;
      cur.rpx += (trp.x - cur.rpx) * k;
      cur.rpy += (trp.y - cur.rpy) * k;
      cur.hr += (targetHr - cur.hr) * k;

      if (leftPupilRef.current) leftPupilRef.current.setAttribute("transform", `translate(${cur.lpx.toFixed(2)} ${cur.lpy.toFixed(2)})`);
      if (rightPupilRef.current) rightPupilRef.current.setAttribute("transform", `translate(${cur.rpx.toFixed(2)} ${cur.rpy.toFixed(2)})`);
      if (headRef.current) headRef.current.style.transform = `rotate(${cur.hr.toFixed(2)}deg)`;

      rafId = requestAnimationFrame(tick);
    }

    window.addEventListener("mousemove", onMove, { passive: true });
    rafId = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      cancelAnimationFrame(rafId);
    };
  }, []);

  const isReacting = !!hoveredTool;
  const toolLogo = hoveredTool ? LOGOS[hoveredTool.logo] : null;

  return (
    <div className={`mascot ${isReacting ? "is-reacting" : ""}`} ref={wrapRef} aria-hidden="true">
      <div className="mascot-bob">
        <svg viewBox="0 0 280 340" className="mascot-svg">
          <defs>
            <linearGradient id="msc-screen" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#15172a" />
              <stop offset="100%" stopColor="#080912" />
            </linearGradient>
            <linearGradient id="msc-gloss" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#ffffff" stopOpacity="0.16" />
              <stop offset="60%" stopColor="#ffffff" stopOpacity="0" />
            </linearGradient>
            <linearGradient id="msc-chassis" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#f3efe2" />
              <stop offset="100%" stopColor="#e3dfd0" />
            </linearGradient>
          </defs>

          {/* ground shadow */}
          <ellipse className="mascot-shadow" cx="140" cy="328" rx="76" ry="6" fill="rgba(0,0,0,0.18)" />

          {/* body */}
          <g className="mascot-body">
            {/* arms — grouped with hands so they can lift together */}
            <g className="mascot-arm mascot-arm--l">
              <rect x="22" y="244" width="22" height="58" rx="11" fill="#dfdbcc" />
              <circle cx="33" cy="306" r="13" fill="#ece8d9" stroke="rgba(0,0,0,0.08)" strokeWidth="1.2" />
            </g>
            <g className="mascot-arm mascot-arm--r">
              <rect x="236" y="244" width="22" height="58" rx="11" fill="#dfdbcc" />
              <circle cx="247" cy="306" r="13" fill="#ece8d9" stroke="rgba(0,0,0,0.08)" strokeWidth="1.2" />
            </g>
            {/* torso */}
            <rect x="55" y="232" width="170" height="78" rx="22" fill="url(#msc-chassis)" stroke="rgba(0,0,0,0.1)" strokeWidth="1.4" />
            {/* chest panel */}
            <rect x="98" y="248" width="84" height="46" rx="10" fill="#f8f5ed" stroke="rgba(0,0,0,0.06)" />
            {/* indicator lights */}
            <circle cx="116" cy="271" r="3.6" fill="#d97757">
              <animate attributeName="opacity" values="1;0.3;1" dur="2.4s" repeatCount="indefinite" />
            </circle>
            <circle cx="140" cy="271" r="3.6" fill="#7ba98a" opacity="0.78" />
            <circle cx="164" cy="271" r="3.6" fill="#a09f8e" opacity="0.55" />
            {/* id strip */}
            <rect x="108" y="283" width="64" height="3" rx="1.5" fill="rgba(0,0,0,0.1)" />
          </g>

          {/* neck */}
          <rect x="116" y="218" width="48" height="20" rx="6" fill="#d6d1c0" />
          <rect x="116" y="222" width="48" height="2" rx="1" fill="rgba(0,0,0,0.12)" />

          {/* head — rotates toward cursor */}
          <g className="mascot-head" ref={headRef} style={{ transformOrigin: "140px 230px", transformBox: "fill-box" }}>
            {/* antenna */}
            <line x1="140" y1="48" x2="140" y2="22" stroke="#bfbba9" strokeWidth="3" strokeLinecap="round" />
            <circle className="mascot-antenna" cx="140" cy="15" r="6.5" fill="#d97757" />

            {/* head chassis */}
            <rect x="48" y="48" width="184" height="172" rx="36" fill="url(#msc-chassis)" stroke="rgba(0,0,0,0.1)" strokeWidth="1.5" />

            {/* side vents */}
            <rect x="38" y="116" width="12" height="44" rx="5" fill="#d2cdba" />
            <rect x="230" y="116" width="12" height="44" rx="5" fill="#d2cdba" />
            <rect x="40" y="122" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="40" y="130" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="40" y="138" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="40" y="146" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="40" y="154" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="232" y="122" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="232" y="130" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="232" y="138" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="232" y="146" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />
            <rect x="232" y="154" width="8" height="2" rx="1" fill="rgba(0,0,0,0.18)" />

            {/* screen face */}
            <rect x="64" y="62" width="152" height="128" rx="22" fill="url(#msc-screen)" />
            <rect x="64" y="62" width="152" height="68" rx="22" fill="url(#msc-gloss)" />
            {/* scanline */}
            <rect x="64" y="62" width="152" height="128" rx="22" fill="none" stroke="rgba(255,255,255,0.06)" />

            {/* eyebrows */}
            <rect className="mascot-brow mascot-brow--l" x="98" y="98" width="24" height="3.4" rx="1.7" fill="#f5f1e3" />
            <rect className="mascot-brow mascot-brow--r" x="158" y="98" width="24" height="3.4" rx="1.7" fill="#f5f1e3" />

            {/* eyes — outer groups maintain bbox for cursor tracking,
                inner groups carry the blink animation */}
            <g ref={leftEyeRef} transform="translate(110 126)">
              <rect x="-18" y="-18" width="36" height="36" fill="none" pointerEvents="none" />
              <g className="mascot-eye">
                <circle r="17" fill="#f4f0e2" />
                <circle r="17" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="0.5" />
                <g ref={leftPupilRef}>
                  <circle r="8" fill="#0e0f1a" />
                  <circle cx="-2.2" cy="-2.6" r="2.6" fill="#f4f0e2" />
                  <circle cx="2" cy="3" r="1" fill="#f4f0e2" opacity="0.6" />
                </g>
              </g>
            </g>
            <g ref={rightEyeRef} transform="translate(170 126)">
              <rect x="-18" y="-18" width="36" height="36" fill="none" pointerEvents="none" />
              <g className="mascot-eye">
                <circle r="17" fill="#f4f0e2" />
                <circle r="17" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="0.5" />
                <g ref={rightPupilRef}>
                  <circle r="8" fill="#0e0f1a" />
                  <circle cx="-2.2" cy="-2.6" r="2.6" fill="#f4f0e2" />
                  <circle cx="2" cy="3" r="1" fill="#f4f0e2" opacity="0.6" />
                </g>
              </g>
            </g>

            {/* mouth — smile by default, O-shape when reacting */}
            <g className="mascot-mouth">
              <path className="mascot-mouth-smile" d="M122 162 Q140 173 158 162" stroke="#f4f0e2" strokeWidth="3" fill="none" strokeLinecap="round" />
              <ellipse className="mascot-mouth-o" cx="140" cy="166" rx="7" ry="8.5" fill="#f4f0e2" />
            </g>

            {/* tiny status text on screen */}
            <text x="74" y="208" fill="#7d7f95" fontSize="6" fontFamily="ui-monospace, monospace" letterSpacing="1.2">● ONLINE · v.3.2 · tracking</text>
          </g>
        </svg>
      </div>
    </div>);

}

function Toolkit() {
  const [hoveredTool, setHoveredTool] = useState(null);
  const [hasInteracted, setHasInteracted] = useState(false);
  const stageRef = useRef(null);

  // The current hovered category (for ambient tint)
  const hoveredCat = hoveredTool ? CAT_BY_ID[hoveredTool.cat] : null;

  function pickTool(t) {
    setHoveredTool(t);
    if (t) setHasInteracted(true);
  }

  // For keyboard a11y: index navigation through tools
  function handleKey(e, idx) {
    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
      const next = (idx + 1) % STAGE_TOOLS.length;
      stageRef.current?.querySelectorAll(".tk3-tool")[next]?.focus();
      e.preventDefault();
    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
      const prev = (idx - 1 + STAGE_TOOLS.length) % STAGE_TOOLS.length;
      stageRef.current?.querySelectorAll(".tk3-tool")[prev]?.focus();
      e.preventDefault();
    }
  }

  return (
    <section className="toolkit3 reveal" id="toolkit" data-screen-label="04b Toolkit">
      <div className="tk3-header">
        <div className="tk3-eyebrow">
          <span className="label">toolkit</span>
          <span className="tk3-eyebrow-divider" />
          <span className="tk3-eyebrow-meta">
            <span className="tk3-eyebrow-dot" />
            interactive · {STAGE_TOOLS.length} tools · 4 disciplines
          </span>
        </div>
        <h2 className="h-section">Tools I use,<br />daily and well.</h2>
      </div>

      {/* speech card — sits above the stage, always present, drives the
          "robot is talking to you" feeling. Idle when nothing hovered. */}
      <div className={`tk3-card ${hoveredTool ? "is-on" : ""}`}
        style={hoveredCat ? { "--cat-color": hoveredCat.color } : undefined}>
        <div className="tk3-card-row">
          {hoveredTool ?
          <div className="tk3-card-logo" style={{ "--cat-color": hoveredCat.color }}>
              <img src={LOGOS[hoveredTool.logo]} alt="" />
            </div> :

          <div className="tk3-card-logo tk3-card-logo--idle">
              <span className="tk3-card-cursor" />
            </div>
          }
          <div className="tk3-card-body">
            <div className="tk3-card-name">{hoveredTool ? hoveredTool.name : "Awaiting input…"}</div>
            <div className="tk3-card-meta">
              <span className="tk3-card-freq">{hoveredTool ? hoveredTool.freq : "hover any tool"}</span>
              {hoveredTool &&
              <React.Fragment>
                  <span className="tk3-card-dot" />
                  <span className="tk3-card-cat" style={{ color: hoveredCat.color }}>
                    {hoveredCat.name}
                  </span>
                </React.Fragment>
              }
            </div>
          </div>
        </div>
        <p className="tk3-card-desc">
          <span className="tk3-card-quote">"</span>
          {hoveredTool ?
          hoveredTool.desc :

          "Move your cursor onto a tool and I'll tell you how I use it."
          }
        </p>
      </div>

      <div
        className={`tk3-stage ${hoveredTool ? "is-hovering" : ""}`}
        ref={stageRef}
        style={hoveredCat ? { "--cat-color": hoveredCat.color } : undefined}>

        <svg className="tk3-svg" viewBox={`0 0 ${STAGE_W} ${STAGE_H}`} preserveAspectRatio="xMidYMid meet" aria-hidden="true">
          {/* ambient backdrop spotlight */}
          <defs>
            <radialGradient id="tk3-spot" cx="50%" cy="50%" r="40%">
              <stop offset="0%" stopColor="rgba(217,119,87,0.10)" />
              <stop offset="60%" stopColor="rgba(217,119,87,0.02)" />
              <stop offset="100%" stopColor="rgba(217,119,87,0)" />
            </radialGradient>
          </defs>
          <ellipse cx={STAGE_CX} cy={STAGE_CY} rx="520" ry="320" fill="url(#tk3-spot)" />

          {/* orbital rings — concentric circles tracing the dodecagon radius */}
          <circle cx={STAGE_CX} cy={STAGE_CY} r="240" fill="none" stroke="rgba(0,0,0,0.08)" strokeDasharray="2 7" />
          <circle cx={STAGE_CX} cy={STAGE_CY} r="320" fill="none" stroke="rgba(0,0,0,0.06)" strokeDasharray="2 7" />
          <circle cx={STAGE_CX} cy={STAGE_CY} r="360" fill="none" stroke="rgba(0,0,0,0.05)" strokeDasharray="2 9" />

          {/* faint connection lines — every tool to center, low opacity */}
          {STAGE_TOOLS.map((t, i) =>
          <line key={i}
            x1={STAGE_CX} y1={STAGE_CY} x2={t.x} y2={t.y}
            stroke="rgba(0,0,0,0.05)" strokeWidth="1" />
          )}

          {/* active beam — drawn on top */}
          {hoveredTool &&
          <g className="tk3-beam">
              <line
              x1={STAGE_CX} y1={STAGE_CY} x2={hoveredTool.x} y2={hoveredTool.y}
              stroke={hoveredCat.color} strokeWidth="2"
              strokeDasharray="6 8" strokeLinecap="round"
              className="tk3-beam-line" />

              <circle cx={hoveredTool.x} cy={hoveredTool.y} r="48" fill="none"
              stroke={hoveredCat.color} strokeWidth="1.5" opacity="0.5"
              className="tk3-beam-ring" />
              <circle cx={hoveredTool.x} cy={hoveredTool.y} r="56" fill="none"
              stroke={hoveredCat.color} strokeWidth="1" opacity="0.3"
              className="tk3-beam-ring tk3-beam-ring--2" />
            </g>
          }
        </svg>

        {/* category labels */}
        {STAGE_CATS.map((c) => {
          const isActive = hoveredCat?.id === c.id;
          const xp = (c.x / STAGE_W) * 100;
          const yp = (c.y / STAGE_H) * 100;
          return (
            <div
              key={c.id}
              className={`tk3-cat tk3-cat--${c.align} ${isActive ? "is-active" : ""}`}
              style={{ left: `${xp}%`, top: `${yp}%`, "--cat-color": c.color }}>

              <span className="tk3-cat-num">/{c.num}</span>
              <span className="tk3-cat-name">{c.name}</span>
              {c.blurb && <span className="tk3-cat-blurb">{c.blurb}</span>}
            </div>);

        })}

        {/* tool tiles */}
        {STAGE_TOOLS.map((t, i) => {
          const isActive = hoveredTool === t;
          const xp = (t.x / STAGE_W) * 100;
          const yp = (t.y / STAGE_H) * 100;
          const cat = CAT_BY_ID[t.cat];
          return (
            <button
              key={t.name}
              className={`tk3-tool tk3-tool--${t.cat} ${isActive ? "is-active" : ""}`}
              style={{ left: `${xp}%`, top: `${yp}%`, "--cat-color": cat.color }}
              onMouseEnter={() => pickTool(t)}
              onMouseLeave={() => setHoveredTool((prev) => prev === t ? null : prev)}
              onFocus={() => pickTool(t)}
              onBlur={() => setHoveredTool((prev) => prev === t ? null : prev)}
              onKeyDown={(e) => handleKey(e, i)}
              aria-label={`${t.name} — ${t.freq}, ${cat.name}`}>

              <span className="tk3-tool-disc">
                <span className="tk3-tool-ring" />
                <img src={LOGOS[t.logo]} alt="" />
              </span>
              <span className="tk3-tool-cap">{t.name}</span>
            </button>);

        })}

        {/* central mascot */}
        <div className="tk3-mascot-wrap">
          <ToolkitMascot hoveredTool={hoveredTool} />
        </div>

        {/* idle hint — arrows nudge user to mouse around */}
        <div className={`tk3-hint ${hasInteracted ? "is-hidden" : ""}`}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M3 3 L10 10 L7.5 10.5 L8 13 L6 13.5 L5.5 11 L3.5 11.5 Z" fill="currentColor" />
          </svg>
          <span>move your cursor — I'll watch</span>
        </div>
      </div>

    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Capabilities
   ────────────────────────────────────────────────────────────────── */
const CAPABILITIES = [
{
  id: "paid", label: "Paid media",
  title: "I can find the right people\nat the right cost.",
  body: [
  "Across Meta, TikTok and Google Ads, I build full-funnel campaigns — from cold prospecting to retargeting warm audiences — with cost-per-result as the constant focus.",
  "At MOF Agency, I cut CPA by 30–50% on most accounts I took over within the first 60 days through structured, disciplined testing."],

  pill: null,
  funnel: true,
  mock: "paid",
  dark: true
},
{
  id: "content", label: "Content & social",
  title: "Build a presence\nthat compounds.",
  body: [
  "Organic and paid pull in the same direction — or they don’t pull at all. I plan content weeks at a time, write captions in the brand’s voice, and treat the algorithm like a behavioural system to be read.",
  "For the tour brand in Azerbaijan, we combined paid spend with an organic strategy and ended up with $50K+ in bookings."],

  pill: null,
  converge: true,
  mock: null,
  dark: true
}];


function CapabilityBlock({ cap, idx }) {
  const grads = ["grad-4", "grad-5", "grad-1", "grad-warm"];
  return (
    <section className="cap reveal" id={cap.id} data-screen-label={`05 ${cap.label}`}>
      <div className="cap-header">
        <div className="copy">
          <div className="label" style={{ marginBottom: 22 }}>{cap.label}</div>
          <h2 className="h-section">
            {cap.title.split("\n").map((line, i, arr) =>
            <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
            )}
          </h2>
          <div style={{ marginTop: 28 }}>
            {cap.body.map((p, i) =>
            <p key={i} style={{ marginTop: i === 0 ? 0 : 12, color: "var(--ink-soft)", maxWidth: "44ch", fontSize: 16 }}>{p}</p>
            )}
          </div>
        </div>
        {cap.funnel ?
        <CapFunnel /> :
        cap.converge ?
        <CapConverge /> :
        cap.pill ?
        <a href={`#${cap.id}`} className="cap-pill">
            <div>
              <div className="title">{cap.pill.title}</div>
              <div className="sub">{cap.pill.sub}</div>
            </div>
            <span className="arrow"><Arrow /></span>
          </a> :
        null
        }
      </div>
      <CapArt kind={cap.mock} grad={grads[idx]} dark={cap.dark} />
    </section>);

}

/* Converge diagram — sits where the cap-pill used to be on the Content block.
   Two strands (organic + paid) coming in, meeting at a node, leaving as one. */
function CapConverge() {
  return (
    <div className="cap-converge" aria-label="Organic and paid pulling the same direction">
      <div className="cap-converge-head">
        <span className="cap-converge-label">/ same direction</span>
        <span className="cap-converge-meta">organic + paid</span>
      </div>

      <svg className="cap-converge-svg" viewBox="0 0 320 140" aria-hidden="true">
        <defs>
          <linearGradient id="cc-grad-o" x1="0" x2="1">
            <stop offset="0" stopColor="rgba(141,145,255,0.25)" />
            <stop offset="1" stopColor="rgba(141,145,255,1)" />
          </linearGradient>
          <linearGradient id="cc-grad-p" x1="0" x2="1">
            <stop offset="0" stopColor="rgba(243,241,236,0.15)" />
            <stop offset="1" stopColor="rgba(243,241,236,0.75)" />
          </linearGradient>
        </defs>

        {/* Two incoming strands meeting at the compound-growth node */}
        <path className="cc-strand cc-strand-o"
              d="M 8 28 C 80 28, 150 60, 220 70" />
        <path className="cc-strand cc-strand-p"
              d="M 8 112 C 80 112, 150 80, 220 70" />

        {/* Compound-growth indicator — node + rising spark line */}
        <g className="cc-tagicon" transform="translate(220 70)">
          {/* halo */}
          <circle cx="0" cy="0" r="14"
            fill="rgba(141,145,255,0.12)"
            stroke="rgba(141,145,255,0.4)"
            strokeWidth="1"
            strokeDasharray="2 3" />
          {/* core node */}
          <circle cx="0" cy="0" r="5"
            fill="rgba(141,145,255,0.95)" />
          {/* rising spark line — growth curve */}
          <path
            d="M 14 -2 L 30 -10 L 42 -26 L 56 -48"
            fill="none"
            stroke="rgba(141,145,255,0.95)"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round" />
          {/* tick marks along the rise */}
          <circle cx="30" cy="-10" r="1.8" fill="rgba(141,145,255,0.95)" />
          <circle cx="42" cy="-26" r="1.8" fill="rgba(141,145,255,0.95)" />
          {/* arrow head at the top */}
          <path
            d="M 50 -42 L 56 -48 L 50 -54"
            fill="none"
            stroke="rgba(141,145,255,0.95)"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round" />
          {/* label */}
          <text x="0" y="32" className="cc-node-label" textAnchor="middle">compounds</text>
        </g>

        {/* Endpoint labels */}
        <text x="14" y="20" className="cc-tag cc-tag-o">organic</text>
        <text x="14" y="128" className="cc-tag cc-tag-p">paid</text>
      </svg>
    </div>);

}

/* Funnel diagram — sits where the cap-pill used to be on the Paid block */
function CapFunnel() {
  const stages = [
  { num: "01", label: "Awareness", w: 100 },
  { num: "02", label: "Consider", w: 78 },
  { num: "03", label: "Convert", w: 56 },
  { num: "04", label: "Retain", w: 34 }];

  return (
    <div className="cap-funnel" aria-label="Full-funnel approach">
      <div className="cap-funnel-head">
        <span className="cap-funnel-label">/ full-funnel</span>
        <span className="cap-funnel-meta">cold → loyal</span>
      </div>
      <div className="cap-funnel-stages">
        {stages.map((s, i) =>
        <div className="cap-funnel-row" key={i}>
            <span className="cap-funnel-num">{s.num}</span>
            <span className="cap-funnel-name">{s.label}</span>
            <span className="cap-funnel-bar" style={{ width: `${s.w}%` }}>
              <i style={{ ['--w']: `${s.w}%` }}></i>
            </span>
          </div>
        )}
      </div>
    </div>);

}

function CapArt({ kind, grad, dark }) {
  if (!kind) return null;
  return (
    <div className={`cap-art ${grad}`}>
      <div className={`cap-screenshot${dark ? " cap-screenshot--dark" : ""}`}>
        {kind === "paid" && <PaidMock />}
        {kind === "strategy" && <StrategyMock />}
      </div>
    </div>);

}

/* ──────────────────────────────────────────────────────────────────
   Mock UIs
   ────────────────────────────────────────────────────────────────── */
function PaidMock() {
  return (
    <div className="paid-poster">
      <div className="algo-poster-eyebrow">
        <span className="algo-dot" aria-hidden="true"></span>
        on the side of the algorithm
      </div>

      <h3 className="algo-poster-line">
        <span>Read the platform.</span>
        <span className="algo-poster-em">Write the pattern.</span>
      </h3>

      <p className="algo-poster-strategy">
        Every platform has a logic of its own — I learn it, then build the campaigns that move with it instead of against it.
      </p>
    </div>);

}

/* ----- Content & Social — signals I watch ----- */
function ContentMock() {
  return (
    <div className="content-mock content-mock--single">
      {/* Algorithm signals I watch */}
      <div className="cm-panel cm-panel--right">
        <div className="cm-panel-head">
          <span className="cm-label">/ signals I watch</span>
          <span className="cm-meta">weighted, not equal</span>
        </div>

        <ul className="cm-signals">
          {[
          { name: "Saves",          weight: 92, note: "intent to revisit" },
          { name: "Comment depth",  weight: 78, note: "replies > likes" },
          { name: "Watch-through",  weight: 71, note: "completion %" },
          { name: "Profile visits", weight: 58, note: "ladder to follow" },
          { name: "Likes",          weight: 22, note: "vanity floor" }].
          map((s, i) =>
          <li key={i} className="cm-sig-row">
              <span className="cm-sig-name">{s.name}</span>
              <span className="cm-sig-bar">
                <i style={{ width: `${s.weight}%`, animationDelay: `${i * 90}ms` }} />
              </span>
              <span className="cm-sig-note">{s.note}</span>
            </li>
          )}
        </ul>

        <div className="cm-insight">
          <span className="cm-insight-mark">※</span>
          A like is a polite nod. A save is intent. I write for the signals that compound.
        </div>
      </div>
    </div>);

}

/* ----- Strategy — competitor matrix ----- */
function StrategyMock() {
  const competitors = [
  { name: "Brand A", x: 28, y: 30, size: 18, color: "comp-a", label: "premium · slow" },
  { name: "Brand B", x: 70, y: 75, size: 22, color: "comp-b", label: "value · fast" },
  { name: "Brand C", x: 65, y: 25, size: 14, color: "comp-c", label: "premium · fast" },
  { name: "Us", x: 80, y: 40, size: 26, color: "comp-us", label: "our positioning" }];

  return (
    <>
      <div className="mock-head">
        <div className="mock-title-row">
          <span className="square">tk</span>
          <span>Market positioning · v2</span>
        </div>
        <div className="mock-tabs">
          <span className="tab">Brief</span>
          <span className="tab active">Matrix</span>
          <span className="tab">KPI tree</span>
        </div>
      </div>
      <div className="mock-h">Competitor positioning — 4 brands</div>
      <div className="strategy-matrix">
        <div className="axis-y">price ↑</div>
        <div className="axis-x">speed →</div>
        <div className="matrix-frame">
          <div className="quad-grid" />
          {competitors.map((c, i) =>
          <div key={i}
          className={`comp-dot ${c.color}`}
          style={{ left: `${c.x}%`, bottom: `${c.y}%`, width: c.size, height: c.size }}
          title={c.name}>
            
              <span className="comp-label" style={{ left: c.size + 4 }}>{c.name} · <em>{c.label}</em></span>
            </div>
          )}
        </div>
      </div>
    </>);

}

/* ──────────────────────────────────────────────────────────────────
   Selected work — Ledger
   ────────────────────────────────────────────────────────────────── */
const CAMPAIGNS = [
{ industry: "marketing agency", role: "in-house", duration: "1 year", name: "MOF Agency", desc: "Set up the optimisation rhythm and ran paid ads for the agency’s portfolio. Lifted the agency’s average ROAS 3× during my time.", outcome: <>3<span className="unit">×</span></>, outcomeNote: "average ROAS lift" },
{ industry: "tourism · azerbaijan", role: "lead", duration: "6 months", name: "Tour brand", desc: "Funnel built from scratch on Meta + Google, paired with an organic content strategy. Scaled spend with stable cost-per-booking through high season.", outcome: <><span className="unit">$</span>50<span className="unit">K+</span></>, outcomeNote: "in tour bookings" },
{ industry: "education · b2c", role: "performance", duration: "ongoing", name: "Education centre", desc: "Lead-gen on Meta and Google with intent-based audiences. Replaced broad targeting with niche segments.", outcome: <>↓42<span className="unit">%</span></>, outcomeNote: "cost per lead" },
{ industry: "luxury · mena", role: "freelance", duration: "8 months", name: "Luxury watch brand", desc: "Brand-led Instagram creative direction. Reels-first format with a premium, restrained aesthetic.", outcome: <>3<span className="unit">×</span></>, outcomeNote: "follower growth" },
{ industry: "beauty · e-commerce", role: "paid lead", duration: "4 months", name: "Hair extension brand", desc: "Built and scaled paid social on Instagram from a cold start. Generated $30K+ in sales in four months — entirely from paid ads.", outcome: <><span className="unit">$</span>30<span className="unit">K+</span></>, outcomeNote: "in sales from paid ads · 4 months" },
{ industry: "education consulting", role: "lead paid", duration: "9 months", name: "Education consulting firm", desc: "Lead-gen funnel with intent layered on top of competitor research. Steady booking flow through low and high seasons.", outcome: <>100<span className="unit">+ / mo</span></>, outcomeNote: "consultations booked monthly" }];


function Ledger() {
  return (
    <section className="ledger reveal" id="work" data-screen-label="06 Work">
      <div className="ledger-head">
        <div>
          <div className="label" style={{ marginBottom: 22 }}>Selected work</div>
          <h2 className="h-section">Six projects that<br />shaped my craft.</h2>
        </div>
        <div />
      </div>
      <div className="ledger-grid">
        {CAMPAIGNS.map((c, i) =>
        <div className="ledger-card" key={i}>
            <div className="meta">
              <span>{c.industry}</span>
            </div>
            <div>
              <div className="name">{c.name}</div>
              <div className="desc" style={{ marginTop: 8 }}>{c.desc}</div>
            </div>
            <div>
              <div className="outcome">{c.outcome}</div>
              <div className="label muted" style={{ marginTop: 8 }}>{c.outcomeNote}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   ROAS-growth chart — repurposed Compare
   ────────────────────────────────────────────────────────────────── */
function RoasChart() {
  const [animate, setAnimate] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setAnimate(true);io.disconnect();}
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  // Q1..Q4 of agency time — 1.0× → 3.0× lift. h is % of chart area (max 3.0×)
  const bars = [
  { label: "Q1 ’24", value: "1.0", h: 33, delta: null },
  { label: "Q2 ’24", value: "1.6", h: 53, delta: "+60%" },
  { label: "Q3 ’24", value: "2.3", h: 77, delta: "+44%" },
  { label: "Q4 ’24", value: "3.0", h: 100, delta: "+30%", mine: true }];


  return (
    <section className="compare reveal" ref={ref} data-screen-label="07 Growth">
      <div className="compare-card">
        <div className="compare-head">
          <div className="copy">
            <div className="label" style={{ marginBottom: 22 }}>at MOF Agency · 2024</div>
            <h2 className="h-section">Four quarters.<br />Triple the return.</h2>
            <p style={{ marginTop: 24 }}>I took over the agency’s paid-media operation in late 2023. A year later, the average ROAS across our active accounts had tripled — driven by tighter audience pockets, faster creative iteration and a strict bi-weekly review cadence.</p>
          </div>
        </div>
        <div className="bars-wrap">
          <div className="bars-grid" aria-hidden="true">
            <div className="gridline"><span>3.0×</span></div>
            <div className="gridline"><span>2.0×</span></div>
            <div className="gridline"><span>1.0×</span></div>
            <div className="gridline gridline-base"><span>0</span></div>
          </div>
          <div className="bars">
            {bars.map((b, i) =>
            <div className="bar-col" key={i}>
                <div className="bar-top">
                  {b.delta && <div className="bar-delta">{b.delta}</div>}
                  <div className={`bar-value${b.mine ? " bar-value-mine" : ""}`}>
                    {b.value}<span className="bar-x">×</span>
                  </div>
                </div>
                <div className="bar-track">
                  <div className={`bar${b.mine ? " mine" : ""}`} style={{ transform: animate ? `scaleY(${b.h / 100})` : "scaleY(0)" }} />
                </div>
                <div className="bar-label">{b.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Industries (real list, in a marquee)
   ────────────────────────────────────────────────────────────────── */
function Industries() {
  const items = INDUSTRIES;
  const loopA = [...items, ...items];
  return (
    <section className="industries reveal" id="industries" data-screen-label="08 Industries">
      <div className="industries-head">
        <div className="label">sectors</div>
        <h3 className="h-section">Fourteen sectors,<br />one disciplined method.</h3>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {loopA.map((s, i) =>
          <span key={i} className="marquee-item">
              <span className="marquee-num">/{String(i % items.length + 1).padStart(2, "0")}</span>
              {s}
            </span>
          )}
        </div>
      </div>
      <p className="industries-foot">Pricing psychology in restaurants, intent in education, repeat-rate in beauty — every sector has its own quirks, and the playbook bends to fit each.</p>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Markets / Languages strip
   ────────────────────────────────────────────────────────────────── */
function Markets() {
  return (
    <section className="markets reveal cream-band cream-band-soft" data-screen-label="09 Markets">
      <div className="label" style={{ marginBottom: 18 }}>languages</div>
      <h3 className="h-section">Four languages.</h3>
      <p className="lede">English is my working language. I’m actively studying German and targeting B2 by the end of 2026.</p>
      <div className="markets-row">
        <div className="market-item"><div className="name">Azerbaijani</div><div className="sub">native</div></div>
        <div className="market-item"><div className="name">Turkish</div><div className="sub">C2</div></div>
        <div className="market-item"><div className="name">English</div><div className="sub">C1 · working language</div></div>
        <div className="market-item"><div className="name">German</div><div className="sub">A2</div></div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Education timeline
   ────────────────────────────────────────────────────────────────── */
const EDUCATION = [
{
  year: "2025 — 2027",
  school: "University of Würzburg",
  detail: "M.Sc. Management International · 120 ECTS.",
  badge: "current"
},
{
  year: "2024",
  school: "Shamakhi District Treasury Department No. 14",
  detail: "Finance Intern — analysed financial data, tracked KPIs, and prepared internal reports and dashboards.",
  badge: "internship"
},
{
  year: "2023 — 2024",
  school: "MOF Agency",
  detail: "Social Media & Targeting Specialist — led digital marketing for the agency portfolio.",
  badge: "in-house"
},
{
  year: "2023",
  school: "Baku Heritage Tours",
  detail: "Product Marketing Specialist — ran Meta campaigns and rewrote listings to lift tour bookings.",
  badge: "in-house"
},
{
  year: "2020 — 2024",
  school: "Azerbaijan State University of Economics",
  detail: "B.Sc. Finance · SABAH group (English-taught, competitive admission) · 244 ECTS · full scholarship across all four years.",
  badge: "scholarship"
}];


function Education() {
  return (
    <section className="education reveal" id="education" data-screen-label="10 Education">
      <div className="education-head">
        <div className="label" style={{ marginBottom: 22 }}>about me</div>
        <h3 className="h-section">Education<br />and experience.</h3>
        <p className="lede">A finance B.Sc. on full scholarship. An M.Sc. in Management International, in progress.</p>
      </div>
      <div className="education-list">
        {EDUCATION.map((e, i) =>
        <div className="edu-row" key={i}>
            <div className="edu-year">{e.year}</div>
            <div className="edu-body">
              <div className="edu-school">{e.school}</div>
              <div className="edu-detail">{e.detail}</div>
            </div>
            <div className="edu-badge">{e.badge}</div>
          </div>
        )}
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Open letter — with portrait
   ────────────────────────────────────────────────────────────────── */
function Letter() {
  return (
    <section className="letter reveal cream-band cream-band-soft" data-screen-label="11 Letter">
      <div className="letter-inner with-portrait">
        <div className="portrait-col">
          <div className="portrait-frame">
            <img src="assets/portrait-circle-dark.jpg" alt="Tarlan Khanaliyev" />
          </div>
          <div className="portrait-cap">
            <span className="who">Tarlan Khanaliyev</span>
            <span className="where">Würzburg · 2026</span>
          </div>
        </div>
        <div className="letter-text">
          <div className="label" style={{ marginBottom: 22 }}>a note from me</div>
          <h2 className="h-section">A finance student<br />who fell in love<br />with ad accounts.</h2>
          <p style={{ marginTop: 36 }}>I studied finance because I loved the rigour of numbers — dashboards on the side, plans to end up in a treasury somewhere quiet.</p>
          <p>Then a friend asked me to set up an Instagram ad. I did, and watched something I’d made go from zero to revenue inside forty-eight hours. The spreadsheet caught fire.</p>
          <p>Three years later I’ve managed <b>$200,000+</b> in ad spend across <b>40+</b> brands. I worked in-house at MOF Agency for a year — average ROAS tripled across our accounts during my time — and freelanced for the rest, including a tour brand in Azerbaijan that we grew to <b>$50,000+</b> in bookings through paid and organic combined.</p>
          <p>Now I’m in Würzburg, studying for an M.Sc. in Management International. I’m here for two years, building on what I’ve learnt and looking for the right team to work alongside while I study.</p>
          <p>If you’re hiring and you read this far — I’d love to talk.</p>
          <div className="sign">
            Yours,<br />
            <span className="signature">Tarlan Khanaliyev</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────
   Contact / Footer
   ────────────────────────────────────────────────────────────────── */
function Contact() {
  return (
    <footer className="contact" id="contact" data-screen-label="12 Contact">
      <div className="contact-inner">
        <h2 className="h-display">Let’s build something<br />worth measuring.</h2>
        <p className="lede">Open to working-student positions in Germany.</p>
        <div className="contact-ctas">
          <a href={`mailto:${CONTACT.email}`} className="cta-pill">
            <span className="arrow"><Arrow /></span>
            Email me directly
          </a>
          <a href={CONTACT.linkedin} target="_blank" rel="noopener" className="cta-ghost-dark">
            <LinkedinGlyph /> LinkedIn
          </a>
        </div>
        <div className="copyline">
          <span>© {new Date().getFullYear()} Tarlan Khanaliyev.</span>
          <span>thank you for reading this far</span>
        </div>
      </div>
    </footer>);

}

/* ──────────────────────────────────────────────────────────────────
   Tweaks
   ────────────────────────────────────────────────────────────────── */
function PortfolioTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakSelect label="Palette" value={t.palette} onChange={(v) => setTweak("palette", v)} options={[
      { value: "cream", label: "Cream" },
      { value: "paper", label: "Paper" },
      { value: "sage", label: "Sage" },
      { value: "ink", label: "Ink (dark)" }]
      } />
      <TweakSection label="Hero" />
      <TweakSelect label="Variant" value={t.heroVariant} onChange={(v) => setTweak("heroVariant", v)} options={[
      { value: "intro", label: "Introduction" },
      { value: "numbers", label: "Numbers" },
      { value: "craft", label: "Craft" }]
      } />
      <TweakSection label="Sections" />
      <TweakToggle label="Industries" value={t.showIndustries} onChange={(v) => setTweak("showIndustries", v)} />
      <TweakToggle label="Markets" value={t.showMarkets} onChange={(v) => setTweak("showMarkets", v)} />
      <TweakToggle label="Education" value={t.showEducation} onChange={(v) => setTweak("showEducation", v)} />
    </TweaksPanel>);

}

/* ──────────────────────────────────────────────────────────────────
   App
   ────────────────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  useEffect(() => {
    document.documentElement.dataset.palette = t.palette;
  }, [t.palette]);

  return (
    <>
      <Nav />
      <main>
        <Hero variant={t.heroVariant} />
        <Numbers />
        <TrustedBy />
        <Intro />
        <Toolkit />
        <section id="capabilities" data-screen-label="05 Capabilities">
          {CAPABILITIES.map((cap, i) => <CapabilityBlock key={cap.id} cap={cap} idx={i} />)}
        </section>
        <Ledger />
        <RoasChart />
        {t.showIndustries && <Industries />}
        {t.showMarkets && <Markets />}
        {t.showEducation && <Education />}
      </main>
      <Contact />
      <PortfolioTweaks t={t} setTweak={setTweak} />
    </>);

}

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