// Direction C — Split Hero, full prototype
// Huge first name LEFT · scroll-driven morph photo · huge last name RIGHT.
// As you scroll, the centered hero photo glides into the right column of the
// Skills section and becomes a sticky case card that swaps content per skill.
// Floating dark pill nav fixed to viewport bottom with an orange CTA.

function SiteSplit({ tweaks }) {
  const [lang, setLang] = React.useState('en');
  const c = window.COPY[lang];
  const palette = tweaks?.splitPalette ?? 'orange';

  const palettes = {
    orange: { bg: '#F4F2EE', fg: '#0E0E10', muted: '#6B6660', line: 'rgba(0,0,0,.10)', accent: '#FF6A1F', navBg: '#0E0E10', navFg: '#F4F2EE', hex: 'rgba(14,14,16,0.05)' },
    cobalt: { bg: '#F1F2F4', fg: '#0A0F1F', muted: '#5E6473', line: 'rgba(10,15,31,.10)', accent: '#2D5BFF', navBg: '#0A0F1F', navFg: '#F1F2F4', hex: 'rgba(10,15,31,0.05)' },
    forest: { bg: '#F3F2EC', fg: '#0F1410', muted: '#5E635A', line: 'rgba(15,20,16,.10)', accent: '#3E6B45', navBg: '#0F1410', navFg: '#F3F2EC', hex: 'rgba(15,20,16,0.05)' },
    ember:  { bg: '#F3EFE8', fg: '#16100C', muted: '#6B5F54', line: 'rgba(22,16,12,.10)', accent: '#C44A1B', navBg: '#16100C', navFg: '#F3EFE8', hex: 'rgba(22,16,12,0.05)' },
  };
  const p = palettes[palette];

  const skills = c.split.skills;
  const [active, setActive] = React.useState(0);
  const mobileLayout = useNarrow(900);

  // Live Istanbul time.
  const [now, setNow] = React.useState(() => formatIstanbulTime());
  React.useEffect(() => {
    const id = setInterval(() => setNow(formatIstanbulTime()), 30 * 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div data-screen-label="C · Split Hero (live)" style={{
      background: p.bg, color: p.fg,
      fontFamily: '"Inter Tight", system-ui, sans-serif',
      position: 'relative', overflowX: 'clip',
    }}>
      <HexBackdrop p={p} />
      <SplitHero c={c} p={p} now={now} lang={lang} setLang={setLang} />
      <SkillsSticky p={p} lang={lang} onActiveChange={setActive} />
      {!mobileLayout && (
        <MorphPhoto key={lang} p={p} active={skills[active]} morph={c.split.morph} />
      )}
      <SplitAbout key={lang} c={c} p={p} />
      <div id="apps">
        <SplitShowcase c={c} p={p} />
        <SplitShowcaseOdtu c={c} p={p} />
        <SplitShowcaseCico c={c} p={p} />
        <SplitShowcaseLLLock c={c} p={p} />
      </div>
      <SplitWork c={c} p={p} />
      <SplitReviews c={c} p={p} />
      <SplitAwards c={c} p={p} />
      <SplitStatement c={c} p={p} />
      <SplitContact c={c} p={p} />
      <SplitFooter c={c} p={p} />
      <FloatingPillNav c={c} p={p} lang={lang} />
    </div>
  );
}

function formatIstanbulTime() {
  try {
    const d = new Date();
    const fmt = new Intl.DateTimeFormat('en-GB', {
      timeZone: 'Europe/Istanbul', hour: '2-digit', minute: '2-digit', hour12: false,
    });
    return fmt.format(d);
  } catch { return '21:34'; }
}

function useNarrow(bp = 900) {
  const query = `(max-width: ${bp}px)`;
  const [narrow, setNarrow] = React.useState(
    () => typeof window !== 'undefined' && window.matchMedia(query).matches,
  );
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const update = () => setNarrow(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, [query]);
  return narrow;
}

// ── Hex backdrop ──────────────────────────────────────────────────────────
function HexBackdrop({ p }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: '180vh',
      pointerEvents: 'none',
      backgroundColor: p.bg,
      backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(hexSvg(p.fg))}")`,
      backgroundSize: '220px 190px',
      backgroundRepeat: 'repeat',
      maskImage: 'radial-gradient(ellipse at 50% 25%, #000 25%, transparent 70%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 50% 25%, #000 25%, transparent 70%)',
    }} />
  );
}
function hexSvg(fg) {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="220" height="190" viewBox="0 0 220 190">
    <g fill="none" stroke="${fg}" stroke-opacity="0.06" stroke-width="1.2">
      <polygon points="55,5 165,5 220,95 165,185 55,185 0,95" />
      <polygon points="0,95 55,5 165,5 220,95 165,185 55,185" transform="translate(110,-95)" />
      <polygon points="0,95 55,5 165,5 220,95 165,185 55,185" transform="translate(110,95)" />
    </g>
  </svg>`;
}

// ── Hero ──────────────────────────────────────────────────────────────────
function SplitHero({ c, p, now, lang, setLang }) {
  const h = c.split.hero;
  const mobile = useNarrow(900);
  const meta = {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: mobile ? 11 : 13,
    letterSpacing: '0.04em',
    color: p.muted,
  };
  const name = {
    margin: 0,
    fontFamily: '"Archivo", sans-serif',
    fontWeight: 700,
    fontSize: mobile ? 'clamp(42px, 13vw, 68px)' : 'clamp(52px, 8vw, 148px)',
    lineHeight: 0.9,
    letterSpacing: '-0.045em',
    textTransform: 'uppercase',
  };

  return (
    <section id="split-hero" style={{
      minHeight: mobile ? '100svh' : '100vh',
      position: 'relative',
      zIndex: 1,
      display: mobile ? 'flex' : 'grid',
      flexDirection: mobile ? 'column' : undefined,
      gridTemplateColumns: mobile ? undefined : '1fr min(340px, 24vw) 1fr',
      alignItems: mobile ? 'stretch' : 'center',
      gap: mobile ? 0 : 64,
      padding: mobile ? '72px 20px 112px' : '10px 56px 100px',
      boxSizing: 'border-box',
    }}>
      <div style={{
        position: 'absolute',
        top: mobile ? 16 : 36,
        left: mobile ? 20 : 56,
        right: mobile ? 20 : 56,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 12,
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: mobile ? 10 : 11,
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        color: p.muted,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <span style={{
            display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
            background: '#28C76F', boxShadow: '0 0 0 4px rgba(40,199,111,.18)', flexShrink: 0,
          }} />
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{h.status}</span>
        </div>
        <LangToggle lang={lang} setLang={setLang} />
      </div>

      {mobile ? (
        <>
          <div style={{ textAlign: 'center', marginTop: 4, paddingTop: 8 }}>
            <div style={{ ...meta, marginBottom: 14 }}>{h.role}</div>
            <div style={{
              display: 'flex', alignItems: 'baseline', justifyContent: 'center',
              gap: '0.2em', flexWrap: 'wrap',
            }}>
              <h1 style={name}>AKIF</h1>
              <h1 style={name}>ELEM</h1>
            </div>
          </div>

          <div
            id="hero-photo-anchor"
            style={{
              width: 'min(72vw, 300px)',
              margin: '24px auto 0',
              aspectRatio: '4 / 5',
              minHeight: 280,
              flexShrink: 0,
              position: 'relative',
              zIndex: 2,
              borderRadius: 28,
              overflow: 'hidden',
              background: '#dcd6c5',
              boxShadow: '0 60px 90px -30px rgba(0,0,0,0.32), 0 18px 32px -10px rgba(0,0,0,0.18)',
            }}
          >
            <img
              src="images/profile/profileFoto2.webp"
              alt="Mehmet Akif Elem"
              style={{
                display: 'block',
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                objectPosition: 'center top',
              }}
            />
          </div>

          <div style={{ textAlign: 'center', marginTop: 20 }}>
            <div style={{ ...meta, marginBottom: 10 }}>{h.edu}</div>
            <div style={{ ...meta, fontSize: 11, letterSpacing: '0.03em' }}>
              {h.location} · {now} {h.timezone}
            </div>
          </div>
        </>
      ) : (
        <>
          <div style={{ textAlign: 'right', paddingRight: 8 }}>
            <div style={{ ...meta, marginBottom: 18 }}>{h.role}</div>
            <h1 style={name}>AKIF</h1>
          </div>

          <div id="hero-photo-anchor" aria-hidden="true" style={{
            width: '100%', aspectRatio: '4 / 5', minHeight: 320,
          }} />

          <div style={{ textAlign: 'left', paddingLeft: 8 }}>
            <div style={{ ...meta, marginBottom: 18 }}>{h.edu}</div>
            <h1 style={name}>ELEM</h1>
            <div style={{ marginTop: 28, ...meta, letterSpacing: '0.03em' }}>
              {h.location} · {now} {h.timezone}
            </div>
          </div>
        </>
      )}

      <div style={{
        position: mobile ? 'relative' : 'absolute',
        top: mobile ? undefined : 'calc(100svh - 200px)',
        left: mobile ? undefined : '50%',
        transform: mobile ? undefined : 'translateX(-50%)',
        marginTop: mobile ? 'auto' : undefined,
        paddingTop: mobile ? 28 : undefined,
        alignSelf: mobile ? 'center' : undefined,
        zIndex: 2,
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: 11,
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
        color: p.muted,
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        pointerEvents: 'none',
      }}>
        <span>{h.scroll}</span>
        <span style={{
          display: 'inline-block', width: 1, height: 28,
          background: p.fg, opacity: 0.4,
          animation: 'splitScrollLine 1.6s ease-in-out infinite',
        }} />
      </div>
      <style>{`@keyframes splitScrollLine { 0%,100%{transform:scaleY(.4);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }`}</style>
    </section>
  );
}

// ── MorphPhoto ────────────────────────────────────────────────────────────
// Fixed-position image card that follows three anchor elements in turn:
//   #hero-photo-anchor    (center of hero, upright)
//   #skills-photo-anchor  (right column of skills, sticky, tilted -3°)
//   #about-photo-anchor   (right column of about, upright again)
// We read every anchor's bounding rect each scroll frame and lerp between
// the two that currently straddle the viewport "lock line" (top 30%). The
// active-skill caption fades in while docked in skills and out elsewhere.
function MorphPhoto({ p, active, morph }) {
  const ref = React.useRef(null);
  const innerRef = React.useRef(null);
  const [phase, setPhase] = React.useState(0); // 0 hero, 1 skills, 2 about

  React.useEffect(() => {
    let raf = 0;
    const lerp = (a, b, t) => a + (b - a) * t;
    const clamp01 = (x) => Math.max(0, Math.min(1, x));

    function update() {
      raf = 0;
      const el = ref.current;
      const inner = innerRef.current;
      if (!el || !inner) return;
      const heroAnchor   = document.getElementById('hero-photo-anchor');
      const skillsAnchor = document.getElementById('skills-photo-anchor');
      const aboutAnchor  = document.getElementById('about-photo-anchor');
      if (!heroAnchor || !skillsAnchor || !aboutAnchor) return;

      const vh = window.innerHeight;
      const lockY = 24;

      const hr = heroAnchor.getBoundingClientRect();
      const sr = skillsAnchor.getBoundingClientRect();
      const ar = aboutAnchor.getBoundingClientRect();

      const skillsDockVisible = sr.width > 8 && sr.height > 8;
      const aboutDockVisible = ar.width > 8 && ar.height > 8;

      const stage1 = skillsDockVisible
        ? clamp01(1 - (sr.top - lockY) / (vh - lockY))
        : 0;
      const stage2 = aboutDockVisible
        ? clamp01(1 - (ar.top - lockY) / (vh - lockY))
        : 0;

      const poses = [
        { x: hr.left, y: hr.top, w: hr.width, h: hr.height, rot: 0  },
        { x: sr.left, y: lockY,  w: sr.width, h: sr.height, rot: 0 },
        { x: ar.left, y: ar.top, w: ar.width, h: ar.height, rot: 0  },
      ];

      let from, to, t;
      let flipY = 0;

      if (!skillsDockVisible) {
        // Mobile: side anchors hidden — lock to hero until about column is measurable
        from = poses[0];
        to = aboutDockVisible ? poses[2] : poses[0];
        t = aboutDockVisible ? stage2 : 0;
        if (t > 0.08) {
          const flipT = clamp01((t - 0.08) / 0.5);
          flipY = flipT * 180;
        }
      } else if (stage2 <= 0) {
        from = poses[0]; to = poses[1]; t = stage1;
        const flipT = clamp01((stage1 - 0.08) / 0.5);
        flipY = flipT * 180;
      } else {
        from = poses[1]; to = poses[2]; t = stage2;
        flipY = 180;
      }

      const x   = lerp(from.x,   to.x,   t);
      const y   = lerp(from.y,   to.y,   t);
      const w   = lerp(from.w,   to.w,   t);
      const h   = lerp(from.h,   to.h,   t);
      const rot = lerp(from.rot, to.rot, t);

      let opacity = 1;
      if (aboutDockVisible && ar.bottom < vh * 0.25) {
        opacity = clamp01(ar.bottom / (vh * 0.25));
      }

      el.style.width = `${w}px`;
      el.style.height = `${h}px`;
      el.style.transform = `translate3d(${x}px, ${y}px, 0) rotate(${rot}deg)`;
      el.style.opacity = opacity;

      // Apply 3D flip to inner card
      inner.style.transform = `rotateY(${flipY}deg)`;

      // Determine phase
      let nextPhase = 0;
      if (stage2 > 0.5 && aboutDockVisible) nextPhase = 2;
      else if (stage1 > 0.5 && skillsDockVisible) nextPhase = 1;
      setPhase((prev) => prev === nextPhase ? prev : nextPhase);
    }

    function onScroll() {
      if (raf) return;
      raf = requestAnimationFrame(update);
    }
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', update);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div ref={ref} style={{
      position: 'fixed', top: 0, left: 0, zIndex: 20,
      willChange: 'transform, width, height, opacity',
      pointerEvents: 'none',
    }}>
      {/* perspective wrapper — must be a separate layer from the positioned outer */}
      <div style={{ width: '100%', height: '100%', perspective: 1200 }}>
        <div ref={innerRef} style={{
          width: '100%', height: '100%',
          borderRadius: 28,
          boxShadow: '0 60px 90px -30px rgba(0,0,0,0.32), 0 18px 32px -10px rgba(0,0,0,0.18)',
          transition: 'box-shadow .4s',
          transformStyle: 'preserve-3d',
          position: 'relative',
        }}>
        {/* FRONT FACE — profile photo */}
        <div style={{
          position: 'absolute', inset: 0,
          backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
          background: '#dcd6c5',
          borderRadius: 28, overflow: 'hidden',
        }}>
          <img src="images/profile/profileFoto2.webp" alt="Mehmet Akif Elem" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center top',
          }} />
          {/* skills caption */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            padding: '20px 22px',
            background: 'linear-gradient(180deg, transparent, rgba(0,0,0,.65))',
            color: '#fff',
            opacity: phase === 1 ? 1 : 0,
            transition: 'opacity .35s',
          }}>
            <div style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 6 }}>
              {morph.featuredCase}
            </div>
            <div style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: 22, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
              {active?.caseTag || ''}
            </div>
            <div style={{ marginTop: 6, fontSize: 13, opacity: 0.85, lineHeight: 1.35 }}>
              {active?.caseSub || ''}
            </div>
          </div>
          {/* about caption */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            padding: '24px 22px',
            background: 'linear-gradient(180deg, transparent, rgba(0,0,0,.55))',
            color: '#fff',
            opacity: phase === 2 ? 1 : 0,
            transition: 'opacity .35s',
          }}>
            <div style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 6 }}>
              {morph.name}
            </div>
            <div style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: 20, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
              {morph.location}
            </div>
          </div>
        </div>

        {/* BACK FACE — black card with name */}
        <div style={{
          position: 'absolute', inset: 0,
          backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)',
          background: '#000',
          borderRadius: 28, overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          textAlign: 'center', padding: 40,
        }}>
          <div style={{
            fontFamily: '"Archivo", sans-serif', fontWeight: 900,
            fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.03em',
            lineHeight: 1.1, color: '#fff',
          }}>
            MEHMET AKIF ELEM
          </div>
          <div style={{
            marginTop: 20,
            fontFamily: '"JetBrains Mono", ui-monospace, monospace',
            fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.6)',
          }}>
            {morph.backRole}
          </div>
        </div>
      </div>
      </div>
    </div>
  );
}

// ── Floating pill nav (fixed to viewport bottom) ──────────────────────────
function FloatingPillNav({ c, p, lang }) {
  const n = c.split.nav;
  const mobile = useNarrow(900);
  const items = [
    { id: 'skills', label: n.skills },
    { id: 'about', label: n.about },
    { id: 'reviews', label: n.reviews },
  ];
  const ctaLabel = mobile ? c.nav.contact : c.cta;
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: mobile ? 12 : 22, zIndex: 50,
      display: 'flex', justifyContent: 'center', pointerEvents: 'none',
      padding: mobile ? '0 12px' : 0,
      boxSizing: 'border-box',
    }}>
      <div style={{
        pointerEvents: 'auto',
        display: 'flex', alignItems: 'center',
        gap: mobile ? 2 : 8,
        background: p.navBg, color: p.navFg,
        padding: mobile ? '5px 5px 5px 6px' : 8,
        borderRadius: 999,
        width: mobile ? 'min(100%, calc(100vw - 24px))' : 'auto',
        maxWidth: mobile ? 'min(100%, calc(100vw - 24px))' : 'none',
        minWidth: 0,
        boxSizing: 'border-box',
        boxShadow: '0 24px 60px -12px rgba(0,0,0,0.35), 0 6px 16px -4px rgba(0,0,0,0.18)',
        fontFamily: '"Inter Tight", system-ui, sans-serif',
      }}>
        <button aria-label={n.homeAria} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{
          width: mobile ? 36 : 44, height: mobile ? 36 : 44,
          borderRadius: '50%', border: `1px solid rgba(255,255,255,.16)`,
          background: 'transparent', color: p.navFg, cursor: 'pointer',
          display: 'grid', placeItems: 'center', flexShrink: 0,
        }}>
          <svg width={mobile ? 16 : 18} height={mobile ? 16 : 18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 10.5 12 3l9 7.5" />
            <path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5" />
          </svg>
        </button>
        {items.map((it) => (
          <a key={it.id} href={`#${it.id}`} style={{
            color: 'inherit', textDecoration: 'none',
            padding: mobile ? '8px 4px' : '12px 16px',
            fontSize: mobile ? 11 : 15, fontWeight: 500, letterSpacing: '-0.01em',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            gap: 6, flex: mobile ? '1 1 0' : undefined,
            minWidth: mobile ? 0 : undefined,
            borderRadius: 999, transition: 'background .2s',
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,.08)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
          >
            {it.label}
          </a>
        ))}
        <Magnetic strength={mobile ? 0 : 6}>
          <a href="#contact" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            padding: mobile ? '8px 12px' : '12px 22px', borderRadius: 999,
            background: p.accent, color: '#fff', textDecoration: 'none',
            fontSize: mobile ? 11 : 15, fontWeight: 600, letterSpacing: '-0.01em',
            flexShrink: 0, whiteSpace: 'nowrap',
          }}>
            {ctaLabel}
          </a>
        </Magnetic>
      </div>
    </div>
  );
}

