// Two SERP-style article page mocks, designed to match Anthony's site brand
// (Inter + Newsreader, FBFBFD bg, accent #0071E3). Each page renders at a
// fixed 760×540 size so the camera can frame both side-by-side.

const PAGE_W = 760;
const PAGE_H = 560;

// ── Reusable bits ───────────────────────────────────────────────────────────

function FlagDot({ color = '#E5484D' }) {
  return (
    <span style={{
      display: 'inline-block',
      width: 6, height: 6,
      borderRadius: 3,
      background: color,
      marginRight: 6,
      verticalAlign: 'middle',
    }} />
  );
}

// A small floating callout pill that points at a signal on the page.
// Used to highlight what's missing (bad page) or what's working (good page).
function CalloutPill({
  x, y, label, kind = 'good', delay = 0, sprite,
}) {
  // sprite is { localTime } from parent Sprite. We fade in over 0.4s after delay.
  const t = sprite.localTime - delay;
  const op = clamp(t / 0.4, 0, 1);
  const ty = (1 - Easing.easeOutCubic(op)) * 8;

  const isGood = kind === 'good';
  const fg = isGood ? '#0A7B3E' : '#B5252B';
  const bg = isGood ? 'rgba(16, 152, 86, 0.10)' : 'rgba(229, 72, 77, 0.10)';
  const stroke = isGood ? 'rgba(16, 152, 86, 0.45)' : 'rgba(229, 72, 77, 0.42)';
  const icon = isGood ? '✓' : '×';

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `translateY(${ty}px)`,
      opacity: op,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px 6px 10px',
      borderRadius: 999,
      background: bg,
      border: `1px solid ${stroke}`,
      color: fg,
      fontFamily: 'Inter, sans-serif',
      fontSize: 12,
      fontWeight: 600,
      letterSpacing: '-0.005em',
      whiteSpace: 'nowrap',
      backdropFilter: 'blur(8px)',
      WebkitBackdropFilter: 'blur(8px)',
      boxShadow: '0 4px 14px rgba(0,0,0,0.06)',
      pointerEvents: 'none',
    }}>
      <span style={{
        width: 16, height: 16, borderRadius: 8,
        background: fg, color: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 11, fontWeight: 700, lineHeight: 1,
      }}>{icon}</span>
      {label}
    </div>
  );
}

// ── BAD PAGE ────────────────────────────────────────────────────────────────
// Generic, anonymous, no signals. Stock-feeling. Flagged in red.

