/* Hero — large display type, asymmetric grid, animated rotating role */

const ROLES = [
  'AI Automation Engineer',
  'Full Stack Developer',
  'Mobile App Developer',
  'Cloud Infrastructure',
];

const RotatingRole = () => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % ROLES.length), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="relative inline-block align-middle" style={{ minWidth: 'min(620px, 90vw)' }}>
      <AnimatePresence mode="wait">
        <motion.span
          key={i}
          initial={{ y: '0.6em', opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: '-0.6em', opacity: 0 }}
          transition={{ duration: 0.55, ease: [0.2, 0.7, 0.2, 1] }}
          className="inline-block"
          style={{ color: 'var(--accent)' }}
        >
          {ROLES[i]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
};

const HeroPreview = () => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96, y: 20 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      transition={{ duration: 1.0, delay: 0.4, ease: [0.2, 0.7, 0.2, 1] }}
      className="relative card rounded-2xl p-5 overflow-hidden"
      style={{ minHeight: 360 }}
    >
      {/* terminal-like */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-1.5">
          <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#ef4444' }}></span>
          <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#f59e0b' }}></span>
          <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#10b981' }}></span>
        </div>
        <span className="font-mono text-[10px]" style={{ color: 'var(--fg-dim)' }}>~/agents/pipeline.ts</span>
        <I.Cpu size={14} style={{ color: 'var(--fg-dim)' }} />
      </div>

      <pre className="font-mono text-[12px] leading-[1.7] whitespace-pre-wrap" style={{ color: 'var(--fg-muted)' }}>
<span style={{ color: 'var(--fg-dim)' }}>{`// agent pipeline\n`}</span>
<span>{`const agent = `}</span><span style={{ color: 'var(--accent)' }}>{`createAgent`}</span><span>{`({\n`}</span>
<span>{`  model: `}</span><span style={{ color: '#10b981' }}>{`'claude-haiku-4-5'`}</span><span>{`,\n`}</span>
<span>{`  tools: [`}</span><span style={{ color: '#10b981' }}>{`scrape`}</span>{`, `}<span style={{ color: '#10b981' }}>{`enrich`}</span>{`, `}<span style={{ color: '#10b981' }}>{`notify`}</span><span>{`],\n`}</span>
<span>{`  memory: `}</span><span style={{ color: '#f59e0b' }}>{`vector`}</span><span>{`('pgvector'),\n`}</span>
<span>{`});\n\n`}</span>
<span style={{ color: 'var(--fg-dim)' }}>{`// orchestrate\n`}</span>
<span>{`await `}</span><span style={{ color: 'var(--accent)' }}>{`pipeline`}</span><span>{`.run({\n`}</span>
<span>{`  source: `}</span><span style={{ color: '#10b981' }}>{`'inbox.unread'`}</span><span>{`,\n`}</span>
<span>{`  on: `}</span><span style={{ color: '#10b981' }}>{`'lead'`}</span><span>{`, do: agent,\n`}</span>
<span>{`});\n\n`}</span>
<motion.span
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: 1.6, duration: 0.4 }}
  style={{ color: '#10b981' }}
>{`✓ pipeline live · 0.42s avg · 99.97% uptime`}</motion.span>
      </pre>

      {/* mini metrics */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1.2, duration: 0.5 }}
        className="absolute bottom-5 right-5 flex items-center gap-3 px-3 py-2 rounded-lg"
        style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)' }}
      >
        <div>
          <div className="font-mono text-[10px]" style={{ color: 'var(--fg-dim)' }}>tasks/hr</div>
          <div className="font-mono text-sm">2,418</div>
        </div>
        <div className="w-px h-8" style={{ background: 'var(--line)' }}></div>
        <div>
          <div className="font-mono text-[10px]" style={{ color: 'var(--fg-dim)' }}>cost</div>
          <div className="font-mono text-sm">$0.003</div>
        </div>
      </motion.div>
    </motion.div>
  );
};