// ── About — handwritten eyebrow, accented headline, CTAs, socials ─────────
function SplitAbout({ c, p }) {
  const a = c.split.about;
  const [copied, setCopied] = React.useState(false);
  const email = "akifelem@gmail.com";
  function copyEmail() {
    navigator.clipboard?.writeText(email);
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  }
  return (
    <section id="about" style={{ position: 'relative', zIndex: 1, padding: '120px 56px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div style={{
            fontFamily: '"Caveat", "Patrick Hand", cursive',
            fontSize: 26, color: p.muted, marginBottom: 14,
          }}>
            {a.eyebrow}
          </div>
          <h2 style={{
            margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900,
            fontSize: 'clamp(44px, 5.8vw, 84px)', letterSpacing: '-0.04em',
            lineHeight: 0.98,
          }}>
            {a.headlineBefore}<span style={{ color: p.accent }}>{a.headlineAccent}</span>{a.headlineAfter}
          </h2>
          <p style={{
            margin: '32px 0 0', fontSize: 20, lineHeight: 1.45,
            color: p.fg, fontWeight: 500, letterSpacing: '-0.005em',
          }}>
            {a.tagline}
          </p>
          <div style={{ marginTop: 28, fontSize: 17, lineHeight: 1.65, color: p.muted, maxWidth: 620 }}>
            {a.body.map((para, i) => (
              <p key={i} style={{ margin: i === 0 ? 0 : '18px 0 0', color: i === a.body.length - 1 ? p.fg : p.muted, fontWeight: i === a.body.length - 1 ? 500 : 400 }}>
                {para}
              </p>
            ))}
          </div>

          <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Magnetic strength={8}>
              <a href="#contact" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 24px', borderRadius: 999,
                background: p.accent, color: '#fff', textDecoration: 'none',
                fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" />
                  <path d="M16 2v4M8 2v4M3 10h18" />
                </svg>
                {a.getInTouch}
              </a>
            </Magnetic>
            <button onClick={copyEmail} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 24px', borderRadius: 999, cursor: 'pointer',
              background: 'transparent', color: p.fg,
              border: `1.5px solid ${p.fg}`,
              fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              transition: 'background .2s, color .2s',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = p.fg; e.currentTarget.style.color = p.bg; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = p.fg; }}
            >
              {copied ? a.copied : a.copyEmail}
            </button>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 24px', borderRadius: 999,
              background: 'transparent', color: p.fg, textDecoration: 'none',
              border: `1.5px solid ${p.fg}`,
              fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              transition: 'background .2s, color .2s',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = p.fg; e.currentTarget.style.color = p.bg; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = p.fg; }}
            >
              {a.downloadCv}
            </a>
          </div>

          <div style={{ marginTop: 48 }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {[0,1,2,3,4].map((i) => <span key={i} style={{ color: p.accent, fontSize: 18 }}>★</span>)}
            </div>
            <div style={{ marginTop: 8, fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em' }}>
              {a.highlight}
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
            {[
              { l: 'GitHub', href: 'https://github.com/AidenLM', svg: (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.35.95.1-.74.4-1.24.73-1.53-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.16 1.17.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.48 3.16-1.17 3.16-1.17.62 1.57.23 2.73.11 3.02.73.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.36-5.25 5.65.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.38 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>
              )},
              { l: 'LinkedIn', href: 'https://linkedin.com/in/makifelem/', svg: (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.34 18.34V10.13H5.67v8.21zM7 9a1.55 1.55 0 1 0 0-3.1A1.55 1.55 0 0 0 7 9zm11.34 9.34V14c0-2.2-1.18-3.22-2.74-3.22a2.37 2.37 0 0 0-2.15 1.18v-1H10.7c.04.86 0 8.21 0 8.21h2.74v-4.59c0-.25.02-.49.09-.67.2-.49.65-1 1.4-1 .99 0 1.38.75 1.38 1.85v4.41z"/></svg>
              )},
              { l: 'Email', href: 'mailto:akifelem@gmail.com', svg: (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
              )},
              { l: 'X', href: '#', svg: (
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
              )},
            ].map((s) => (
              <a key={s.l} href={s.href} aria-label={s.l} target="_blank" rel="noopener" style={{
                width: 44, height: 44, borderRadius: '50%',
                border: `1.5px solid ${p.line}`,
                display: 'grid', placeItems: 'center',
                color: p.fg, background: 'transparent', textDecoration: 'none',
                transition: 'background .2s, color .2s, border-color .2s',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.background = p.fg; e.currentTarget.style.color = p.bg; e.currentTarget.style.borderColor = p.fg; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = p.fg; e.currentTarget.style.borderColor = p.line; }}
              >
                {s.svg}
              </a>
            ))}
          </div>
        </div>

        {/* RIGHT: about photo anchor — morph photo lands here, upright. */}
        <div aria-hidden="true" style={{ minHeight: 600 }}>
          <div id="about-photo-anchor" style={{
            width: 'min(420px, 32vw)', aspectRatio: '4 / 5',
            marginLeft: 'auto',
          }} />
        </div>
      </div>
    </section>
  );
}

function SplitSectionHeader({ p, eyebrow, title, sub }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'end', gap: 56 }}>
      <div>
        <div style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.accent, marginBottom: 14 }}>
          {eyebrow}
        </div>
        <h2 style={{ margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: 'clamp(44px, 5.5vw, 84px)', letterSpacing: '-0.04em', lineHeight: 0.96, textTransform: 'uppercase' }}>
          {title}
        </h2>
      </div>
      {sub && <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: p.muted, maxWidth: 520, justifySelf: 'end', textAlign: 'right' }}>{sub}</p>}
    </div>
  );
}

