/* global React */
// Footer + Tweaks panel

const STAGES = [
  {
    num: '01', state: 'PAST', tone: 'past',
    name1: 'Command Line', name2: 'Interface',
    mock: 'cli',
  },
  {
    num: '02', state: 'PAST', tone: 'past',
    name1: 'Graphical User', name2: 'Interface',
    mock: 'gui',
  },
  {
    num: '03', state: 'CURRENT', tone: 'current',
    name1: 'Single Agent', name2: 'Interface',
    mock: 'agent',
  },
  {
    num: '04', state: 'NEXT', tone: 'next',
    name1: 'Multi Agent', name2: 'Interface',
    mock: 'multi',
  },
];

function StageColumn({ stage, accent, mono, zh }) {
  const past = stage.tone === 'past';
  const current = stage.tone === 'current';
  const next = stage.tone === 'next';

  const nameColor = past ? 'rgba(255,255,255,.42)' : (next ? accent : '#fff');
  const numColor = past ? 'rgba(255,255,255,.32)' : accent;
  const borderColor = past
    ? 'rgba(255,255,255,.06)'
    : (next ? `${accent}55` : 'rgba(255,255,255,.18)');
  const borderStyle = next ? 'dashed' : 'solid';

  // state chip styles
  const chipStyle = past ? {
    color: 'rgba(255,255,255,.5)',
    border: '1px solid rgba(255,255,255,.16)',
    background: 'transparent',
  } : current ? {
    color: '#0a0a0a',
    background: accent,
    border: `1px solid ${accent}`,
    fontWeight: 700,
  } : {
    color: accent,
    border: `1px solid ${accent}`,
    background: 'rgba(198,255,61,.05)',
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start', textAlign: 'left' }}>
      {/* State chip — left-aligned, no // NN prefix */}
      <span style={{
        fontFamily: mono, fontSize: 9, letterSpacing: '.22em',
        padding: '3px 7px', borderRadius: 3,
        ...chipStyle,
      }}>{stage.state}</span>

      {/* Stage name */}
      <div style={{
        fontFamily: 'var(--font-sans), system-ui, sans-serif',
        fontSize: 22, fontWeight: past ? 400 : 600, lineHeight: 1.18,
        letterSpacing: '-.015em',
        color: nameColor,
        minHeight: 56,
      }}>
        {stage.name1}<br/>{stage.name2}
      </div>

      {/* Mock panel */}
      <div style={{
        width: '100%',
        height: 200,
        border: `1px ${borderStyle} ${borderColor}`,
        background: past ? 'rgba(0,0,0,.18)' : (next ? 'rgba(198,255,61,.025)' : 'rgba(255,255,255,.02)'),
        position: 'relative', overflow: 'hidden',
      }}>
        <Mock kind={stage.mock} accent={accent} mono={mono} zh={zh} past={past} />
      </div>
    </div>
  );
}

