const Human = () => {
  return (
    <Section
      id="human"
      eyebrow="AI + human collaboration"
      title={<>Workflows should run themselves —<br/>and <em className="font-serif italic">still</em> empower people.</>}
      sub="Automation isn't replacement. It's the removal of work that shouldn't exist, so your team can do work that compounds."
      className="border-t border-token"
    >
      <div className="grid md:grid-cols-12 gap-5">
        {/* AI handles */}
        <div className="md:col-span-6 reveal card p-8 md:p-10 relative overflow-hidden">
          <div className="absolute top-0 left-0 right-0 h-1 brand-gradient opacity-80"/>
          <div className="flex items-center justify-between mb-8">
            <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-muted">AI handles</div>
            <div className="w-9 h-9 rounded-lg flex items-center justify-center border border-token text-brand-blue">
              <I.Bot size={18}/>
            </div>
          </div>
          <h3 className="display text-[28px] md:text-[32px] leading-[1.1]">Repetition, scale, and signal.</h3>
          <ul className="mt-6 space-y-3 text-[15px]">
            {[
              'Reads every document, every email, every transaction',
              'Watches the queue 24/7 — never tired, never blind',
              'Calculates against thousands of variables in milliseconds',
              'Acts on policy when policy is clear',
            ].map((t,i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-1 w-5 h-5 rounded-md border border-token flex items-center justify-center text-brand-green flex-shrink-0">
                  <I.Check size={12}/>
                </span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Humans handle */}
        <div className="md:col-span-6 reveal card p-8 md:p-10 relative overflow-hidden" style={{transitionDelay:'120ms'}}>
          <div className="absolute top-0 left-0 right-0 h-1 bg-[var(--text)] opacity-80"/>
          <div className="flex items-center justify-between mb-8">
            <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-muted">Humans handle</div>
            <div className="w-9 h-9 rounded-lg flex items-center justify-center border border-token">
              <I.Users size={18}/>
            </div>
          </div>
          <h3 className="display text-[28px] md:text-[32px] leading-[1.1]">Strategy, judgment, and trust.</h3>
          <ul className="mt-6 space-y-3 text-[15px]">
            {[
              'Set the policy the AI executes against',
              'Resolve the ambiguous, the novel, the political',
              'Build relationships the model will never have',
              'Own the outcome — because outcomes are what count',
            ].map((t,i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-1 w-5 h-5 rounded-md border border-token flex items-center justify-center text-[var(--text)] flex-shrink-0">
                  <I.Check size={12}/>
                </span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Section>
  );
};

window.Human = Human;