// ── Portfolio ─────────────────────────────────────────────────────────────
function SplitPortfolio({ c, p }) {
  return (
    <section id="portfolio" style={{ position: 'relative', zIndex: 1, padding: '80px 56px' }}>
      <SplitSectionHeader p={p} eyebrow={c.split.sections.portfolioEyebrow} title={c.workTitle} sub={c.workSub} />
      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, gridAutoRows: 'minmax(260px, auto)' }}>
        {c.projects.map((pr, i) => (
          <SplitProjectCard key={i} pr={pr} p={p} feature={i === 0} accent={i === 0 || i === 3} />
        ))}
      </div>
    </section>
  );
}

function SplitProjectCard({ pr, p, feature, accent }) {
  const [h, setH] = React.useState(false);
  const hasImg = !!pr.img;
  return (
    <a href="#" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        gridColumn: feature ? 'span 1' : 'auto',
        gridRow: feature ? 'span 2' : 'auto',
        position: 'relative', overflow: 'hidden',
        borderRadius: 24,
        background: '#000',
        color: '#fff',
        border: 'none',
        padding: 0,
        textDecoration: 'none',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        minHeight: feature ? 540 : 320,
        transform: h ? 'translateY(-4px) scale(1.01)' : 'translateY(0) scale(1)',
        boxShadow: h ? '0 30px 50px -20px rgba(0,0,0,0.35)' : '0 6px 14px -10px rgba(0,0,0,0.15)',
        transition: 'transform .35s, box-shadow .35s',
      }}>
      {/* Background image */}
      {hasImg && (
        <img src={pr.img} alt={pr.t} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center top',
          transition: 'transform .5s',
          transform: h ? 'scale(1.05)' : 'scale(1)',
        }} />
      )}

      {/* Dark gradient overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: h
          ? 'linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%)'
          : 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%)',
        transition: 'background .35s',
      }} />

      {/* Top bar: tag + year */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '18px 22px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 2,
      }}>
        <span style={{
          fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
          background: 'rgba(255,255,255,.15)', backdropFilter: 'blur(8px)',
          padding: '5px 12px', borderRadius: 999,
        }}>{pr.tag}</span>
        <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, opacity: 0.8 }}>{pr.year}</span>
      </div>

      {/* Bottom content */}
      <div style={{ position: 'relative', zIndex: 2, padding: '24px 22px' }}>
        <h3 style={{
          margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900,
          fontSize: feature ? 38 : 24, letterSpacing: '-0.03em', lineHeight: 1.02, textTransform: 'uppercase',
        }}>
          {pr.t}
        </h3>
        <p style={{ margin: '8px 0 14px', fontSize: feature ? 15 : 13, lineHeight: 1.5, opacity: 0.85, maxWidth: 480 }}>
          {pr.d}
        </p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {pr.k.slice(0, 3).map((k) => (
              <span key={k} style={{
                fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 10, fontWeight: 600,
                padding: '3px 8px', borderRadius: 999,
                border: '1px solid rgba(255,255,255,.35)',
                background: 'rgba(255,255,255,.08)',
              }}>{k}</span>
            ))}
          </div>
          <span style={{ fontSize: 18, transform: h ? 'translateX(4px)' : 'translateX(0)', transition: 'transform .25s' }}>→</span>
        </div>
      </div>
    </a>
  );
}