function Mock({ kind, accent, mono, zh, past }) {
  const dim = past ? 'rgba(255,255,255,.32)' : 'rgba(255,255,255,.7)';
  const accDim = past ? 'rgba(198,255,61,.4)' : accent;

  if (kind === 'cli') {
    return (
      <div style={{ padding: 14, fontFamily: mono, fontSize: 9.5, lineHeight: 1.85, letterSpacing: '.02em', color: dim }}>
        <div><span style={{ color: accDim }}>$</span> design --era cli</div>
        <div style={{ color: past ? 'rgba(255,255,255,.28)' : 'rgba(255,255,255,.5)' }}>&gt; mode: command-driven</div>
        <div style={{ color: past ? 'rgba(255,255,255,.28)' : 'rgba(255,255,255,.5)' }}>&gt; bandwidth: text-only</div>
        <div style={{ color: past ? 'rgba(255,255,255,.28)' : 'rgba(255,255,255,.5)' }}>&gt; UI &lt;= keyboard</div>
        <div style={{ marginTop: 6 }}><span style={{ color: accDim }}>$</span> <span style={{ background: dim, display: 'inline-block', width: 6, height: 11, verticalAlign: 'text-bottom' }} /></div>
      </div>
    );
  }

  if (kind === 'gui') {
    return (
      <div style={{ padding: 14, height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* Window chrome */}
        <div style={{
          border: `1px solid ${past ? 'rgba(255,255,255,.16)' : 'rgba(255,255,255,.3)'}`,
          background: past ? 'rgba(255,255,255,.025)' : 'rgba(255,255,255,.05)',
          flex: 1, display: 'flex', flexDirection: 'column',
        }}>
          {/* Title bar */}
          <div style={{
            borderBottom: `1px solid ${past ? 'rgba(255,255,255,.12)' : 'rgba(255,255,255,.22)'}`,
            padding: '5px 8px',
            display: 'flex', alignItems: 'center', gap: 5,
          }}>
            {[0,1,2].map(i => (
              <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: past ? 'rgba(255,255,255,.22)' : 'rgba(255,255,255,.45)' }} />
            ))}
            <span style={{ marginLeft: 10, fontFamily: mono, fontSize: 8.5, letterSpacing: '.18em', color: past ? 'rgba(255,255,255,.32)' : 'rgba(255,255,255,.55)' }}>SYSTEM 1.0</span>
          </div>
          {/* Body — icon grid */}
          <div style={{ flex: 1, padding: 10, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, alignContent: 'center' }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} style={{
                aspectRatio: '1',
                border: `1px solid ${past ? 'rgba(255,255,255,.12)' : 'rgba(255,255,255,.22)'}`,
                background: past ? 'rgba(255,255,255,.02)' : 'rgba(255,255,255,.04)',
              }} />
            ))}
          </div>
        </div>
        <div style={{ marginTop: 8, fontFamily: mono, fontSize: 8.5, letterSpacing: '.22em', color: past ? 'rgba(255,255,255,.28)' : 'rgba(255,255,255,.5)' }}>WIMP · DIRECT MANIPULATION</div>
      </div>
    );
  }

  if (kind === 'agent') {
    return (
      <div style={{ padding: 14, height: '100%', display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
        {/* AI status (left) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, boxShadow: `0 0 6px ${accent}` }} />
          <span style={{ fontFamily: zh, fontSize: 11, color: 'rgba(255,255,255,.6)' }}>正在生成中...</span>
        </div>
        {/* progress bar */}
        <div style={{ height: 4, background: 'rgba(255,255,255,.06)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '62%', background: accent, boxShadow: `0 0 8px ${accent}` }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: mono, fontSize: 8.5, letterSpacing: '.18em', color: 'rgba(255,255,255,.4)' }}>
          <span>SEEDREAM · 62%</span>
          <span>~12s</span>
        </div>
      </div>
    );
  }

  if (kind === 'multi') {
    return (
      <div style={{
        height: '100%', position: 'relative',
        backgroundImage: `linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%), linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.04) 75%)`,
        backgroundSize: '12px 12px',
        backgroundPosition: '0 0, 6px 6px',
      }}>
        {/* faint orbiting dots */}
        {[
          { x: '18%', y: '22%', s: 5 },
          { x: '82%', y: '28%', s: 4 },
          { x: '24%', y: '78%', s: 4 },
          { x: '78%', y: '74%', s: 5 },
          { x: '50%', y: '14%', s: 3 },
          { x: '50%', y: '86%', s: 3 },
        ].map((p, i) => (
          <span key={i} style={{
            position: 'absolute', left: p.x, top: p.y,
            width: p.s, height: p.s, borderRadius: '50%',
            background: accent, opacity: 0.45,
            boxShadow: `0 0 4px ${accent}`,
            transform: 'translate(-50%, -50%)',
          }} />
        ))}
        {/* large ? */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            fontFamily: 'var(--font-display), serif',
            fontStyle: 'italic',
            fontSize: 96, lineHeight: 1, color: accent,
            textShadow: `0 0 24px ${accent}, 0 0 48px rgba(198,255,61,.3)`,
          }}>?</span>
        </div>
      </div>
    );
  }
  return null;
}

function EvolutionTimeline({ accent, mono, zh }) {
  const points = [
    { year: '1960',          sub: '',                 col: 0 },
    { year: '1984',          sub: 'Macintosh 发布',    col: 1 },
    { year: '2022',          sub: 'ChatGPT 发布',      col: 2 },
    { year: 'Unpredictable', sub: '',                 col: 3, future: true },
  ];

  return (
    <div style={{ position: 'relative', marginTop: 32, paddingTop: 6 }}>
      {/* horizontal track + arrow */}
      <div style={{ position: 'relative', height: 1, marginTop: 8, marginBottom: 18 }}>
        <div style={{
          position: 'absolute', left: 0, right: 16, top: 0, height: 1,
          background: `linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.18) 70%, ${accent} 75%, rgba(198,255,61,.55) 100%)`,
        }} />
        <span style={{
          position: 'absolute', right: 0, top: -7,
          fontFamily: mono, fontSize: 12, color: accent, lineHeight: 1,
        }}>→</span>

        {/* dots at column centers (12.5%, 37.5%, 62.5%, 87.5%) */}
        {points.map((p, i) => {
          const left = `${12.5 + p.col * 25}%`;
          const isFuture = p.future;
          return (
            <span key={i} style={{
              position: 'absolute', left, top: -5, transform: 'translateX(-50%)',
              width: 11, height: 11, borderRadius: '50%',
              background: isFuture ? 'transparent' : (i === 2 ? accent : 'rgba(255,255,255,.4)'),
              border: isFuture ? `1.5px dashed ${accent}` : 'none',
              boxShadow: i === 2 ? `0 0 10px ${accent}` : 'none',
            }} />
          );
        })}

        {/* NOW marker — between col 2 and col 3 (75%) */}
        <div style={{
          position: 'absolute', left: '75%', top: -36,
          transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            fontFamily: mono, fontSize: 9.5, letterSpacing: '.32em',
            color: accent, fontWeight: 700,
            padding: '3px 8px',
            border: `1px solid ${accent}`,
            background: 'rgba(0,0,0,.4)',
          }}>NOW</span>
          <span style={{
            width: 0, height: 0,
            borderLeft: '5px solid transparent',
            borderRight: '5px solid transparent',
            borderTop: `6px solid ${accent}`,
          }} />
        </div>
      </div>

      {/* labels row — 4 columns, year on top, sub below */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {points.map((p, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <span style={{
              fontFamily: mono, fontSize: 11, letterSpacing: '.18em',
              color: p.future ? accent : (i === 2 ? '#fff' : 'rgba(255,255,255,.55)'),
            }}>{p.year}</span>
            {p.sub && <span style={{ fontFamily: zh, fontSize: 11, color: 'rgba(255,255,255,.42)' }}>{p.sub}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer({ accent, mono, zh, showTimeline = true, showEpilogue = true, qrSrc = 'uploads/wechat%20QR%20Code.jpeg' }) {
  const [qrHover, setQrHover] = React.useState(false);
  // Slim variant — when both timeline and epilogue are hidden, the section's
  // top dividers (outer + inner-above-Let's-build) don't separate anything,
  // so drop them too.
  const slim = !showTimeline && !showEpilogue;
  return (
    <section data-screen-label="07 Footer" style={{ position: 'relative', padding: '120px 32px 60px', borderTop: slim ? 'none' : '1px solid rgba(255,255,255,.05)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>

        {/* === EVOLUTION OF HCI — paradigm timeline === */}
        {showTimeline && (
        <div style={{ marginBottom: 56 }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 36 }}>
            <span style={{ fontFamily: mono, fontSize: 11, letterSpacing: '.22em', color: accent }}>// EVOLUTION OF HCI</span>
            <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,.08)' }} />
            <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: '.2em', color: 'rgba(255,255,255,.4)' }}>×4 PARADIGMS · 1960 → ?</span>
          </div>

          {/* 4 stage panels */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {STAGES.map((s, i) => (
              <StageColumn key={i} stage={s} accent={accent} mono={mono} zh={zh} />
            ))}
          </div>

          {/* Timeline bar */}
          <EvolutionTimeline accent={accent} mono={mono} zh={zh} />
        </div>
        )}

        {/* === EPILOGUE thesis === */}
        {showEpilogue && (
        <div style={{
          position: 'relative',
          margin: '64px 0 80px',
          padding: '36px 40px 38px',
          border: `1px solid rgba(198,255,61,.22)`,
          background: 'linear-gradient(180deg, rgba(198,255,61,.04), rgba(198,255,61,.015))',
        }}>
          {/* corner ticks */}
          {[[0,0],[1,0],[0,1],[1,1]].map(([x,y], i) => (
            <span key={i} style={{
              position: 'absolute',
              left: x === 0 ? -1 : 'auto', right: x === 1 ? -1 : 'auto',
              top: y === 0 ? -1 : 'auto', bottom: y === 1 ? -1 : 'auto',
              width: 8, height: 8,
              borderTop: y === 0 ? `1px solid ${accent}` : 'none',
              borderBottom: y === 1 ? `1px solid ${accent}` : 'none',
              borderLeft: x === 0 ? `1px solid ${accent}` : 'none',
              borderRight: x === 1 ? `1px solid ${accent}` : 'none',
            }} />
          ))}
          <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
            <span style={{ fontFamily: mono, fontSize: 26, color: accent, lineHeight: 1.1, flexShrink: 0 }}>&gt;</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: '.22em', color: 'rgba(198,255,61,.7)', marginBottom: 16 }}>// EPILOGUE · 设计的悖论</div>
              <div style={{ fontFamily: zh, fontSize: 17, color: 'rgba(255,255,255,.92)', lineHeight: 1.78, letterSpacing: '-.003em' }}>
                AI 时代，我们做的一切似乎都是错的。不管是设计还是 agent，本质都在解决<span style={{ color: accent }}>模型不够强大</span>的问题；但是当它变得足够强大的时候，<span style={{ fontStyle: 'italic', fontFamily: 'var(--font-display), serif', fontSize: 19 }}>一切都是徒劳</span>
              </div>
            </div>
          </div>
        </div>
        )}

        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', paddingTop: 40, borderTop: '1px solid rgba(255,255,255,.06)' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 72, lineHeight: 1, color: '#fff' }}>Let's <span style={{ color: accent }}>build</span>.</div>
          </div>
          <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: '.18em', color: 'rgba(255,255,255,.45)', textAlign: 'right', lineHeight: 2 }}>
            <div><a href="mailto:nczjzhan@gmail.com" style={{ color: 'inherit', textDecoration: 'none' }}>nczjzhan@gmail.com</a></div>
            <div
              onMouseEnter={() => setQrHover(true)}
              onMouseLeave={() => setQrHover(false)}
              style={{
                position: 'relative',
                color: qrHover ? accent : 'rgba(255,255,255,.28)',
                cursor: 'pointer',
                transition: 'color .2s ease',
                display: 'inline-block',
              }}
            >
              / WeChat ID · NCZJZHAN
              {/* QR popup */}
              <div style={{
                position: 'absolute',
                bottom: 'calc(100% + 16px)',
                right: 0,
                width: 188,
                padding: 12,
                background: 'rgba(12,14,18,.96)',
                backdropFilter: 'blur(18px)',
                WebkitBackdropFilter: 'blur(18px)',
                border: `1px solid ${accent}40`,
                borderRadius: 8,
                boxShadow: `0 24px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2)`,
                opacity: qrHover ? 1 : 0,
                visibility: qrHover ? 'visible' : 'hidden',
                transform: qrHover ? 'translateY(0)' : 'translateY(8px)',
                transition: 'opacity .22s ease, visibility .22s, transform .22s ease',
                pointerEvents: 'none',
                zIndex: 100,
                textAlign: 'left',
              }}>
                {/* corner ticks */}
                {[[0,0],[1,0],[0,1],[1,1]].map(([x,y], i) => (
                  <span key={i} style={{
                    position: 'absolute',
                    left: x === 0 ? -1 : 'auto', right: x === 1 ? -1 : 'auto',
                    top: y === 0 ? -1 : 'auto', bottom: y === 1 ? -1 : 'auto',
                    width: 6, height: 6,
                    borderTop: y === 0 ? `1px solid ${accent}` : 'none',
                    borderBottom: y === 1 ? `1px solid ${accent}` : 'none',
                    borderLeft: x === 0 ? `1px solid ${accent}` : 'none',
                    borderRight: x === 1 ? `1px solid ${accent}` : 'none',
                  }} />
                ))}
                {/* QR image */}
                <img
                  src={qrSrc}
                  alt="WeChat QR · nczjzhan"
                  style={{ display: 'block', width: '100%', height: 'auto', borderRadius: 4, background: '#fff' }}
                />
                {/* caption */}
                <div style={{
                  marginTop: 10, paddingTop: 9,
                  borderTop: `1px dashed ${accent}33`,
                  fontFamily: mono, fontSize: 9, letterSpacing: '.28em',
                  color: accent, textAlign: 'center', lineHeight: 1.4,
                }}>
                  SCAN · NCZJZHAN
                </div>
                {/* pointer */}
                <span style={{
                  position: 'absolute', top: '100%', right: 18,
                  width: 0, height: 0,
                  borderLeft: '6px solid transparent',
                  borderRight: '6px solid transparent',
                  borderTop: `7px solid ${accent}40`,
                }} />
                <span style={{
                  position: 'absolute', top: 'calc(100% - 1px)', right: 19,
                  width: 0, height: 0,
                  borderLeft: '5px solid transparent',
                  borderRight: '5px solid transparent',
                  borderTop: `6px solid rgba(12,14,18,.96)`,
                }} />
              </div>
            </div>
            <div style={{ marginTop: 14, color: 'rgba(255,255,255,.25)' }}>© 2026</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TweaksPanel({ tweaks, setTweak, visible }) {
  if (!visible) return null;
  return (
    <div style={{ position: 'fixed', right: 20, bottom: 20, width: 300, zIndex: 1000, padding: 20, borderRadius: 16, background: 'rgba(14,14,18,.88)', border: '1px solid rgba(255,255,255,.12)', backdropFilter: 'blur(20px)', fontFamily: 'var(--font-sans)', fontSize: 12, color: '#fff' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.22em', color: 'rgba(255,255,255,.55)', marginBottom: 14 }}>TWEAKS</div>

      <Row label="Accent">
        <div style={{ display: 'flex', gap: 6 }}>
          {[['lime', '#c6ff3d'], ['blue', '#3b82ff'], ['violet', '#b794ff']].map(([k, v]) => (
            <button key={k} onClick={() => setTweak('accent', v)} style={{ width: 24, height: 24, borderRadius: '50%', background: v, border: tweaks.accent === v ? '2px solid #fff' : '2px solid transparent', cursor: 'pointer', padding: 0 }} />
          ))}
        </div>
      </Row>

      <Row label="Background">
        <select value={tweaks.bg} onChange={e => setTweak('bg', e.target.value)} style={selStyle}>
          <option value="#070708">Pure black</option>
          <option value="#0a0c14">Deep navy</option>
          <option value="radial-gradient(ellipse at top, #0f1119, #060608)">Gradient</option>
        </select>
      </Row>

      <Row label="Font pairing">
        <select value={tweaks.font} onChange={e => setTweak('font', e.target.value)} style={selStyle}>
          <option value="default">Inter + Instrument</option>
          <option value="grotesk">Space Grotesk + Instrument</option>
          <option value="mono">Inter + JetBrains Mono headlines</option>
        </select>
      </Row>

      <Row label="Glass blur">
        <input type="range" min="0" max="40" value={tweaks.blur} onChange={e => setTweak('blur', +e.target.value)} style={{ width: '100%' }} />
      </Row>

      <Row label="Grain">
        <input type="range" min="0" max="40" value={tweaks.grain * 100} onChange={e => setTweak('grain', +e.target.value / 100)} style={{ width: '100%' }} />
      </Row>

      <Row label="Motion">
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
          <input type="checkbox" checked={tweaks.motion} onChange={e => setTweak('motion', e.target.checked)} />
          <span style={{ color: 'rgba(255,255,255,.72)' }}>{tweaks.motion ? 'Animations on' : 'Reduced motion'}</span>
        </label>
      </Row>
    </div>
  );
}

const selStyle = { width: '100%', background: 'rgba(255,255,255,.05)', color: '#fff', border: '1px solid rgba(255,255,255,.12)', borderRadius: 6, padding: '6px 8px', fontSize: 12, fontFamily: 'inherit' };

function Row({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.18em', color: 'rgba(255,255,255,.5)', marginBottom: 6 }}>{label.toUpperCase()}</div>
      {children}
    </div>
  );
}

window.Footer = Footer; window.TweaksPanel = TweaksPanel;