function BadPage({ sprite }) {
  const t = sprite.localTime;
  // Page tilt-in subtly
  const enter = clamp(t / 0.6, 0, 1);
  const eased = Easing.easeOutCubic(enter);

  return (
    <div style={{
      width: PAGE_W, height: PAGE_H,
      background: '#FBFBFD',
      borderRadius: 14,
      border: '1px solid #E8E8ED',
      boxShadow: '0 30px 80px rgba(0,0,0,0.35), 0 6px 24px rgba(0,0,0,0.18)',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: 'Inter, sans-serif',
      color: '#1D1D1F',
    }}>
      {/* Browser chrome */}
      <div style={{
        height: 36,
        background: '#F5F5F7',
        borderBottom: '1px solid #E8E8ED',
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 14px',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F57' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FEBC2E' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#28C840' }} />
        <div style={{
          marginLeft: 14,
          flex: 1,
          height: 22,
          borderRadius: 6,
          background: '#fff',
          border: '1px solid #E8E8ED',
          display: 'flex', alignItems: 'center',
          padding: '0 10px',
          fontSize: 11,
          color: '#86868B',
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        }}>
          <span style={{ marginRight: 6, opacity: 0.5 }}>🔒</span>
          best-protein-blog.example/top-10-powders
        </div>
      </div>

      {/* Article body */}
      <div style={{ padding: '36px 44px 0', opacity: eased }}>
        {/* No eyebrow, no breadcrumb */}
        <div style={{ height: 14 }} />

        <h1 style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 34,
          fontWeight: 700,
          letterSpacing: '-0.025em',
          lineHeight: 1.1,
          margin: 0,
          color: '#1D1D1F',
        }}>
          Top 10 Best Protein Powders for Runners (2025 Ultimate Guide)
        </h1>

        {/* Byline row */}
        <div style={{
          marginTop: 18,
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 12,
          color: '#86868B',
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 11,
            background: '#E8E8ED',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 10, fontWeight: 600, color: '#86868B',
          }}>?</div>
          <span>By <strong style={{ color: '#86868B', fontWeight: 600 }}>Admin</strong></span>
          <span style={{ width: 3, height: 3, borderRadius: 1.5, background: '#C7C7CC' }} />
          <span style={{ fontStyle: 'italic' }}>No date</span>
          <span style={{ width: 3, height: 3, borderRadius: 1.5, background: '#C7C7CC' }} />
          <span>5 min read</span>
        </div>

        {/* Body lines (placeholders) */}
        <div style={{ marginTop: 26 }}>
          {[100, 96, 92, 100, 88, 70].map((w, i) => (
            <div key={i} style={{
              height: 9,
              width: `${w}%`,
              background: '#E8E8ED',
              borderRadius: 3,
              marginBottom: 10,
            }} />
          ))}
        </div>

        {/* Stock image placeholder */}
        <div style={{
          marginTop: 14,
          height: 110,
          borderRadius: 10,
          background: 'linear-gradient(135deg, #EDEDF1 0%, #DDD8E5 100%)',
          border: '1px solid #E8E8ED',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#86868B',
          fontSize: 11,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          fontWeight: 600,
        }}>
          ◇ Stock image
        </div>

        {/* More body lines */}
        <div style={{ marginTop: 16 }}>
          {[100, 94, 80].map((w, i) => (
            <div key={i} style={{
              height: 9,
              width: `${w}%`,
              background: '#E8E8ED',
              borderRadius: 3,
              marginBottom: 10,
            }} />
          ))}
        </div>
      </div>

      {/* Red flag callouts — appear progressively */}
      <CalloutPill x={70}  y={132} label="No real author" kind="bad" delay={0.6} sprite={sprite} />
      <CalloutPill x={510} y={132} label="No publish date" kind="bad" delay={1.0} sprite={sprite} />
      <CalloutPill x={300} y={358} label="Stock imagery" kind="bad" delay={1.4} sprite={sprite} />
      <CalloutPill x={88}  y={500} label="No sources cited" kind="bad" delay={1.8} sprite={sprite} />
    </div>
  );
}

// ── GOOD PAGE ───────────────────────────────────────────────────────────────
// Real byline, dated, sourced, schema-shimmer overlay, citations.

