function PhoneMockup() {
  // Per-logo width tuning for perceptual-equal optical mass.
  // Cap-height target ~17-22px across all 4 logos → wordmarks shorter,
  // squares slightly bigger. Calculated from each SVG's content-density
  // + aspect ratio.
  const frames = [
    { logo: 'assets/logos/Toyota.svg', alt: 'Toyota',     w: 50,  subject: 'Toyota: We will not survive',              preview: 'Der weltgrößte Autobauer warnt sich selbst.' },
    { logo: 'assets/logos/BYD.svg',    alt: 'BYD',        w: 105, subject: 'BYD stürzt ab. Chinas Plan.',              preview: 'Warum der Absturz BYD stärker macht, nicht schwächer.' },
    { logo: 'assets/logos/VW.svg',     alt: 'Volkswagen', w: 50,  subject: 'Goodbye Deutschland. VW baut woanders.',   preview: 'Halbierter Gewinn. 50.000 Stellen weg.' },
    { logo: 'assets/logos/Tesla.svg',  alt: 'Tesla',      w: 170, subject: 'Tesla stirbt als Autohersteller.',         preview: 'Der EV-Pionier rückt vom Auto weg.' },
  ];

  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setActive(i => (i + 1) % frames.length), 4000);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="phone-mockup" aria-hidden="true">
      <div className="phone-mockup-screen">
        <span className="phone-mockup-notch"></span>
        <div className="phone-mockup-toolbar">
          <span className="phone-mockup-toolbar-back">‹</span>
          <span className="phone-mockup-toolbar-icons">
            <span className="phone-mockup-toolbar-dot"></span>
            <span className="phone-mockup-toolbar-dot"></span>
            <span className="phone-mockup-toolbar-dot"></span>
          </span>
        </div>
        <div className="phone-mockup-sender">
          <img className="phone-mockup-avatar" src="assets/philipp-avatar.jpg" alt="" />
          <div className="phone-mockup-sender-meta">
            <div className="phone-mockup-sender-name">Philipp Raasch</div>
            <div className="phone-mockup-sender-sub">Der Autopreneur · Sonntag, 7:00</div>
          </div>
        </div>
        {frames.map((f, i) => (
          <div key={i} className={`phone-frame ${i === active ? 'active' : ''}`}>
            <div className="phone-frame-brand">
              <img src={f.logo} alt={f.alt} style={{ width: `${f.w}px`, height: 'auto' }} />
            </div>
            <h4 className="phone-frame-subject">{f.subject}</h4>
            <div className="phone-frame-preview">{f.preview}</div>
            <div className="phone-frame-body">
              <span className="phone-frame-body-line" style={{ width: '94%' }}></span>
              <span className="phone-frame-body-line" style={{ width: '88%' }}></span>
              <span className="phone-frame-body-line" style={{ width: '92%' }}></span>
              <span className="phone-frame-body-line" style={{ width: '76%' }}></span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.PhoneMockup = PhoneMockup;