// ── Work Experience ───────────────────────────────────────────────────────
function SplitWork({ c, p }) {
  const w = c.split.work;
  const { eyebrow, title, titleAccent, sub, cv, jobs } = w;

  return (
    <section id="experience" style={{ position: 'relative', zIndex: 1, padding: '80px 56px 40px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 900 }}>
          <div style={{
            fontFamily: '"Caveat", "Patrick Hand", cursive',
            fontSize: 24, color: p.muted, marginBottom: 12,
          }}>{eyebrow}</div>
          <h2 style={{
            margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900,
            fontSize: 'clamp(48px, 6.4vw, 96px)', letterSpacing: '-0.04em',
            lineHeight: 0.98,
          }}>
            {title.slice(0, title.length - titleAccent.length)}
            <span style={{ color: p.accent }}>{titleAccent}</span>
          </h2>
          <p style={{ margin: '18px 0 0', fontSize: 17, color: p.muted, lineHeight: 1.5 }}>{sub}</p>
        </div>

        <a href="#" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '12px 22px', borderRadius: 999,
          background: p.line, color: p.fg,
          textDecoration: 'none',
          fontFamily: '"Archivo", sans-serif', fontWeight: 700, fontSize: 15,
          letterSpacing: '-0.01em', marginTop: 14,
          transition: 'background .2s, color .2s',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = p.fg; e.currentTarget.style.color = p.bg; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = p.line; e.currentTarget.style.color = p.fg; }}
        >
          {cv} ↓
        </a>
      </div>

      <div style={{ marginTop: 80 }}>
        {jobs.map((j, i) => (
          <WorkRow key={i} j={j} p={p} last={i === jobs.length - 1} />
        ))}
      </div>
    </section>
  );
}

function WorkRow({ j, p, last }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'grid', gridTemplateColumns: '1fr auto',
        alignItems: 'baseline', gap: 24,
        padding: '32px 4px 28px',
        borderBottom: last ? 'none' : `1px solid ${p.line}`,
        position: 'relative',
        cursor: 'default',
      }}>
      {/* sliding accent bar on hover */}
      <div style={{
        position: 'absolute', left: 0, bottom: -1, height: 2,
        background: p.accent,
        width: h ? '100%' : 0,
        transition: 'width .45s cubic-bezier(.2,.7,.3,1)',
      }} />
      <div>
        <h3 style={{
          margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 800,
          fontSize: 'clamp(28px, 3vw, 42px)', letterSpacing: '-0.025em', lineHeight: 1.04,
          transform: h ? 'translateX(8px)' : 'translateX(0)',
          transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
        }}>
          {j.role}
        </h3>
        <div style={{
          marginTop: 12, fontSize: 17, color: p.muted,
          transform: h ? 'translateX(8px)' : 'translateX(0)',
          transition: 'transform .4s cubic-bezier(.2,.7,.3,1)',
        }}>
          {j.org}
        </div>
      </div>
      <div style={{
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: 14, color: p.muted, letterSpacing: '0.03em',
        whiteSpace: 'nowrap',
      }}>
        {j.span}
      </div>
    </div>
  );
}

// ── Awards & Recognition ──────────────────────────────────────────────────
function SplitAwards({ c, p }) {
  const aw = c.split.awards;
  const { eyebrow, title, titleAccent, lead, sub, items: awards } = aw;

  return (
    <section style={{ position: 'relative', zIndex: 1, padding: '120px 56px' }}>
      <div style={{ maxWidth: 1200 }}>
        <div style={{
          fontFamily: '"Caveat", "Patrick Hand", cursive',
          fontSize: 24, color: p.muted, marginBottom: 12,
        }}>{eyebrow}</div>
        <h2 style={{
          margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900,
          fontSize: 'clamp(48px, 6.4vw, 96px)', letterSpacing: '-0.04em',
          lineHeight: 0.98,
        }}>
          <span style={{ color: p.accent }}>{titleAccent}</span>{title.slice(titleAccent.length)}
        </h2>
        <p style={{ margin: '24px 0 0', fontSize: 18, lineHeight: 1.55, color: p.muted, maxWidth: 760 }}>
          {lead}
        </p>
        <p style={{ margin: '14px 0 0', fontSize: 17, lineHeight: 1.55, color: p.muted, maxWidth: 760 }}>
          {sub}
        </p>
      </div>

      <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {awards.map((a, i) => <AwardRow key={i} a={a} p={p} />)}
      </div>
    </section>
  );
}

