/* About — three pillars + bio */

const PILLARS = [
  {
    icon: 'Bot',
    title: 'AI & Automation',
    body: 'Bespoke ML models, AI agents, and workflow automation that take repetitive work off human plates and put it on a 99.97%-uptime pipeline.',
    tags: ['ML', 'Agents', 'Automation'],
  },
  {
    icon: 'Code',
    title: 'Web & Mobile',
    body: 'Full-stack on Node.js and React, with native-feeling mobile apps. Strong opinions about API shape, state, and UI rhythm.',
    tags: ['Node.js', 'React', 'Mobile'],
  },
  {
    icon: 'Cloud',
    title: 'Cloud Infrastructure',
    body: 'Vercel, DigitalOcean, Cloudflare. Cost-aware deploys, edge-first routing, and observability so things don\'t fall over at 3am.',
    tags: ['Vercel', 'DO', 'Cloudflare'],
  },
];

const About = () => {
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const intensity = (window.__tweaks?.motion ?? 60) / 100;
  const titleY = useTransform(scrollYProgress, [0, 1], [40 * intensity, -40 * intensity]);

  return (
  <Section id="about" className="border-t hairline">
    <div ref={ref} className="grid lg:grid-cols-12 gap-10 lg:gap-16">
      {/* Left rail */}
      <motion.div style={{ y: titleY }} className="lg:col-span-4 lg:sticky lg:top-32 self-start">
        <motion.div {...fadeUp(0)}>
          <Eyebrow index="01">About</Eyebrow>
          <SectionTitle className="mt-5">
            I cut friction <br />
            <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400 }}>where it hurts.</span>
          </SectionTitle>
        </motion.div>
        <motion.p
          {...fadeUp(0.1)}
          className="mt-6 text-base leading-relaxed"
          style={{ color: 'var(--fg-muted)', textWrap: 'pretty' }}
        >
          For seven years I've shipped ML systems, automations, and full-stack tools for teams that needed to move faster than their headcount allowed. The wins look different every time — a 40-hour weekly process collapsed into 12 minutes; an inbox that triages itself; a recruiter pipeline that learns — but the pattern is the same: find the friction, build the smallest thing that removes it, ship it.
        </motion.p>

        {/* Animated counters */}
        <div className="mt-10 grid grid-cols-3 gap-4">
          {[
            { v: 47, suffix: '+', l: 'Shipped' },
            { v: 99, suffix: '.97%', l: 'Uptime' },
            { v: 7, suffix: 'y', l: 'Experience' },
          ].map((s) => (
            <div key={s.l} className="border-l-2 pl-3" style={{ borderColor: 'var(--accent)' }}>
              <div className="font-display text-2xl font-medium tracking-tight">
                <CountUp to={s.v} suffix={s.suffix} duration={1.4} />
              </div>
              <div className="font-mono text-[10px] uppercase tracking-[0.18em] mt-1" style={{ color: 'var(--fg-dim)' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </motion.div>

      {/* Pillars */}
      <div className="lg:col-span-8 grid sm:grid-cols-1 gap-px" style={{ background: 'var(--line)' }}>
        {PILLARS.map((p, idx) => {
          const Ic = I[p.icon];
          return (
            <motion.div
              key={p.title}
              {...fadeUp(0.05 * idx)}
              whileHover={{ x: 4 }}
              className="group relative p-7 md:p-9"
              style={{ background: 'var(--bg)' }}
            >
              <div className="flex items-start gap-6">
                <div className="grid place-items-center w-12 h-12 rounded-xl shrink-0" style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', color: 'var(--accent)' }}>
                  <Ic size={20} />
                </div>
                <div className="flex-1">
                  <div className="flex items-baseline gap-3">
                    <h3 className="text-xl font-medium tracking-tight">{p.title}</h3>
                    <span className="font-mono text-[10px]" style={{ color: 'var(--fg-dim)' }}>0{idx + 1}</span>
                  </div>
                  <p className="mt-2 text-sm leading-relaxed" style={{ color: 'var(--fg-muted)', textWrap: 'pretty' }}>{p.body}</p>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {p.tags.map(t => (
                      <span key={t} className="px-2 py-1 rounded-md font-mono text-[10px]" style={{ background: 'var(--bg-elev)', color: 'var(--fg-muted)' }}>{t}</span>
                    ))}
                  </div>
                </div>
                <I.ArrowUpRight size={18} className="opacity-0 group-hover:opacity-100 transition-opacity shrink-0" style={{ color: 'var(--accent)' }} />
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  </Section>
  );
};

window.About = About;