function GoodPage({ sprite, showSchema = false, showLetterChips = false, letterTime = 0 }) {
  const t = sprite.localTime;
  const enter = clamp(t / 0.6, 0, 1);
  const eased = Easing.easeOutCubic(enter);

  return (
    <div style={{
      width: PAGE_W, height: PAGE_H,
      background: '#FBFBFD',
      borderRadius: 14,
      border: '1px solid #E8E8ED',
      boxShadow: '0 30px 80px rgba(0,0,0,0.35), 0 6px 24px rgba(0,0,0,0.18)',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: 'Inter, sans-serif',
      color: '#1D1D1F',
    }}>
      {/* Browser chrome */}
      <div style={{
        height: 36,
        background: '#F5F5F7',
        borderBottom: '1px solid #E8E8ED',
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 14px',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F57' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FEBC2E' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#28C840' }} />
        <div style={{
          marginLeft: 14,
          flex: 1,
          height: 22,
          borderRadius: 6,
          background: '#fff',
          border: '1px solid #E8E8ED',
          display: 'flex', alignItems: 'center',
          padding: '0 10px',
          fontSize: 11,
          color: '#1D1D1F',
          fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        }}>
          <span style={{ marginRight: 6, color: '#0A7B3E' }}>🔒</span>
          sarahchen-rd.com/protein-runners
        </div>
      </div>

      {/* Article body */}
      <div style={{ padding: '30px 44px 0', opacity: eased, position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          fontSize: 11,
          color: '#86868B',
          marginBottom: 12,
        }}>
          Home / Nutrition / <span style={{ color: '#1D1D1F' }}>Protein for endurance</span>
        </div>

        {/* Eyebrow */}
        <div style={{
          fontSize: 10,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: '#6E6E73',
          fontWeight: 600,
          marginBottom: 14,
        }}>
          NUTRITION · CLINICAL REVIEW
        </div>

        <h1 style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 30,
          fontWeight: 700,
          letterSpacing: '-0.028em',
          lineHeight: 1.08,
          margin: 0,
          color: '#1D1D1F',
        }}>
          Protein powders for runners: what I prescribe my{' '}
          <span style={{
            fontFamily: 'Newsreader, serif',
            fontStyle: 'italic',
            fontWeight: 500,
            color: '#0071E3',
            letterSpacing: '-0.015em',
          }}>marathon clients</span>.
        </h1>

        {/* Rich byline */}
        <div style={{
          marginTop: 20,
          display: 'flex', alignItems: 'center', gap: 12,
          fontSize: 13,
          color: '#424245',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 18,
            background: 'linear-gradient(135deg, #E3E8FA 0%, #D1F5E8 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Newsreader, serif',
            fontStyle: 'italic',
            fontSize: 16, fontWeight: 500,
            color: '#1D1D1F',
            border: '1px solid rgba(0,0,0,0.08)',
          }}>SC</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, lineHeight: 1.2 }}>
            <span>By <strong style={{ color: '#1D1D1F' }}>Sarah Chen, RD</strong> · Sports dietitian</span>
            <span style={{ fontSize: 11, color: '#86868B' }}>
              Published 12 Mar 2026 · Updated 18 Apr · 9 min read
            </span>
          </div>
          <div style={{
            marginLeft: 'auto',
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 9px',
            borderRadius: 999,
            background: 'rgba(16, 152, 86, 0.10)',
            color: '#0A7B3E',
            fontSize: 10,
            fontWeight: 600,
            letterSpacing: '0.04em',
            border: '1px solid rgba(16, 152, 86, 0.3)',
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: 2.5,
              background: '#0A7B3E',
            }} />
            VERIFIED AUTHOR
          </div>
        </div>

        {/* First-person opening callout — Experience signal */}
        <div style={{
          marginTop: 22,
          padding: '14px 18px',
          background: '#fff',
          border: '1px solid #E8E8ED',
          borderLeft: '3px solid #0071E3',
          borderRadius: '4px 10px 10px 4px',
          fontSize: 13,
          lineHeight: 1.55,
          color: '#1D1D1F',
        }}>
          <span style={{ fontFamily: 'Newsreader, serif', fontStyle: 'italic' }}>
            "Over six years and 240 marathon clients, I've watched three powders consistently
            outperform on the long-run recovery window. Here's what the data —{' '}
          </span>
          <span style={{ color: '#0071E3', textDecoration: 'underline', textDecorationColor: 'rgba(0,113,227,0.3)' }}>
            and my own 2:58 Boston
          </span>
          <span style={{ fontFamily: 'Newsreader, serif', fontStyle: 'italic' }}>
            {' '}— actually shows."
          </span>
        </div>

        {/* Body line + citation row */}
        <div style={{ marginTop: 16 }}>
          {[100, 94, 88].map((w, i) => (
            <div key={i} style={{
              height: 8,
              width: `${w}%`,
              background: '#E8E8ED',
              borderRadius: 3,
              marginBottom: 9,
            }} />
          ))}
        </div>

        {/* Citation chips */}
        <div style={{
          marginTop: 16,
          display: 'flex', gap: 8, flexWrap: 'wrap',
        }}>
          {['NIH Study (2024)', 'AND position paper', 'JISSN meta-analysis'].map((c, i) => (
            <span key={i} style={{
              fontSize: 10,
              padding: '4px 9px',
              borderRadius: 5,
              background: 'rgba(0, 113, 227, 0.08)',
              color: '#0071E3',
              border: '1px solid rgba(0, 113, 227, 0.18)',
              fontWeight: 500,
              fontFamily: 'JetBrains Mono, ui-monospace, monospace',
              letterSpacing: '-0.01em',
            }}>↗ {c}</span>
          ))}
        </div>
      </div>

      {/* Schema shimmer overlay (appears in mid-act) */}
      {showSchema && (
        <SchemaOverlay sprite={sprite} />
      )}

      {/* The four E-E-A-T letter chips landing on the right signals */}
      {showLetterChips && (
        <LetterChips letterTime={letterTime} />
      )}
    </div>
  );
}