const Hero = () => {
  // Scroll-linked parallax for hero
  const heroRef = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ['start start', 'end start'] });
  const intensity = (window.__tweaks?.motion ?? 60) / 100;
  const previewY = useTransform(scrollYProgress, [0, 1], [0, 120 * intensity]);
  const headlineY = useTransform(scrollYProgress, [0, 1], [0, -80 * intensity]);
  const headlineOp = useTransform(scrollYProgress, [0, 0.6], [1, 0.3]);
  const gridY = useTransform(scrollYProgress, [0, 1], [0, -60 * intensity]);

  return (
    <section ref={heroRef} id="top" className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden">
      {/* Background grid (parallaxed) */}
      <motion.div style={{ y: gridY }} className="absolute inset-0 bg-grid bg-grid-mask opacity-60 pointer-events-none" aria-hidden></motion.div>
      {/* accent radial */}
      <motion.div
        style={{ y: gridY }}
        animate={{ scale: [1, 1.08, 1], opacity: [0.9, 1, 0.9] }}
        transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
        className="absolute -top-40 -right-40 w-[640px] h-[640px] rounded-full pointer-events-none"
        style={{ background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)' }}
        aria-hidden
      ></motion.div>

      <div className="relative mx-auto max-w-[1280px] px-6 md:px-10">
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="flex items-center gap-3 mb-8"
        >
          <span className="flex items-center gap-2 px-3 py-1.5 rounded-full font-mono text-[11px]" style={{ border: '1px solid var(--line)', background: 'var(--bg-elev)' }}>
            <I.Sparkles size={12} style={{ color: 'var(--accent)' }} />
            <span style={{ color: 'var(--fg-muted)' }}>Now booking Q3 · 2026</span>
          </span>
        </motion.div>

        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 items-end">
          {/* Headline */}
          <motion.div style={{ y: headlineY, opacity: headlineOp }} className="lg:col-span-7">
            <motion.h1
              initial="hidden"
              animate="visible"
              variants={{
                hidden: {},
                visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
              }}
              className="font-display display-tight text-[12vw] sm:text-[10vw] lg:text-[5.6rem] xl:text-[7rem] font-medium"
            >
              {['I build', 'intelligent', 'systems for'].map((line, idx) => (
                <motion.span
                  key={idx}
                  variants={{
                    hidden: { y: '110%', opacity: 0 },
                    visible: { y: 0, opacity: 1, transition: { duration: 0.9, ease: [0.2, 0.7, 0.2, 1] } },
                  }}
                  className="block overflow-hidden"
                >
                  <span className="block">{line}</span>
                </motion.span>
              ))}
              <motion.span
                variants={{
                  hidden: { y: '110%', opacity: 0 },
                  visible: { y: 0, opacity: 1, transition: { duration: 0.9, ease: [0.2, 0.7, 0.2, 1] } },
                }}
                className="block overflow-hidden"
              >
                <span className="block italic" style={{ fontFamily: "'Instrument Serif', serif", fontWeight: 400 }}>
                  ambitious teams.
                </span>
              </motion.span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.6 }}
              className="mt-8 max-w-xl text-lg leading-relaxed"
              style={{ color: 'var(--fg-muted)', textWrap: 'pretty' }}
            >
              I turn tangled requirements into <span style={{ color: 'var(--fg)' }}>scalable products</span> and <span style={{ color: 'var(--fg)' }}>autonomous workflows</span> — bespoke ML, AI agents, and the full-stack plumbing that makes them ship.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.75 }}
              className="mt-10 flex flex-wrap gap-3"
            >
              <Btn href="#work" variant="primary" icon={<I.ArrowDown size={16} />}>View work</Btn>
              <Btn href="#contact" variant="secondary" icon={<I.ArrowUpRight size={16} />}>Contact me</Btn>
            </motion.div>

            {/* role rotator */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.7, delay: 1.0 }}
              className="mt-14 flex items-center gap-3 font-mono text-xs uppercase tracking-[0.18em]"
              style={{ color: 'var(--fg-dim)' }}
            >
              <span className="w-8 h-px" style={{ background: 'var(--line-strong)' }}></span>
              <span>Currently:</span>
              <RotatingRole />
            </motion.div>
          </motion.div>

          {/* Visual preview */}
          <motion.div style={{ y: previewY }} className="lg:col-span-5">
            <HeroPreview />
          </motion.div>
        </div>
      </div>

      {/* scroll cue */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.4, duration: 0.6 }}
        className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 font-mono text-[10px] uppercase tracking-[0.2em]"
        style={{ color: 'var(--fg-dim)' }}
      >
        <span>Scroll</span>
        <motion.span
          animate={{ y: [0, 6, 0] }}
          transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
        >
          <I.ArrowDown size={14} />
        </motion.span>
      </motion.div>
    </section>
  );
};

window.Hero = Hero;