// Bento — varied tile sizes for features
const Tile = ({ className = "", children, label, eyebrow }) => (
  <div className={"reveal relative bg-paper border hairline rounded-3xl p-7 md:p-8 overflow-hidden flex flex-col " + className}>
    {eyebrow && (
      <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-ink3 mb-4">{eyebrow}</div>
    )}
    {children}
    {label && (
      <div className="mt-auto pt-6 text-[12px] font-mono uppercase tracking-[0.14em] text-ink3">{label}</div>
    )}
  </div>
);

// Visual: shape recognition demo
const ShapeDemo = () => {
  const [stage, setStage] = React.useState(0); // 0 sketchy, 1 morphing, 2 perfect
  React.useEffect(() => {
    const id = setInterval(() => setStage(s => (s + 1) % 3), 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="relative h-44 w-full">
      <svg viewBox="0 0 320 160" className="w-full h-full">
        {/* baseline rules */}
        <g stroke="oklch(0.92 0.005 280)" strokeWidth="1">
          <line x1="0" x2="320" y1="40" y2="40" />
          <line x1="0" x2="320" y1="80" y2="80" />
          <line x1="0" x2="320" y1="120" y2="120" />
        </g>
        {/* hand-drawn rect that snaps */}
        <g fill="none" stroke="#B8941F" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'all .6s cubic-bezier(.2,.7,.2,1)' }}>
          {stage === 0 && (
            <path d="M 30 40 C 35 38, 110 36, 145 38 C 144 60, 142 92, 144 110 C 110 113, 60 110, 32 112 C 31 90, 30 60, 30 40 Z" />
          )}
          {stage === 1 && (
            <path d="M 32 40 L 144 38 L 142 110 L 32 112 Z" />
          )}
          {stage === 2 && (
            <rect x="32" y="40" width="112" height="72" rx="4" />
          )}
        </g>
        {/* Circle */}
        <g fill="none" stroke="#B8941F" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transition: 'all .6s cubic-bezier(.2,.7,.2,1)' }}>
          {stage === 0 && (
            <path d="M 220 40 C 200 50, 195 80, 215 105 C 245 115, 280 100, 285 75 C 282 48, 250 35, 220 40 Z" />
          )}
          {stage === 1 && (
            <ellipse cx="245" cy="75" rx="38" ry="34" />
          )}
          {stage === 2 && (
            <circle cx="245" cy="76" r="36" />
          )}
        </g>
        {/* label */}
        <text x="32" y="148" fill="oklch(0.55 0.012 280)" fontFamily="Geist Mono" fontSize="9" letterSpacing="1.2">
          {stage === 0 ? 'DETECTED…' : stage === 1 ? 'STRAIGHTENING' : 'SNAPPED · 4 px GRID'}
        </text>
      </svg>
    </div>
  );
};

// Visual: gestures — single scrub stroke
const GestureDemo = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setT(v => (v + 1) % 100), 28);
    return () => clearInterval(id);
  }, []);
  const x = 30 + (t / 100) * 240;
  const opacity = Math.max(0, 1 - t / 80);
  return (
    <div className="relative h-44 w-full">
      <svg viewBox="0 0 320 160" className="w-full h-full">
        <text x="40" y="92" fill="#B8941F" fontFamily="Inter" fontWeight="500" fontSize="42" opacity={opacity}>handwriting</text>
        <path
          d={`M 30 80 Q ${x - 8} 60, ${x} 90 T ${x + 12} 70`}
          fill="none"
          stroke="oklch(0.55 0.012 280)"
          strokeWidth="3"
          strokeLinecap="round"
        />
        <circle cx={x} cy="80" r="14" fill="#B8941F1A" stroke="#B8941F" strokeWidth="1.2" />
      </svg>
    </div>
  );
};

// Visual: Sync constellation
const SyncDemo = () => (
  <div className="relative h-44 w-full">
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="g1" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#E5C07B4D" />
          <stop offset="100%" stopColor="#E5C07B00" />
        </radialGradient>
      </defs>
      <circle cx="160" cy="70" r="55" fill="url(#g1)" />
      {/* center cloud */}
      <g>
        <circle cx="160" cy="70" r="15" fill="oklch(1 0 0)" stroke="#B8941F" strokeWidth="1.4" />
        <text x="160" y="73" textAnchor="middle" fontFamily="Geist Mono" fontSize="8" fill="#B8941F" letterSpacing="1.2">SYNC</text>
      </g>
      {/* devices: Tablet top-left, Web top-right, Phone bottom-center — all labels in safe zone */}
      {[
        { x: 55, y: 35, label: "Tablet", labelY: 22 },
        { x: 265, y: 35, label: "Web", labelY: 22 },
        { x: 160, y: 115, label: "Phone", labelY: 135 },
      ].map((d, i) => (
        <g key={d.label}>
          <line x1="160" y1="70" x2={d.x} y2={d.y} stroke="#B8941F66" strokeWidth="1" strokeDasharray="3 3">
            <animate attributeName="stroke-dashoffset" from="0" to="-12" dur="1.2s" begin={`${i * 0.2}s`} repeatCount="indefinite" />
          </line>
          <circle cx={d.x} cy={d.y} r="6" fill="oklch(1 0 0)" stroke="#B8941F" strokeWidth="1.4" />
          <text x={d.x} y={d.labelY} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="oklch(0.40 0.012 280)" letterSpacing="1.2">{d.label.toUpperCase()}</text>
        </g>
      ))}
    </svg>
  </div>
);