function AwardRow({ a, p }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.6fr',
        alignItems: 'center', gap: 24,
        padding: '26px 32px',
        border: `1.5px solid ${h ? p.fg : p.line}`,
        borderRadius: 10,
        background: h ? p.fg : 'transparent',
        color: h ? p.bg : p.fg,
        cursor: 'pointer',
        transition: 'background .25s, color .25s, border-color .25s, transform .25s',
        transform: h ? 'translateX(4px)' : 'translateX(0)',
      }}>
      <div style={{
        fontFamily: '"Archivo", sans-serif', fontWeight: 800,
        fontSize: 'clamp(22px, 2.2vw, 30px)', letterSpacing: '-0.02em', lineHeight: 1.1,
      }}>
        {a.title}
      </div>
      <div style={{ fontSize: 16, opacity: h ? 0.85 : 0.7 }}>{a.source}</div>
      <div style={{
        textAlign: 'right',
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: 13, opacity: h ? 0.85 : 0.6, letterSpacing: '0.03em',
      }}>
        {a.date}
      </div>
    </div>
  );
}

// ── Phone Frame — CSS-only iPhone shell ──────────────────────────────────
function PhoneFrame({ children, offsetY = 0 }) {
  const [h, setH] = React.useState(false);
  const mobile = useNarrow(900);
  return (
    <div
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        transform: `translateY(${offsetY}px) ${h ? 'scale(1.03)' : 'scale(1)'}`,
        transition: 'transform .4s cubic-bezier(.2,.7,.3,1)',
        flexShrink: 0,
      }}
    >
      <div style={{
        width: mobile ? 'min(260px, 78vw)' : 'min(220px, 15vw)',
        aspectRatio: '9 / 19.5',
        borderRadius: 36, padding: 6,
        background: '#1a1a1a',
        boxShadow: h
          ? '0 30px 60px -16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) inset'
          : '0 16px 40px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) inset',
        position: 'relative', overflow: 'hidden',
        transition: 'box-shadow .4s',
      }}>
        {/* Dynamic Island */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: '32%', height: 20, borderRadius: 999,
          background: '#000', zIndex: 3,
        }} />
        {/* Screen */}
        <div style={{
          width: '100%', height: '100%', borderRadius: 30,
          overflow: 'hidden', position: 'relative', background: '#111',
        }}>
          {children}
        </div>
        {/* Home indicator */}
        <div style={{
          position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
          width: '36%', height: 4, borderRadius: 999,
          background: 'rgba(250,204,21,0.6)', zIndex: 3,
        }} />
      </div>
    </div>
  );
}

// ── Fake App Screens inside phones ──────────────────────────────────────
function TCScreenHome({ t }) {
  return (
    <div style={{ width: '100%', height: '100%', background: '#111', padding: '44px 14px 14px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: '"Inter Tight", sans-serif' }}>
      <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{t.hello}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>{t.name}</span>
        <span style={{ marginLeft: 'auto', background: 'rgba(250,204,21,0.15)', color: '#facc15', fontSize: 8, padding: '3px 8px', borderRadius: 999, fontWeight: 700 }}>✦ PRO</span>
      </div>
      <div style={{ fontSize: 18, fontWeight: 900, color: '#fff', lineHeight: 1.1, marginTop: 4, textTransform: 'uppercase' }}>
        {t.headline1}<br/><span style={{ fontStyle: 'italic', color: '#facc15' }}>{t.headline2}</span>
      </div>
      {/* Hero card */}
      <div style={{ borderRadius: 14, overflow: 'hidden', position: 'relative', flex: '0 0 auto', marginTop: 4 }}>
        <img src="images/showcase/tattoocraft/arm_after.jpg" style={{ width: '100%', height: 90, objectFit: 'cover', display: 'block' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(17,17,17,0.9) 40%, transparent)' }} />
        <div style={{ position: 'absolute', top: 10, left: 10 }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: '#fff' }}>{t.cardTitle}</div>
          <div style={{ fontSize: 7, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>{t.cardSub}</div>
          <div style={{ marginTop: 6, background: '#facc15', color: '#000', fontSize: 7, fontWeight: 700, padding: '3px 8px', borderRadius: 999, display: 'inline-block' }}>{t.cardCta}</div>
        </div>
      </div>
      {/* Two small cards */}
      <div style={{ display: 'flex', gap: 8, flex: 1, minHeight: 0 }}>
        <div style={{ flex: 1, borderRadius: 12, overflow: 'hidden', position: 'relative' }}>
          <img src="images/showcase/tattoocraft/generated_tattoo_preview.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85))' }} />
          <div style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 8, fontWeight: 700, color: '#fff' }}>{t.card2}</div>
        </div>
        <div style={{ flex: 1, borderRadius: 12, overflow: 'hidden', position: 'relative' }}>
          <img src="images/showcase/tattoocraft/photo_to_tattoo_card.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85))' }} />
          <div style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 8, fontWeight: 700, color: '#fff' }}>{t.card3}</div>
        </div>
      </div>
      {/* Tab bar dots */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, paddingTop: 6 }}>
        {[1,0,0,0].map((a,i) => <div key={i} style={{ width: a ? 16 : 6, height: 6, borderRadius: 999, background: a ? '#facc15' : 'rgba(255,255,255,0.2)' }} />)}
      </div>
    </div>
  );
}