// Faint code-shimmer overlay revealing the schema graph behind the page
function SchemaOverlay({ sprite }) {
  const t = sprite.localTime;
  // Fade in around localTime 6s and stay
  const op = clamp((t - 6) / 0.8, 0, 0.85);

  return (
    <div style={{
      position: 'absolute',
      right: 22, bottom: 22,
      width: 280,
      padding: '12px 14px',
      borderRadius: 10,
      background: 'rgba(20, 24, 38, 0.92)',
      border: '1px solid rgba(0, 113, 227, 0.4)',
      boxShadow: '0 8px 30px rgba(0, 113, 227, 0.18)',
      fontFamily: 'JetBrains Mono, ui-monospace, monospace',
      fontSize: 10,
      lineHeight: 1.6,
      color: '#9DC8FF',
      opacity: op,
      backdropFilter: 'blur(4px)',
    }}>
      <div style={{
        fontSize: 9,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: '#5C8AC9',
        marginBottom: 6,
        fontWeight: 600,
      }}>schema.org / Article</div>
      <div><span style={{ color: '#5C8AC9' }}>"@type":</span> <span style={{ color: '#FFD580' }}>"Article"</span>,</div>
      <div><span style={{ color: '#5C8AC9' }}>"author":</span> {'{'} <span style={{ color: '#FFD580' }}>"@id"</span>: <span style={{ color: '#9CE5A8' }}>"#sarah-chen"</span> {'}'},</div>
      <div><span style={{ color: '#5C8AC9' }}>"datePublished":</span> <span style={{ color: '#9CE5A8' }}>"2026-03-12"</span>,</div>
      <div><span style={{ color: '#5C8AC9' }}>"sameAs":</span> [ <span style={{ color: '#9CE5A8' }}>"linkedin.com/..."</span> ]</div>
    </div>
  );
}

// The four E-E-A-T chips arrive one by one and land next to the right signal
function LetterChips({ letterTime }) {
  // letterTime is seconds since chips started appearing
  // Land each chip next to the signal it represents on the page
  const items = [
    // Expertise → next to Sarah's credentials (RD, Sports dietitian)
    { letter: 'E', word: 'Expertise',        x: 470, y: 178, color: '#D1F5E8', delay: 0.0 },
    // Experience → next to the first-person quote
    { letter: 'E', word: 'Experience',       x: 38,  y: 286, color: '#E3E8FA', delay: 0.7 },
    // Authoritativeness → next to citation chips
    { letter: 'A', word: 'Authoritativeness',x: 240, y: 432, color: '#EDE4FA', delay: 1.4 },
    // Trust → next to verified-author + secure URL bar
    { letter: 'T', word: 'Trust',            x: 540, y: 32,  color: '#FFE9D6', delay: 2.1 },
  ];

  return (
    <>
      {items.map((it, i) => {
        const local = letterTime - it.delay;
        const op = clamp(local / 0.5, 0, 1);
        const eased = Easing.easeOutBack(clamp(local / 0.5, 0, 1));
        const ty = (1 - eased) * 14;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: it.x, top: it.y,
            transform: `translateY(${ty}px)`,
            opacity: op,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px 6px 6px',
            borderRadius: 999,
            background: '#fff',
            border: '1.5px solid #1D1D1F',
            boxShadow: '0 6px 18px rgba(0,0,0,0.10)',
            fontFamily: 'Inter, sans-serif',
            fontSize: 12,
            fontWeight: 600,
            color: '#1D1D1F',
            pointerEvents: 'none',
          }}>
            <span style={{
              width: 24, height: 24, borderRadius: 12,
              background: it.color,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Newsreader, serif',
              fontStyle: 'italic',
              fontSize: 14, fontWeight: 500,
              color: '#1D1D1F',
            }}>{it.letter}</span>
            {it.word}
          </div>
        );
      })}
    </>
  );
}

Object.assign(window, { BadPage, GoodPage, PAGE_W, PAGE_H });