// Visual: Voice waveform
const VoiceDemo = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setT(v => v + 1), 80); return () => clearInterval(id); }, []);
  const bars = 36;
  return (
    <div className="relative h-32">
      <div className="flex items-end gap-[3px] h-20">
        {Array.from({ length: bars }).map((_, i) => {
          const h = 18 + Math.abs(Math.sin(i * 0.4 + t * 0.18)) * 50 + Math.abs(Math.cos(i * 0.31 + t * 0.12)) * 20;
          return <span key={i} className="flex-1 bg-violet-deep rounded-full" style={{ height: h + "%", opacity: 0.4 + (i / bars) * 0.6 }} />;
        })}
      </div>
      <div className="mt-3 text-[14px] text-ink2 leading-snug" style={{ textWrap: 'pretty' }}>
        "<span className="text-ink">…the answer is composability — small pieces that rhyme.</span>"
      </div>
    </div>
  );
};

// Visual: PDF annotation
const PDFDemo = () => (
  <div className="relative h-44 w-full">
    {/* PDF page sheet */}
    <div className="absolute inset-x-0 top-0 bottom-0 mx-auto w-[78%] bg-white rounded-[3px] shadow-[0_1px_0_rgba(0,0,0,0.04),0_8px_20px_-12px_rgba(0,0,0,0.18)] border border-ink3/15 overflow-hidden">
      {/* folded corner */}
      <svg className="absolute top-0 right-0" width="14" height="14" viewBox="0 0 14 14">
        <path d="M 0 0 L 14 0 L 14 14 Z" fill="#F2EFE8" />
        <path d="M 14 0 L 14 14 L 0 0 Z" fill="white" stroke="#D6CFBE" strokeWidth="0.5" />
      </svg>
      {/* doc heading */}
      <div className="px-4 pt-3">
        <div className="text-[8px] font-mono uppercase tracking-[0.2em] text-ink3/70">Research · Section 4</div>
        <div className="mt-1 h-2 rounded-sm bg-ink/80 w-[55%]" />
        <div className="mt-1 h-1.5 rounded-sm bg-ink3/30 w-[35%]" />
      </div>
      {/* two columns of text lines */}
      <div className="absolute left-4 right-4 top-[52px] grid grid-cols-2 gap-3">
        <div className="space-y-[5px]">
          {[96, 90, 94, 88, 70, 92, 84, 78].map((w, i) => (
            <div key={i} className="h-[3px] rounded-full bg-ink3/25" style={{ width: `${w}%` }} />
          ))}
        </div>
        <div className="space-y-[5px] relative">
          {/* highlight band behind lines 2-3 */}
          <div className="absolute left-0 right-0 top-[7px] h-[12px] rounded-[2px] bg-violet/55" />
          {[88, 92, 84, 96, 76, 90, 82, 70].map((w, i) => (
            <div key={i} className="relative h-[3px] rounded-full bg-ink3/25" style={{ width: `${w}%` }} />
          ))}
        </div>
      </div>
    </div>

    {/* handwritten margin annotation: scribbled note + arrow pointing into highlight */}
    <svg className="absolute -right-1 top-2 w-24 h-28 pointer-events-none" viewBox="0 0 120 130" fill="none">
      {/* scribbled "note" lines */}
      <path d="M 18 18 Q 40 10, 70 16 T 115 18" stroke="#B8941F" strokeWidth="1.6" strokeLinecap="round" />
      <path d="M 18 30 Q 40 24, 65 30 T 110 32" stroke="#B8941F" strokeWidth="1.6" strokeLinecap="round" />
      <path d="M 18 42 Q 35 38, 55 42" stroke="#B8941F" strokeWidth="1.6" strokeLinecap="round" />
      {/* curly arrow pointing left into the page highlight */}
      <path d="M 50 55 C 35 60, 20 70, 8 78" stroke="#B8941F" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M 8 78 L 16 74 M 8 78 L 14 84" stroke="#B8941F" strokeWidth="1.8" strokeLinecap="round" />
    </svg>

    {/* sticky note */}
    <div className="absolute left-1 bottom-2 w-20 h-14 rotate-[-4deg] bg-[#FAEED0] shadow-[0_4px_10px_-4px_rgba(0,0,0,0.18)] border border-violet-deep/20 px-2 py-1.5">
      <div className="text-[7px] font-mono uppercase tracking-[0.18em] text-violet-deep/80">Note</div>
      <svg className="mt-0.5" width="64" height="22" viewBox="0 0 64 22">
        <path d="M 2 6 Q 14 2, 26 6 T 60 6 M 2 14 Q 14 11, 24 14 T 50 14" stroke="#B8941F" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      </svg>
    </div>
  </div>
);