function TCScreenGenerate({ t }) {
  return (
    <div style={{ width: '100%', height: '100%', background: '#111', padding: '44px 14px 14px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 8, fontFamily: '"Inter Tight", sans-serif' }}>
      {/* Back + Inspo images */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ width: 24, height: 24, borderRadius: 999, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>‹</div>
      </div>
      {/* Inspo row */}
      <div style={{ display: 'flex', gap: 4, height: 48 }}>
        {['back_after','neck_after','arm_after'].map((n,i) => (
          <div key={i} style={{ flex: 1, borderRadius: 8, overflow: 'hidden' }}>
            <img src={`images/showcase/tattoocraft/${n}.jpg`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', opacity: 0.7 }} />
          </div>
        ))}
      </div>
      {/* Title */}
      <div style={{ marginTop: 4 }}>
        <span style={{ fontSize: 16, fontWeight: 900, color: '#fff', textTransform: 'uppercase', lineHeight: 1.1 }}>{t.title1}<br/>{t.title2} </span>
        <span style={{ fontSize: 16, fontStyle: 'italic', color: '#facc15', fontWeight: 400 }}>{t.title2Em}</span>
      </div>
      {/* Prompt box */}
      <div style={{ border: '1px solid rgba(250,204,21,0.3)', borderRadius: 12, padding: '10px 12px', marginTop: 4 }}>
        <div style={{ fontSize: 8, color: '#facc15', marginBottom: 4 }}>✦</div>
        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)' }}>{t.prompt}</div>
      </div>
      {/* Style pills */}
      <div style={{ display: 'flex', gap: 4, marginTop: 4, flexWrap: 'wrap' }}>
        {t.styles.map((s,i) => (
          <span key={s} style={{ fontSize: 8, padding: '4px 10px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.2)', color: i===0 ? '#000' : 'rgba(255,255,255,0.7)', background: i===0 ? '#fff' : 'transparent', fontWeight: 600 }}>{s}</span>
        ))}
      </div>
      {/* Generate button */}
      <div style={{ flex: 1 }} />
      <div style={{ background: '#facc15', borderRadius: 999, padding: '12px 0', textAlign: 'center', fontWeight: 800, fontSize: 12, color: '#000' }}>{t.cta}</div>
      {/* Tab bar dots */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, paddingTop: 6 }}>
        {[0,1,0,0].map((a,i) => <div key={i} style={{ width: a ? 16 : 6, height: 6, borderRadius: 999, background: a ? '#facc15' : 'rgba(255,255,255,0.2)' }} />)}
      </div>
    </div>
  );
}

function TCScreenPreview({ t }) {
  return (
    <div style={{ width: '100%', height: '100%', background: '#000', position: 'relative', fontFamily: '"Inter Tight", sans-serif' }}>
      {/* Full screen tattoo preview */}
      <img src="images/showcase/tattoocraft/back_after.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      {/* Top bar */}
      <div style={{ position: 'absolute', top: 36, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff' }}>‹</div>
        <div style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: '#fff' }}>⊞</div>
      </div>
      {/* Bottom actions */}
      <div style={{ position: 'absolute', bottom: 28, left: 14, right: 14, display: 'flex', gap: 8 }}>
        <div style={{ flex: 1, background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(8px)', borderRadius: 999, padding: '10px 0', textAlign: 'center', fontSize: 10, fontWeight: 700, color: '#fff' }}>{t.share}</div>
        <div style={{ flex: 1, background: '#facc15', borderRadius: 999, padding: '10px 0', textAlign: 'center', fontSize: 10, fontWeight: 800, color: '#000' }}>{t.save}</div>
      </div>
    </div>
  );
}

// ── LLLock mock screens ───────────────────────────────────────────────────
const LLL = {
  bg: '#0B0B0B',
  card: '#121212',
  border: 'rgba(255,255,255,0.10)',
  text: '#FFFFFF',
  muted: 'rgba(255,255,255,0.55)',
  soft: 'rgba(255,255,255,0.14)',
  green: '#2E9E46',
};

function LLLScreenDashboard({ t }) {
  const tile = (title, sub) => (
    <div style={{
      flex: 1, minWidth: '46%', borderRadius: 12, padding: '10px 10px 12px',
      background: LLL.card, border: `1px solid ${LLL.border}`, position: 'relative', minHeight: 72,
    }}>
      <div style={{
        position: 'absolute', top: 8, left: 8, width: 22, height: 22, borderRadius: 8,
        background: LLL.soft, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10, color: LLL.text,
      }}>◆</div>
      <div style={{ marginTop: 26 }}>
        <div style={{ fontSize: 9, fontWeight: 700, color: LLL.text, lineHeight: 1.2 }}>{title}</div>
        {sub ? <div style={{ fontSize: 7, color: LLL.muted, marginTop: 3 }}>{sub}</div> : null}
      </div>
    </div>
  );

  return (
    <div style={{
      width: '100%', height: '100%', background: LLL.bg, padding: '40px 12px 12px',
      boxSizing: 'border-box', fontFamily: '"Inter Tight", sans-serif',
    }}>
      <div style={{ fontSize: 18, fontWeight: 900, letterSpacing: '0.12em', color: LLL.text, marginBottom: 12 }}>LLLock</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 12,
        background: LLL.card, border: `1px solid ${LLL.border}`, marginBottom: 10,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: LLL.soft }} />
        <div style={{ flex: 1, fontSize: 10, fontWeight: 700, color: LLL.text }}>{t.blocking}</div>
        <div style={{
          width: 34, height: 18, borderRadius: 999, background: LLL.green, padding: 2, boxSizing: 'border-box',
        }}>
          <div style={{ width: 14, height: 14, borderRadius: '50%', background: '#fff', marginLeft: 'auto' }} />
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {tile(t.blockedApps, t.blockedAppsSub)}
        {tile(t.cards, t.cardsSub)}
        {tile(t.quizSettings, t.quizSettingsSub)}
        {tile(t.memoryQuiz, t.memoryQuizSub)}
      </div>
    </div>
  );
}

function LLLScreenBlocked({ t }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: LLL.bg, padding: '40px 12px 12px',
      boxSizing: 'border-box', fontFamily: '"Inter Tight", sans-serif',
    }}>
      <div style={{ fontSize: 11, fontWeight: 800, color: LLL.text, marginBottom: 10 }}>{t.title}</div>
      <div style={{
        padding: '8px 10px', borderRadius: 10, background: LLL.card, border: `1px solid ${LLL.border}`,
        fontSize: 8, color: LLL.muted, marginBottom: 10,
      }}>{t.search}</div>
      <div style={{ fontSize: 7, letterSpacing: '0.08em', color: LLL.muted, marginBottom: 6 }}>{t.section}</div>
      {t.apps.map((app, i) => (
        <div key={app} style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', marginBottom: 6,
          borderRadius: 8, background: LLL.card, border: `1px solid ${LLL.border}`,
        }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, background: LLL.soft }} />
          <div style={{ flex: 1, fontSize: 9, fontWeight: 600, color: LLL.text }}>{app}</div>
          <div style={{
            width: 16, height: 16, borderRadius: 4,
            background: i < 3 ? LLL.green : LLL.soft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 8, color: i < 3 ? '#fff' : 'transparent',
          }}>{i < 3 ? '✓' : ''}</div>
        </div>
      ))}
    </div>
  );
}

function LLLScreenQuiz({ t }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: LLL.bg, padding: '40px 12px 12px',
      boxSizing: 'border-box', fontFamily: '"Inter Tight", sans-serif',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ fontSize: 8, color: LLL.muted, marginBottom: 14 }}>{t.progress}</div>
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 22, fontWeight: 800, color: LLL.text, letterSpacing: '-0.02em',
      }}>{t.prompt}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 8 }}>
        {t.choices.map((c, i) => (
          <div key={c} style={{
            padding: '10px 12px', borderRadius: 10, textAlign: 'center', fontSize: 10, fontWeight: 600,
            background: i === 0 ? LLL.text : LLL.card,
            color: i === 0 ? LLL.bg : LLL.text,
            border: i === 0 ? 'none' : `1px solid ${LLL.border}`,
          }}>{c}</div>
        ))}
      </div>
    </div>
  );
}

