function Routes() {
  const R = window.ROUTES;

  const cards = [
    {
      primary: true,
      eyebrow: 'Partnership',
      title: (<>Du verkaufst an <em>Automotive-Entscheider</em>.</>),
      body: 'Ich kenne sie. Und sie hören mir zu.',
      cta: { href: R.partnershipDe, label: 'Partnership erkunden →' },
      lang: (
        <div className="route-lang" style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-4)', marginTop: 4 }}>
          Auch auf <a href={R.partnershipEn} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-3)', textDecoration: 'underline' }}>EN</a> · <a href={R.partnershipCn} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-3)', textDecoration: 'underline' }}>中文</a>
        </div>
      ),
    },
    {
      primary: true,
      isNewsletterWidget: true,
      eyebrow: 'Newsletter',
      title: 'Du willst wissen, was wirklich passiert.',
      body: 'Jeden Sonntag. Eingeordnet, nicht zusammengefasst.',
      lang: (
        <div className="route-lang" style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-4)', marginTop: 6 }}>
          <a href={R.newsletterEn} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-3)', textDecoration: 'underline' }}>🇬🇧 English Edition →</a>
        </div>
      ),
    },
    {
      eyebrow: 'Kontakt',
      title: 'Etwas anderes? Schreib mir.',
      body: 'Direkte Anfrage. Ich antworte persönlich.',
      cta: { href: R.contactForm, label: 'Kontaktformular →' },
    },
    {
      eyebrow: 'Insider-Tip',
      title: 'Du weißt was, das die Branche wissen sollte.',
      body: 'Anonyme Nachricht. Ich nenne keine Quellen.',
      cta: { href: R.anonymous, label: 'Anonym senden →' },
    },
  ];

  return (
    <section className="routes" style={{ padding: '40px 0 80px', background: '#fff' }}>
      <div className="container">
        <div className="routes-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {cards.map((c, i) => <RouteCard key={i} {...c} />)}
        </div>
        <div className="routes-press" style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-default)', textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-3)' }}>
          Presse-Anfrage? <a href={R.presse} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500, marginLeft: 4 }}>Media Kit · Bio · Headshots →</a>
        </div>
      </div>
    </section>
  );
}

function RouteCard({ primary, isNewsletterWidget, eyebrow, title, body, cta, lang }) {
  const cardClass = primary ? 'route-card route-card--primary' : 'route-card';
  const cardStyle = {
    padding: 28,
    borderRadius: 12,
    border: '1px solid var(--border-default)',
    background: primary ? 'rgba(81,128,250,0.08)' : '#fff',
    borderColor: primary ? 'rgba(81,128,250,0.18)' : 'var(--border-default)',
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    transition: 'border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out)',
  };
  return (
    <div className={cardClass} style={cardStyle}>
      <div className="section-eyebrow"><span className="kicker-line"></span>{eyebrow}</div>
      <h3 className="section-title" style={{ fontSize: 'clamp(19px, 1.6vw, 22px)', lineHeight: 1.3, margin: 0 }}>
        {title}
      </h3>
      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--fg-2)', margin: 0 }}>
        {body}
      </p>
      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 10 }}>
        {isNewsletterWidget ? (
          <NewsletterForm />
        ) : (
          <a href={cta.href} target="_blank" rel="noopener noreferrer" className="route-cta" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--ap-blue)', textDecoration: 'none' }}>
            {cta.label}
          </a>
        )}
        {lang}
      </div>
    </div>
  );
}

function NewsletterForm() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error
  const [errorMsg, setErrorMsg] = React.useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus('loading');
    setErrorMsg('');
    try {
      const r = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim() }),
      });
      const data = await r.json().catch(() => ({}));
      if (r.ok && data.ok) {
        setStatus('success');
      } else {
        setStatus('error');
        setErrorMsg(data.error || 'Etwas ist schiefgelaufen. Versuch es nochmal.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Netzwerkfehler. Versuch es nochmal.');
    }
  };

  if (status === 'success') {
    return (
      <div role="status" style={{
        padding: '14px 16px',
        borderRadius: 12,
        background: 'rgba(22,160,133,0.10)',
        border: '1px solid rgba(22,160,133,0.30)',
        color: 'var(--fg-1)',
        fontFamily: 'var(--font-sans)',
        fontSize: 14,
        lineHeight: 1.5,
      }}>
        ✓ Eingetragen. Bitte bestätige den Link in der Mail, die du gleich bekommst.
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="newsletter-form" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <input
          type="email"
          name="email"
          placeholder="dein@email.de"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          disabled={status === 'loading'}
          style={{
            flex: '1 1 200px',
            minWidth: 0,
            padding: '11px 14px',
            fontFamily: 'var(--font-sans)',
            fontSize: 15,
            border: '1px solid var(--border-default)',
            borderRadius: 12,
            outline: 'none',
            background: '#fff',
            color: 'var(--fg-1)',
          }}
        />
        <button
          type="submit"
          className="btn btn-primary"
          disabled={status === 'loading'}
          style={{ padding: '10px 20px', fontSize: 14, cursor: status === 'loading' ? 'wait' : 'pointer', opacity: status === 'loading' ? 0.7 : 1 }}
        >
          {status === 'loading' ? '…' : 'Abonnieren'}
        </button>
      </div>
      {status === 'error' && (
        <div role="alert" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: '#c0392b' }}>
          {errorMsg}
        </div>
      )}
    </form>
  );
}

window.Routes = Routes;