// Civilizational Rhythm — horizontal timeline with morphing motion SVGs
// Mainframe → PC → Cloud → Edge

const TimelineGlyph = ({ kind, active, accent }) => {
  const t = window.ATTO_TOKENS;
  const c = active ? (accent === 'blue' ? t.blue : t.gold) : t.ink;
  const op = active ? 1 : 0.45;

  if (kind === 'mainframe') {
    return (
      <svg viewBox="0 0 120 80" width="120" height="80" style={{ opacity: op, transition: 'opacity 500ms' }}>
        <rect x="20" y="15" width="80" height="55" fill="none" stroke={c} strokeWidth="1.2" />
        <line x1="20" y1="30" x2="100" y2="30" stroke={c} strokeWidth="0.8" />
        <line x1="20" y1="45" x2="100" y2="45" stroke={c} strokeWidth="0.8" />
        <line x1="20" y1="60" x2="100" y2="60" stroke={c} strokeWidth="0.8" />
        {[0,1,2,3,4].map(i => (
          <circle key={i} cx={28 + i*15} cy={22.5} r="1.6" fill={c}>
            {active && <animate attributeName="opacity" values="0.2;1;0.2"
              dur={`${1 + i * 0.3}s`} repeatCount="indefinite" />}
          </circle>
        ))}
        {[0,1,2,3,4].map(i => (
          <rect key={`r${i}`} x={28 + i*15 - 3} y={38} width="6" height="2" fill={c} opacity={0.6} />
        ))}
        <line x1="20" y1="70" x2="100" y2="70" stroke={c} strokeWidth="1.2" />
        <rect x="30" y="70" width="60" height="4" fill="none" stroke={c} strokeWidth="1" />
      </svg>
    );
  }

  if (kind === 'pc') {
    return (
      <svg viewBox="0 0 120 80" width="120" height="80" style={{ opacity: op, transition: 'opacity 500ms' }}>
        <rect x="25" y="8" width="70" height="48" fill="none" stroke={c} strokeWidth="1.2" rx="2" />
        <rect x="32" y="15" width="56" height="34" fill={c} opacity="0.06" />
        {active && (
          <g>
            <line x1="36" y1="22" x2="60" y2="22" stroke={c} strokeWidth="1">
              <animate attributeName="x2" values="36;60;36" dur="2s" repeatCount="indefinite" />
            </line>
            <line x1="36" y1="28" x2="75" y2="28" stroke={c} strokeWidth="1" opacity="0.7">
              <animate attributeName="x2" values="36;75;36" dur="2.4s" repeatCount="indefinite" />
            </line>
            <line x1="36" y1="34" x2="52" y2="34" stroke={c} strokeWidth="1" opacity="0.5" />
            <rect x="36" y="40" width="3" height="5" fill={c}>
              <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" />
            </rect>
          </g>
        )}
        <line x1="55" y1="56" x2="55" y2="62" stroke={c} strokeWidth="1.2" />
        <line x1="65" y1="56" x2="65" y2="62" stroke={c} strokeWidth="1.2" />
        <rect x="38" y="62" width="44" height="4" fill="none" stroke={c} strokeWidth="1.2" />
        <rect x="28" y="70" width="64" height="5" fill="none" stroke={c} strokeWidth="1" rx="1" />
      </svg>
    );
  }

  if (kind === 'cloud') {
    return (
      <svg viewBox="0 0 120 80" width="120" height="80" style={{ opacity: op, transition: 'opacity 500ms' }}>
        <path d="M 35 50 Q 20 50 20 38 Q 20 28 32 28 Q 34 18 46 18 Q 58 18 62 26
          Q 74 22 82 30 Q 96 30 96 40 Q 100 42 100 48 Q 100 55 90 55 L 38 55 Q 35 54 35 50 Z"
          fill="none" stroke={c} strokeWidth="1.2" />
        {[0,1,2].map(i => (
          <rect key={i} x={34 + i*18} y={62} width="12" height="14" fill="none" stroke={c} strokeWidth="1" />
        ))}
        {[0,1,2].map(i => (
          <line key={`l${i}`} x1={36 + i*18} y1={66} x2={44 + i*18} y2={66} stroke={c} strokeWidth="0.7" />
        ))}
        {active && [0,1,2].map(i => (
          <line key={`s${i}`} x1={40 + i*18} y1="62" x2={40 + i*18} y2="55"
            stroke={c} strokeWidth="1" strokeDasharray="2 2">
            <animate attributeName="stroke-dashoffset" from="0" to="-8" dur="1s" repeatCount="indefinite" />
          </line>
        ))}
      </svg>
    );
  }

  if (kind === 'edge') {
    return (
      <svg viewBox="0 0 120 80" width="120" height="80" style={{ opacity: op, transition: 'opacity 500ms' }}>
        <rect x="12" y="22" width="20" height="36" rx="3" fill="none" stroke={c} strokeWidth="1.2" />
        <circle cx="22" cy="40" r="3" fill={c}>
          {active && <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite" />}
        </circle>
        <rect x="42" y="26" width="32" height="22" rx="1" fill="none" stroke={c} strokeWidth="1.2" />
        <path d={`M 38 50 L 78 50 L 76 54 L 40 54 Z`} fill="none" stroke={c} strokeWidth="1.2" />
        <circle cx="58" cy="37" r="2.5" fill={c}>
          {active && <animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" begin="0.3s" repeatCount="indefinite" />}
        </circle>
        <rect x="82" y="30" width="20" height="24" rx="3" fill="none" stroke={c} strokeWidth="1.2" />
        <line x1="89" y1="26" x2="95" y2="26" stroke={c} strokeWidth="1" />
        <line x1="89" y1="58" x2="95" y2="58" stroke={c} strokeWidth="1" />
        <circle cx="92" cy="42" r="2" fill={c}>
          {active && <animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" begin="0.6s" repeatCount="indefinite" />}
        </circle>
        {active && (
          <g stroke={c} strokeWidth="0.6" fill="none" opacity="0.5">
            <path d="M 22 22 Q 22 12 40 12" />
            <path d="M 58 26 Q 58 16 40 12" />
            <path d="M 58 26 Q 58 16 92 16 Q 92 24 92 30" />
          </g>
        )}
      </svg>
    );
  }
  return null;
};

const Timeline = ({ accent }) => {
  const t = window.ATTO_TOKENS;
  const [activeIdx, setActiveIdx] = React.useState(3);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        let i = 0;
        const steps = [0, 1, 2, 3];
        const tick = () => {
          setActiveIdx(steps[i]);
          i++;
          if (i < steps.length) setTimeout(tick, 1400);
        };
        setTimeout(tick, 300);
      }
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const eras = [
    { kind: 'mainframe', year: '1950s–60s', title: 'Mainframe', sub: 'Centralized authority',
      body: 'Intelligence was rented. Time-sharing on Big Iron.' },
    { kind: 'pc', year: '1980s–90s', title: 'Personal', sub: 'Distributed agency',
      body: "Moore's Law collapsed cost. Compute moved to the desk." },
    { kind: 'cloud', year: '2000s–20s', title: 'Cloud', sub: 'Elastic utility',
      body: 'Hyperscale on tap — at the cost of sovereignty.' },
    { kind: 'edge', year: '2026 →', title: 'Local AI', sub: 'The intelligence edge',
      body: 'NPUs, SLMs, a 1,000× cost collapse. Intelligence returns home.' },
  ];

  return (
    <section id="manifesto" ref={ref} className="atto-timeline" style={{
      padding: '160px 48px 140px',
      borderTop: `1px solid ${t.rule}`,
      position: 'relative',
      fontFamily: 'var(--atto-sans)',
    }}>
      <div className="atto-section-meta" style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--atto-mono)', fontSize: 13, color: t.fadedText,
        letterSpacing: '0.08em', marginBottom: 48 }}>
        <span>/ 02 — CIVILIZATIONAL RHYTHM</span>
        <span>THE RECURRING CYCLE</span>
      </div>

      <h2 style={{
        fontSize: 'clamp(40px, 4.8vw, 68px)',
        lineHeight: 1.02, letterSpacing: '-0.03em', fontWeight: 600,
        color: t.ink, margin: '0 0 24px 0', maxWidth: 980, textWrap: 'balance',
      }}>
        Computing consolidates,<br/>
        then it <span style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontWeight: 400 }}>democratizes</span>.
      </h2>
      <p style={{ fontSize: 18, color: t.mutedText, maxWidth: 680, lineHeight: 1.55,
        margin: '0 0 80px 0', textWrap: 'pretty' }}>
        Every era of compute begins in the basement of a few, and ends in the pockets of many.
        AI is running the same rhythm — faster.
      </p>

      {/* Horizontal timeline */}
      <div style={{ position: 'relative' }}>
        {/* The rail */}
        <div style={{ position: 'absolute', top: 56, left: '6%', right: '6%',
          height: 1, background: t.rule }} />
        {/* Moving indicator */}
        <div style={{ position: 'absolute', top: 53, left: `calc(6% + ${activeIdx * 29.3}%)`,
          width: 8, height: 8, borderRadius: 999,
          background: accent === 'blue' ? t.blue : t.gold,
          boxShadow: `0 0 0 6px ${t.ivory}, 0 0 0 7px ${accent === 'blue' ? t.blue : t.gold}`,
          transition: 'left 900ms cubic-bezier(.6,.2,.2,1)',
        }} />

        <div className="atto-timeline-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {eras.map((era, i) => (
            <div key={era.kind} onClick={() => setActiveIdx(i)}
              style={{ cursor: 'pointer', paddingTop: 0 }}>
              <div style={{ height: 112, display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
                <TimelineGlyph kind={era.kind} active={i === activeIdx} accent={accent} />
              </div>
              <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13,
                color: t.fadedText, letterSpacing: '0.08em', marginTop: 16,
                opacity: i === activeIdx ? 1 : 0.5, transition: 'opacity 400ms' }}>
                {era.year}
              </div>
              <h3 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em',
                color: t.ink, margin: '6px 0 4px',
                opacity: i === activeIdx ? 1 : 0.55, transition: 'opacity 400ms' }}>
                {era.title}
              </h3>
              <div style={{ fontSize: 15, color: t.mutedText, fontStyle: 'italic',
                fontFamily: 'var(--atto-serif)', marginBottom: 12,
                opacity: i === activeIdx ? 1 : 0.55, transition: 'opacity 400ms' }}>
                {era.sub}
              </div>
              <p style={{ fontSize: 17, lineHeight: 1.5, color: t.mutedText,
                margin: 0, maxWidth: 260,
                opacity: i === activeIdx ? 1 : 0.4, transition: 'opacity 400ms' }}>
                {era.body}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Cost collapse callout */}
      <div className="atto-timeline-callout" style={{
        marginTop: 120, padding: '56px 56px 44px',
        border: `1px solid ${t.rule}`, borderRadius: 20,
        background: 'rgba(255,255,255,0.4)',
      }}>
        <div className="atto-timeline-callout-inner" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          marginBottom: 36, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 560 }}>
            <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13, color: t.fadedText,
              letterSpacing: '0.08em', marginBottom: 14 }}>GPT-4 LEVEL INTELLIGENCE · $/M TOKENS</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
              <span className="atto-cost-number" style={{ fontSize: 128, fontWeight: 600, letterSpacing: '-0.05em',
                lineHeight: 0.9, fontFamily: 'var(--atto-sans)',
                color: accent === 'blue' ? t.blue : t.goldDeep }}>1000×</span>
              <span style={{ fontSize: 22, color: t.ink, lineHeight: 1.3, maxWidth: 300,
                fontWeight: 500, letterSpacing: '-0.01em' }}>
                cheaper in 24 months.
              </span>
            </div>
            <div style={{ fontSize: 19, color: t.mutedText, marginTop: 14, maxWidth: 540,
              lineHeight: 1.5 }}>
              In 2023, GPT-4-level intelligence cost <b>$90 per million tokens</b>. By 2025, open models
              reached the same benchmarks at <b>6 cents</b>. The floor is collapsing — and the edge is where it lands.
            </div>
          </div>
          <div className="atto-timeline-prices" style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 10, color: t.fadedText,
                letterSpacing: '0.1em', marginBottom: 6 }}>2023</div>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em' }}>$90.00</div>
            </div>
            <div style={{ fontSize: 32, color: t.fadedText, lineHeight: 1.4 }}>→</div>
            <div>
              <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 10, color: t.fadedText,
                letterSpacing: '0.1em', marginBottom: 6 }}>2025</div>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em',
                color: accent === 'blue' ? t.blue : t.goldDeep }}>$0.06</div>
            </div>
          </div>
        </div>

        {/* Big cost-collapse chart — hidden on mobile */}
        <div className="atto-cost-chart">
          <svg viewBox="0 0 1200 420" width="100%" style={{ display: 'block' }}>
            <defs>
              <linearGradient id="collapseFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={accent === 'blue' ? t.blue : t.gold} stopOpacity="0.35" />
                <stop offset="100%" stopColor={accent === 'blue' ? t.blue : t.gold} stopOpacity="0" />
              </linearGradient>
            </defs>

            {[
              { y: 50, label: '$100' },
              { y: 130, label: '$10' },
              { y: 210, label: '$1' },
              { y: 290, label: '$0.10' },
              { y: 340, label: '$0.01' },
            ].map((g, i) => (
              <g key={i}>
                <line x1="80" x2="1160" y1={g.y} y2={g.y} stroke={t.rule} strokeWidth="0.6" strokeDasharray="2 4" />
                <text x="64" y={g.y + 4} textAnchor="end" fontSize="12"
                  fontFamily="var(--atto-mono)" fill={t.fadedText}>{g.label}</text>
              </g>
            ))}

            <line x1="80" y1="360" x2="1160" y2="360" stroke={t.ink} strokeWidth="1" opacity="0.4" />
            {[
              { x: 120, label: 'Q1 2023' },
              { x: 400, label: 'Q3 2023' },
              { x: 680, label: 'Q1 2024' },
              { x: 960, label: 'Q3 2024' },
              { x: 1140, label: 'Q2 2025' },
            ].map((g, i) => (
              <text key={i} x={g.x} y="384" textAnchor="middle" fontSize="11"
                fontFamily="var(--atto-mono)" fill={t.fadedText} letterSpacing="0.05em">{g.label}</text>
            ))}

            <path d="M 120 60 Q 300 68 500 140 Q 700 230 900 295 Q 1040 328 1140 338 L 1140 360 L 120 360 Z"
              fill="url(#collapseFill)" />

            <path d="M 120 60 Q 300 68 500 140 Q 700 230 900 295 Q 1040 328 1140 338"
              fill="none" stroke={accent === 'blue' ? t.blue : t.goldDeep} strokeWidth="3"
              strokeLinecap="round" strokeDasharray="1800" strokeDashoffset="1800">
              <animate attributeName="stroke-dashoffset" from="1800" to="0"
                dur="2.6s" begin="0.3s" fill="freeze" />
            </path>

            <g>
              <circle cx="120" cy="60" r="7" fill={t.ink} />
              <circle cx="120" cy="60" r="14" fill="none" stroke={t.ink} strokeWidth="1" opacity="0.25">
                <animate attributeName="r" values="10;22;10" dur="3s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.4;0;0.4" dur="3s" repeatCount="indefinite" />
              </circle>
              <line x1="120" y1="45" x2="120" y2="20" stroke={t.ink} strokeWidth="0.8" opacity="0.4" />
              <text x="120" y="15" textAnchor="middle" fontSize="14" fontWeight="600"
                fontFamily="var(--atto-sans)" fill={t.ink}>$90.00 / M tok</text>
            </g>

            <g>
              <circle cx="680" cy="220" r="5" fill={t.ink} opacity="0.6" />
              <line x1="680" y1="205" x2="680" y2="180" stroke={t.ink} strokeWidth="0.6" opacity="0.35" />
              <text x="680" y="170" textAnchor="middle" fontSize="12"
                fontFamily="var(--atto-mono)" fill={t.mutedText}>~$1.20 · mid-2024</text>
            </g>

            <g>
              <circle cx="1140" cy="338" r="10" fill={accent === 'blue' ? t.blue : t.gold} />
              <circle cx="1140" cy="338" r="18" fill="none"
                stroke={accent === 'blue' ? t.blue : t.gold} strokeWidth="1.5">
                <animate attributeName="r" values="14;28;14" dur="2s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite" />
              </circle>
              <line x1="1140" y1="320" x2="1140" y2="278" stroke={t.ink} strokeWidth="0.8" opacity="0.4" />
              <text x="1140" y="270" textAnchor="end" fontSize="14" fontWeight="600"
                fontFamily="var(--atto-sans)" fill={accent === 'blue' ? t.blue : t.goldDeep}>$0.06 / M tok</text>
              <text x="1140" y="252" textAnchor="end" fontSize="11"
                fontFamily="var(--atto-mono)" fill={t.fadedText} letterSpacing="0.06em">
                Qwen3-8B · Gemma-3-4B
              </text>
            </g>

            <g opacity="0.85">
              <line x1="60" y1="60" x2="60" y2="338" stroke={accent === 'blue' ? t.blue : t.goldDeep}
                strokeWidth="1.2" strokeDasharray="4 4" />
              <polygon points="56,334 60,342 64,334" fill={accent === 'blue' ? t.blue : t.goldDeep} />
              <text x="48" y="200" textAnchor="end" fontSize="14" fontWeight="600"
                fontFamily="var(--atto-sans)" fill={accent === 'blue' ? t.blue : t.goldDeep}
                transform="rotate(-90, 48, 200)">
                ▼ 1,500× drop
              </text>
            </g>
          </svg>
        </div>

        {/* Mobile chart replacement */}
        <div className="atto-cost-chart-mobile" style={{
          display: 'none',
          marginTop: 16,
          padding: '20px 0',
          borderTop: `1px solid ${t.rule}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            {[
              { label: 'Q1 2023', val: '$90.00', color: t.ink },
              { label: 'Mid-2024', val: '$1.20', color: t.mutedText },
              { label: 'Q2 2025', val: '$0.06', color: accent === 'blue' ? t.blue : t.goldDeep },
            ].map((pt, i, arr) => (
              <React.Fragment key={pt.label}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 10, color: t.fadedText,
                    letterSpacing: '0.08em', marginBottom: 6 }}>{pt.label}</div>
                  <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.03em', color: pt.color }}>{pt.val}</div>
                </div>
                {i < arr.length - 1 && (
                  <div style={{ fontSize: 18, color: t.fadedText, flexShrink: 0 }}>→</div>
                )}
              </React.Fragment>
            ))}
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--atto-mono)', fontSize: 11,
            color: t.fadedText, letterSpacing: '0.06em' }}>
            1,500× cost drop in 24 months · Qwen3-8B · Gemma-3-4B
          </div>
        </div>
      </div>
    </section>
  );
};

window.Timeline = Timeline;