// ── Product showcase (Tattoo Craft, ODTÜ, …) ─────────────────────────────
function ProductShowcase({ sc, p, appName, logoSrc, logoStyle, tryUrl, phones, first, refLabel }) {
  const mobile = useNarrow(900);
  const sectionPad = mobile
    ? (first ? '88px 20px 56px' : '56px 20px')
    : (first ? '120px 56px 80px' : '80px 56px');

  return (
    <section style={{
      position: 'relative', zIndex: 1,
      padding: sectionPad,
    }}>
      <div style={{
        fontFamily: '"Caveat", "Patrick Hand", cursive',
        fontSize: 24, color: p.muted, marginBottom: 16,
      }}>
        {sc.eyebrow}
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: mobile ? 40 : 64,
        alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24,
            flexWrap: mobile ? 'wrap' : 'nowrap',
          }}>
            <img src={logoSrc} alt={appName} style={{
              width: 56, height: 56, borderRadius: 14,
              background: '#000', padding: 4, objectFit: 'contain',
              ...logoStyle,
            }} />
            <div>
              <h3 style={{
                margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 900,
                fontSize: 28, letterSpacing: '-0.02em',
              }}>{appName}</h3>
              <span style={{
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: p.accent,
              }}>{sc.badge}</span>
              {sc.referenceLogo ? (
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10, marginTop: 12,
                }}>
                  <span style={{
                    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                    fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: p.muted, flexShrink: 0,
                  }}>{refLabel}</span>
                  <img
                    src={sc.referenceLogo}
                    alt={sc.referenceAlt || ''}
                    style={{
                      height: 22, maxWidth: 120, width: 'auto', objectFit: 'contain',
                      opacity: 0.92,
                      ...(sc.referenceLogoStyle || {}),
                    }}
                  />
                </div>
              ) : null}
            </div>
          </div>

          <h2 style={{
            margin: 0, fontFamily: '"Archivo", sans-serif', fontWeight: 800,
            fontSize: 'clamp(28px, 3.2vw, 44px)', letterSpacing: '-0.03em',
            lineHeight: 1.08,
          }}>
            {sc.headline}
          </h2>

          <p style={{
            margin: '20px 0 0', fontSize: 17, lineHeight: 1.65, color: p.muted, maxWidth: 520,
          }}>
            {sc.body}
          </p>

          <ul style={{
            margin: '28px 0 0', padding: 0, listStyle: 'none',
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
            gap: mobile ? '10px 0' : '10px 24px',
          }}>
            {sc.features.map((f) => (
              <li key={f} style={{
                fontSize: 15, color: p.fg, fontWeight: 500,
                paddingLeft: 20, position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', left: 0, top: '0.45em',
                  width: 8, height: 8, borderRadius: '50%', background: p.accent,
                }} />
                {f}
              </li>
            ))}
          </ul>

          <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Magnetic strength={8}>
              <a href="#contact" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '14px 24px', borderRadius: 999,
                background: p.accent, color: '#fff', textDecoration: 'none',
                fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              }}>
                {sc.cta}
              </a>
            </Magnetic>
            <Magnetic strength={8}>
              <a href={tryUrl} target="_blank" rel="noreferrer" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '14px 24px', borderRadius: 999,
                background: 'transparent', color: p.fg, textDecoration: 'none',
                border: `1.5px solid ${p.line}`,
                fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
              }}>
                {sc.try}
              </a>
            </Magnetic>
          </div>
        </div>

        <div style={{
          display: 'flex',
          flexDirection: mobile ? 'column' : 'row',
          alignItems: 'center',
          justifyContent: 'center',
          gap: mobile ? 20 : 14,
          position: 'relative',
          padding: mobile ? '8px 0 0' : '20px 0',
        }}>
          {phones.map((phone, i) => (
            <PhoneFrame key={i} offsetY={mobile ? 0 : phone.offsetY}>{phone.content}</PhoneFrame>
          ))}

          {sc.live ? (
            <div style={{
              position: 'absolute', top: 8, right: 0,
              background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(8px)',
              color: '#fff', padding: '8px 14px', borderRadius: 999,
              fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              fontSize: 11, letterSpacing: '0.06em',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80' }} />
              {sc.live}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}

function SplitShowcaseLLLock({ c, p }) {
  const sc = c.split.showcaseLLLock;
  const s = c.split.lllScreens;

  return (
    <ProductShowcase
      sc={sc}
      p={p}
      refLabel={c.split.referenceLabel}
      appName={sc.name}
      logoSrc="images/showcase/lllock/lllock-logo.png"
      logoStyle={{ background: '#0B0B0B', padding: 8 }}
      tryUrl="#contact"
      phones={[
        { offsetY: 28, content: <LLLScreenDashboard t={s.dashboard} /> },
        { offsetY: 0, content: <LLLScreenBlocked t={s.blocked} /> },
        { offsetY: 28, content: <LLLScreenQuiz t={s.quiz} /> },
      ]}
    />
  );
}

function SplitShowcase({ c, p }) {
  const sc = c.split.showcase;
  const tc = c.split.tcScreens;

  return (
    <ProductShowcase
      sc={sc}
      p={p}
      first
      refLabel={c.split.referenceLabel}
      appName="Tattoo Craft"
      logoSrc="images/showcase/tattoocraft/tattooCraftLogo.png"
      logoStyle={{ background: '#0E0E10', padding: 10 }}
      tryUrl="https://tattoocraft.vercel.app"
      phones={[
        { offsetY: 28, content: <TCScreenHome t={tc.home} /> },
        { offsetY: 0, content: <TCScreenGenerate t={tc.generate} /> },
        { offsetY: 28, content: <TCScreenPreview t={tc.preview} /> },
      ]}
    />
  );
}

function SplitShowcaseOdtu({ c, p }) {
  const sc = c.split.showcaseOdtu;
  const screenStyle = { width: '100%', height: '100%', objectFit: 'cover', display: 'block' };

  return (
    <ProductShowcase
      sc={sc}
      p={p}
      refLabel={c.split.referenceLabel}
      appName={sc.name}
      logoSrc={sc.logo}
      logoStyle={{ background: '#B71C1C', padding: 8 }}
      tryUrl={sc.tryUrl}
      phones={sc.screens.map((src, i) => ({
        offsetY: i === 1 ? 0 : 28,
        content: <img src={src} alt="" style={screenStyle} />,
      }))}
    />
  );
}

function SplitShowcaseCico({ c, p }) {
  const sc = c.split.showcaseCico;
  const screenStyle = {
    width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top',
    display: 'block',
  };

  return (
    <ProductShowcase
      sc={sc}
      p={p}
      refLabel={c.split.referenceLabel}
      appName={sc.name}
      logoSrc={sc.logo}
      logoStyle={{ background: '#fff', padding: 6 }}
      tryUrl={sc.tryUrl}
      phones={sc.screens.map((src, i) => ({
        offsetY: i === 1 ? 0 : 28,
        content: <img src={src} alt="" style={screenStyle} />,
      }))}
    />
  );
}

// ── Statement — scroll-driven word-by-word color reveal ───────────────────
function SplitStatement({ c, p }) {
  const ref = React.useRef(null);
  const { text1, text2 } = c.split.statement;

  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const words = root.querySelectorAll('[data-reveal-word]');
    let raf = 0;
    function update() {
      raf = 0;
      const vh = window.innerHeight;
      const enterY = vh * 0.82;
      const exitY  = vh * 0.32;
      const range = enterY - exitY;
      words.forEach((el) => {
        const r = el.getBoundingClientRect();
        const c = r.top + r.height / 2;
        let t;
        if (c >= enterY) t = 0;
        else if (c <= exitY) t = 1;
        else t = 1 - (c - exitY) / range;
        // 0.12 = pale gray placeholder, 1.0 = fully revealed.
        el.style.opacity = String(0.12 + 0.88 * t);
      });
    }
    function onScroll() { if (!raf) raf = requestAnimationFrame(update); }
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', update);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [text1, text2]);

  function renderWords(text) {
    return text.split(' ').map((w, i) => (
      <span key={i} data-reveal-word style={{
        display: 'inline-block', marginRight: '0.28em',
        opacity: 0.12, color: p.fg,
        willChange: 'opacity',
      }}>{w}</span>
    ));
  }

  return (
    <section ref={ref} style={{
      position: 'relative', zIndex: 1,
      padding: '160px 56px 180px',
    }}>
      <div style={{ maxWidth: 1320 }}>
        <p style={{
          margin: 0,
          fontFamily: '"Archivo", sans-serif', fontWeight: 800,
          fontSize: 'clamp(36px, 4.8vw, 76px)', letterSpacing: '-0.035em',
          lineHeight: 1.06,
        }}>
          {renderWords(text1)}
        </p>
        <p style={{
          margin: '36px 0 0',
          fontFamily: '"Archivo", sans-serif', fontWeight: 800,
          fontSize: 'clamp(30px, 3.8vw, 58px)', letterSpacing: '-0.035em',
          lineHeight: 1.08,
        }}>
          {renderWords(text2)}
        </p>
      </div>
    </section>
  );
}

// ── Reviews ───────────────────────────────────────────────────────────────
function SplitReviews({ c, p }) {
  return (
    <section id="reviews" style={{ position: 'relative', zIndex: 1, padding: '80px 56px' }}>
      <SplitSectionHeader p={p} eyebrow={c.split.sections.reviewsEyebrow} title={c.testimonialsTitle} sub={c.split.sections.reviewsSub} />
      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
        {c.testimonials.map((t, i) => (
          <figure key={i} style={{ margin: 0, padding: 28, borderRadius: 24, background: '#fff', border: `1px solid ${p.line}`, boxShadow: '0 8px 18px -10px rgba(0,0,0,0.08)' }}>
            <div style={{ display: 'flex', gap: 4, marginBottom: 18 }}>
              {[0,1,2,3,4].map((s) => <span key={s} style={{ color: p.accent, fontSize: 16 }}>★</span>)}
            </div>
            <blockquote style={{ margin: 0, fontSize: 18, lineHeight: 1.45, letterSpacing: '-0.005em' }}>
              "{t.q}"
            </blockquote>
            <figcaption style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14 }}>
              {t.logo ? (
                <div style={{ width: 42, height: 42, borderRadius: '50%', background: '#fff', border: `1px solid ${p.line}`, display: 'grid', placeItems: 'center', overflow: 'hidden', padding: 6 }}>
                  <img src={t.logo} alt={t.a} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                </div>
              ) : (
                <div style={{ width: 42, height: 42, borderRadius: '50%', background: p.accent, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 14 }}>
                  {t.a.split(' ').map(w => w[0]).join('').slice(0,2)}
                </div>
              )}
              <div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{t.a}</div>
                <div style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, color: p.muted, marginTop: 2 }}>{t.r}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// ── Contact ───────────────────────────────────────────────────────────────
function SplitContact({ c, p }) {
  const ct = c.split.contact;
  const [focus, setFocus] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', company: '', email: '', budget: '', message: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: '2a562d58-9e2c-4f8d-8dda-14f2693eb87b',
          subject: `${ct.subjectPrefix} ${form.name} — ${form.budget || ct.subjectNoTopic}`,
          from_name: form.name,
          name: form.name,
          email: form.email,
          company: form.company,
          topic: form.budget,
          message: form.message,
        }),
      });
      const data = await res.json();
      if (data.success) {
        setStatus('sent');
        setForm({ name: '', company: '', email: '', budget: '', message: '' });
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };

  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <section id="contact" style={{ position: 'relative', zIndex: 1, padding: '120px 56px 80px' }}>
      {/* Section header */}
      <SplitSectionHeader p={p} eyebrow={c.split.sections.contactEyebrow} title={c.contactTitle} sub={c.contactSub} />

      <div style={{
        marginTop: 56,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'start',
      }}>
        {/* LEFT: form */}
        <form onSubmit={handleSubmit}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 24px' }}>
            {[['name', c.form.name], ['company', c.form.company], ['email', c.form.email], ['budget', c.form.budget]].map(([k, l]) => (
              <label key={k} style={{ display: 'block' }}>
                <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.muted }}>{l}</span>
                {k === 'budget' ? (
                  <select value={form.budget} onChange={upd('budget')} onFocus={() => setFocus(k)} onBlur={() => setFocus(null)} style={splitInp(p, focus === k)}>
                    <option value="">—</option>
                    {c.budgets.map((b) => <option key={b} value={b}>{b}</option>)}
                  </select>
                ) : (
                  <input value={form[k]} onChange={upd(k)} onFocus={() => setFocus(k)} onBlur={() => setFocus(null)} style={splitInp(p, focus === k)} required={k !== 'company'} />
                )}
              </label>
            ))}
            <label style={{ display: 'block', gridColumn: 'span 2' }}>
              <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.muted }}>{c.form.message}</span>
              <textarea rows="4" value={form.message} onChange={upd('message')} onFocus={() => setFocus('m')} onBlur={() => setFocus(null)} style={{ ...splitInp(p, focus === 'm'), minHeight: 120, resize: 'vertical' }} required />
            </label>
          </div>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16 }}>
            <Magnetic strength={10}>
              <button type="submit" disabled={status === 'sending'} style={{
                padding: '16px 32px', borderRadius: 999, border: 'none', cursor: status === 'sending' ? 'wait' : 'pointer',
                background: status === 'sent' ? '#22c55e' : p.accent, color: '#fff',
                fontFamily: '"Inter Tight", sans-serif', fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em',
                opacity: status === 'sending' ? 0.7 : 1, transition: 'background .3s, opacity .3s',
              }}>
                {status === 'sending' ? ct.sending : status === 'sent' ? ct.sent : status === 'error' ? ct.tryAgain : `${c.form.send} →`}
              </button>
            </Magnetic>
            {status === 'sent' && <span style={{ fontSize: 14, color: '#22c55e', fontWeight: 500 }}>{ct.sentFollowUp}</span>}
            {status === 'error' && <span style={{ fontSize: 14, color: '#ef4444', fontWeight: 500 }}>{ct.error}</span>}
          </div>
        </form>

        {/* RIGHT: contact info card */}
        <div style={{
          background: '#fff',
          border: `1px solid ${p.line}`,
          borderRadius: 24, padding: '40px 36px',
          position: 'sticky', top: 120,
        }}>
          <div style={{
            fontFamily: '"Caveat", "Patrick Hand", cursive',
            fontSize: 22, color: p.muted, marginBottom: 24,
          }}>
            {ct.directContact}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <a href="mailto:akifelem@gmail.com" style={{
              display: 'flex', alignItems: 'center', gap: 14,
              color: p.fg, textDecoration: 'none', fontSize: 16, fontWeight: 500,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: p.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={p.fg} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>
                </svg>
              </div>
              akifelem@gmail.com
            </a>

            <a href="https://linkedin.com/in/makifelem/" target="_blank" style={{
              display: 'flex', alignItems: 'center', gap: 14,
              color: p.fg, textDecoration: 'none', fontSize: 16, fontWeight: 500,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: p.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill={p.fg}>
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
              </div>
              LinkedIn ↗
            </a>

            <a href="https://github.com/AidenLM" target="_blank" style={{
              display: 'flex', alignItems: 'center', gap: 14,
              color: p.fg, textDecoration: 'none', fontSize: 16, fontWeight: 500,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: p.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill={p.fg}>
                  <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
                </svg>
              </div>
              GitHub ↗
            </a>
          </div>

          <div style={{
            marginTop: 32, paddingTop: 24,
            borderTop: `1px solid ${p.line}`,
            fontFamily: '"JetBrains Mono", ui-monospace, monospace',
            fontSize: 12, color: p.muted, lineHeight: 1.6,
          }}>
            <div>📍 {ct.location}</div>
            <div style={{ marginTop: 4 }}>🕐 {ct.timezone}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function splitInp(p, focused) {
  return {
    display: 'block', width: '100%', boxSizing: 'border-box',
    marginTop: 10, padding: '12px 0',
    background: 'transparent', color: p.fg,
    border: 'none', borderBottom: `1px solid ${focused ? p.accent : p.line}`,
    fontFamily: 'inherit', fontSize: 16, outline: 'none',
    transition: 'border-color .25s', borderRadius: 0,
  };
}

function SplitFooter({ c, p }) {
  const f = c.split.footer;
  return (
    <footer style={{ position: 'relative', zIndex: 1, overflow: 'hidden', paddingTop: 80, paddingBottom: 120 }}>
      {/* outline name — clipped on both sides */}
      <div style={{
        whiteSpace: 'nowrap', overflow: 'hidden',
        textAlign: 'center', padding: '0',
      }}>
        <span style={{
          display: 'inline-block',
          fontFamily: '"Archivo", sans-serif', fontWeight: 900,
          fontSize: 'clamp(56px, 11vw, 168px)',
          letterSpacing: '-0.045em', lineHeight: 0.86, textTransform: 'uppercase',
          color: 'transparent',
          WebkitTextStroke: `1.5px ${p.muted}`,
          opacity: 0.55,
        }}>
          Mehmet Akif Elem
        </span>
      </div>

      {/* infinite marquee */}
      <SplitMarquee p={p} text={f.marquee} />

      {/* contact lines */}
      <div style={{ marginTop: 80, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, fontFamily: '"Archivo", sans-serif', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', color: p.fg }}>
        <a href="mailto:akifelem@gmail.com" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="5" width="18" height="14" rx="2"/>
            <path d="m3 7 9 6 9-6"/>
          </svg>
          akifelem@gmail.com
        </a>
        <a href="#contact" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="2"/>
            <path d="M16 2v4M8 2v4M3 10h18"/>
          </svg>
          {f.getInTouch}
        </a>
      </div>

      {/* bottom thin row */}
      <div style={{
        marginTop: 100, padding: '0 56px',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: '"Archivo", sans-serif', fontSize: 14, color: p.muted, fontWeight: 500,
      }}>
        <div>2026</div>
        <div>{f.rights}</div>
      </div>
    </footer>
  );
}

function SplitMarquee({ p, text }) {
  // One scrolling row split into two halves so the loop is seamless.
  const item = (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 64,
      paddingRight: 64,
      fontFamily: '"Archivo", sans-serif', fontWeight: 900,
      fontSize: 'clamp(56px, 8vw, 132px)', letterSpacing: '-0.035em', lineHeight: 1.1,
      whiteSpace: 'nowrap', color: p.fg,
    }}>
      <Asterisk p={p} />
      <span>{text}</span>
    </span>
  );
  return (
    <div style={{ marginTop: 24, overflow: 'hidden', position: 'relative' }}>
      <div style={{
        display: 'inline-flex', whiteSpace: 'nowrap',
        animation: 'splitMarqueeScroll 28s linear infinite',
      }}>
        {Array.from({ length: 6 }).map((_, i) => <React.Fragment key={i}>{item}</React.Fragment>)}
      </div>
      <style>{`@keyframes splitMarqueeScroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
    </div>
  );
}

function Asterisk({ p }) {
  return (
    <svg width="48" height="48" viewBox="0 0 64 64" aria-hidden="true" style={{ flexShrink: 0, transform: 'translateY(2px)' }}>
      <g stroke="currentColor" strokeWidth="6" strokeLinecap="round">
        <line x1="32" y1="6"  x2="32" y2="58" />
        <line x1="6"  y1="32" x2="58" y2="32" />
        <line x1="13" y1="13" x2="51" y2="51" />
        <line x1="51" y1="13" x2="13" y2="51" />
      </g>
    </svg>
  );
}

Object.assign(window, { SiteSplit });