const SectionLabel = ({ children }) => (
  <div className="flex items-center gap-3 mb-12">
    <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-violet-deep">{children}</div>
    <div className="flex-1 h-px bg-rule" />
  </div>
);

const Bento = () => (
  <section id="features" className="relative py-24 md:py-32">
    <div className="mx-auto max-w-[1240px] px-6">
      <SectionLabel>02 · Capabilities</SectionLabel>

      <div className="reveal flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
        <h2 className="text-ink font-semibold tracking-tightest leading-[0.95] text-[44px] md:text-[68px] max-w-[18ch]">
          A blank page,<br />engineered.
        </h2>
        <p className="max-w-md text-[17px] leading-[1.55] text-ink2">
          Each capability earned its place. No clutter, no toolboxes — just the smallest set of behaviors that make a notebook feel alive.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-6 gap-4 md:auto-rows-[260px]">
        {/* 120Hz - large */}
        <Tile className="md:col-span-3 md:row-span-2" eyebrow="Fluidity" label="120 Hz · 9 ms · Active stylus + finger">
          <div className="flex-1 flex flex-col gap-6">
            <h3 className="text-[34px] md:text-[40px] font-semibold tracking-tightest leading-[0.98] text-ink max-w-[14ch]">
              The page reacts before your hand finishes the stroke.
            </h3>
            <p className="text-[15px] text-ink2 leading-[1.6] max-w-[36ch]">
              We rewrote the rendering pipeline around high-refresh Android panels — every frame predicted, every pixel placed under 9 ms after the tip touches glass.
            </p>
            <div className="mt-2">
              <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-ink3 mb-2">Latency budget</div>
              <div className="flex items-center gap-2">
                <div className="flex-1 h-2 bg-paper3 rounded-full overflow-hidden">
                  <div className="h-full bg-gradient-to-r from-violet to-violet-deep rounded-full" style={{ width: '14%' }} />
                </div>
                <div className="text-[12px] font-mono text-ink">9 / 64 ms</div>
              </div>
            </div>
          </div>
        </Tile>

        {/* Shape recognition */}
        <Tile className="md:col-span-3" eyebrow="Smart shapes" label="Auto-detect · 4 px snap">
          <h3 className="text-[24px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-3">Sketchy in. Geometric out.</h3>
          <ShapeDemo />
        </Tile>

        {/* Gestures */}
        <Tile className="md:col-span-3" eyebrow="Gestures" label="Scrub · pinch · two-finger undo">
          <h3 className="text-[24px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-3">Erase like you mean it.</h3>
          <GestureDemo />
        </Tile>

        {/* Sync - wide */}
        <Tile className="md:col-span-4" eyebrow="Real-time sync" label="Supabase · CRDT · End-to-end encrypted">
          <h3 className="text-[24px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-3">Every device, the same page.</h3>
          <SyncDemo />
        </Tile>

        {/* Voice */}
        <Tile className="md:col-span-2" eyebrow="Voice → Text" label="On-device · 32 languages">
          <h3 className="text-[20px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-3">Speak. Inkly listens.</h3>
          <VoiceDemo />
        </Tile>

        {/* PDF */}
        <Tile className="md:col-span-3" eyebrow="PDF annotation" label="Mark · highlight · summarize">
          <h3 className="text-[24px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-3">Annotate anything you can read.</h3>
          <PDFDemo />
        </Tile>

        {/* Adaptive UI */}
        <Tile className="md:col-span-3" eyebrow="Adaptive UI" label="Phone · tablet · desktop">
          <h3 className="text-[24px] font-semibold tracking-tighter2 leading-[1.05] text-ink mb-4">Scales like ink.</h3>
          <div className="flex items-end justify-center gap-6 h-32">
            {/* Phone */}
            <div className="flex flex-col items-center gap-1.5">
              <div className="relative w-9 h-16 rounded-[6px] bg-paper border border-ink/80 shadow-sm">
                <div className="absolute top-0.5 left-1/2 -translate-x-1/2 w-3 h-0.5 rounded-full bg-ink/70" />
              </div>
              <div className="text-[8px] font-mono uppercase tracking-[0.18em] text-ink3">Phone</div>
            </div>
            {/* Tablet */}
            <div className="flex flex-col items-center gap-1.5">
              <div className="relative w-16 h-20 rounded-[7px] bg-paper border border-ink/80 shadow-sm">
                <div className="absolute top-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-ink/70" />
              </div>
              <div className="text-[8px] font-mono uppercase tracking-[0.18em] text-ink3">Tablet</div>
            </div>
            {/* Desktop monitor */}
            <div className="flex flex-col items-center gap-1.5">
              <div className="relative w-32 h-20 rounded-[6px] bg-paper border border-ink/80 shadow-sm" />
              <div className="w-10 h-1 bg-ink/80 rounded-b-sm" />
              <div className="text-[8px] font-mono uppercase tracking-[0.18em] text-ink3 -mt-0.5">Desktop</div>
            </div>
          </div>
        </Tile>
      </div>
    </div>
  </section>
);

window.Bento = Bento;
window.SectionLabel = SectionLabel;