// agenten-page.jsx — /beratung: KI-Beratung (Angebot).
// Hero · Problem→Ergebnis · Angebots-Leiter · Was du bekommst · CTA.

const AG_MAIL = 'hello@kilian-springer.com';

function AgFaqRow({ q, a, i, isFirst, accent }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderTop: isFirst ? `1px solid ${KS.charcoal}` : `1px solid ${KS.border}` }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width: '100%', padding: '20px 0', background: 'transparent', border: 'none', cursor: 'pointer',
          textAlign: 'left', color: 'inherit', fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', gap: 16,
        }}
      >
        <span style={{ fontFamily: KSFonts.mono, fontSize: 12, color: accent, flexShrink: 0, width: 24 }}>0{i + 1}</span>
        <span style={{ flex: 1, fontSize: 17, fontWeight: 700, color: KS.black, letterSpacing: -0.3 }}>{q}</span>
        <span style={{ fontFamily: KSFonts.mono, fontSize: 18, color: KS.muted, transition: 'transform 220ms ease', transform: open ? 'rotate(45deg)' : 'none', lineHeight: 1, flexShrink: 0 }}>+</span>
      </button>
      <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: 'grid-template-rows 280ms ease' }}>
        <div style={{ overflow: 'hidden' }}>
          <p style={{ margin: 0, padding: '0 0 22px 40px', fontSize: 15.5, lineHeight: 1.6, color: KS.charcoal, maxWidth: 640, textWrap: 'pretty' }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function AgentenPage({ lang, setLang, navVariant = 'rule', accent = KS.coral }) {
  const t = AG_COPY[lang];
  const [mobile, setMobile] = React.useState(() => window.innerWidth < 760);
  React.useEffect(() => {
    const h = () => setMobile(window.innerWidth < 760);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);

  const mailHref = `mailto:${AG_MAIL}?subject=${encodeURIComponent(t.ctaMailSubject)}`;
  const wrap = { maxWidth: 1040, margin: '0 auto', padding: mobile ? '0 20px' : '0 32px' };
  const kicker = (txt, col = accent) => (
    <div style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: col, marginBottom: 28 }}>{txt}</div>
  );
  const h2 = (txt) => (
    <h2 style={{ fontSize: mobile ? 30 : 44, fontWeight: 800, letterSpacing: -1.5, lineHeight: 1.02, color: KS.black, margin: 0, textWrap: 'balance' }}>{txt}</h2>
  );

  return (
    <div style={{ minHeight: '100vh', background: KS.offwhite, color: KS.charcoal, fontFamily: KSFonts.body }}>
      <style>{AG_CSS}</style>
      <GlobalNav lang={lang} setLang={setLang} page="agenten" variant={navVariant} accent={accent} />

      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${KS.border}` }}>
        <NodeGraph color={KS.charcoal} opacity={0.06} width={1200} height={560} seed={9} density={42} />
        <div style={{ ...wrap, position: 'relative', padding: mobile ? '76px 20px 84px' : '132px 32px 120px', maxWidth: 900 }}>
          {kicker(t.kicker)}
          <h1 style={{
            fontSize: mobile ? 40 : 74, fontWeight: 800, letterSpacing: mobile ? -1.6 : -3.2,
            lineHeight: 0.98, color: KS.black, margin: 0, marginBottom: 22, textWrap: 'balance',
          }}>
            {t.h1a} <span style={{ color: accent }}>{t.h1b}</span>
          </h1>
          <p style={{ fontSize: mobile ? 16 : 19, lineHeight: 1.55, color: KS.charcoal, margin: 0, marginBottom: 28, maxWidth: 620, textWrap: 'pretty' }}>{t.heroSub}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={mailHref} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: accent, color: '#fff', padding: '15px 26px', fontSize: 15.5, fontWeight: 600, textDecoration: 'none', borderRadius: 8 }}>{t.heroCta}<Icon name="arrow-right" size={16} /></a>
            <a href="steckbrief.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: 'transparent', color: KS.charcoal, border: `1.5px solid ${KS.borderStrong}`, padding: '15px 24px', fontSize: 15, fontWeight: 600, textDecoration: 'none', borderRadius: 8 }}>{t.heroCta2}</a>
          </div>
        </div>
      </section>

      {/* PROBLEM → ERGEBNIS */}
      <section style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
        {kicker(t.probKicker)}
        {h2(t.probTitle)}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 60px 1fr', gap: mobile ? 20 : 12, alignItems: 'stretch', marginTop: 48 }}>
          <div style={{ background: '#fff', border: `1px solid ${KS.border}`, borderRadius: 12, padding: mobile ? '20px' : '26px 28px' }}>
            <div style={{ fontFamily: KSFonts.mono, fontSize: 10.5, letterSpacing: 1.2, textTransform: 'uppercase', color: KS.deepRed, marginBottom: 16 }}>{t.problemLabel}</div>
            <div style={{ display: 'grid', gap: 14 }}>
              {t.problem.map((p, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, fontSize: mobile ? 14.5 : 15, lineHeight: 1.5, color: KS.charcoal }}>
                  <Icon name="x-circle" size={18} style={{ color: KS.deepRed, flexShrink: 0, marginTop: 1 }} />
                  <span style={{ textWrap: 'pretty' }}>{p}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: accent }}>
            <Icon name={mobile ? 'arrow-down' : 'arrow-right'} size={26} />
          </div>
          <div style={{ background: KS.mintWhite, border: `1px solid ${KS.forest}22`, borderRadius: 12, padding: mobile ? '20px' : '26px 28px' }}>
            <div style={{ fontFamily: KSFonts.mono, fontSize: 10.5, letterSpacing: 1.2, textTransform: 'uppercase', color: KS.forest, marginBottom: 16 }}>{t.resultLabel}</div>
            <div style={{ display: 'grid', gap: 14 }}>
              {t.result.map((p, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, fontSize: mobile ? 14.5 : 15, lineHeight: 1.5, color: KS.charcoal }}>
                  <Icon name="check-circle" size={18} style={{ color: KS.forest, flexShrink: 0, marginTop: 1 }} />
                  <span style={{ textWrap: 'pretty' }}>{p}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ANGEBOTS-LEITER / DER WEG */}
      <section style={{ background: '#fff', borderTop: `1px solid ${KS.border}`, borderBottom: `1px solid ${KS.border}` }}>
        <div style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
          {kicker(t.ladderKicker)}
          {h2(t.ladderTitle)}
          <p style={{ fontSize: mobile ? 14.5 : 16, lineHeight: 1.55, color: KS.charcoal, margin: '18px 0 0', maxWidth: 620, textWrap: 'pretty' }}>{t.ladderIntro}</p>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 16, marginTop: 28, alignItems: 'stretch' }}>
            {t.ladder.map((o, i) => (
              <div key={i} style={{
                position: 'relative',
                background: o.highlight ? KS.charcoal : KS.offwhite,
                color: o.highlight ? KS.offwhite : KS.charcoal,
                border: `1px solid ${o.highlight ? KS.charcoal : KS.border}`,
                borderRadius: 14, padding: mobile ? '24px 22px' : '28px 26px',
                display: 'flex', flexDirection: 'column', gap: 12,
                boxShadow: o.highlight ? '0 18px 40px -20px rgba(73,70,72,0.6)' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                  <span style={{ fontFamily: KSFonts.mono, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', color: o.highlight ? accent : KS.muted, border: `1px solid ${o.highlight ? accent : KS.border}`, borderRadius: 999, padding: '3px 10px' }}>{o.tag}</span>
                  <span style={{ fontFamily: KSFonts.mono, fontSize: 12, color: o.highlight ? 'rgba(248,247,246,0.5)' : KS.muted }}>0{i + 1}</span>
                </div>
                <div style={{ fontSize: mobile ? 21 : 23, fontWeight: 800, letterSpacing: -0.5, color: o.highlight ? '#fff' : KS.black }}>{o.name}</div>
                <div style={{ fontFamily: KSFonts.mono, fontSize: o.highlight ? 20 : 14, fontWeight: o.highlight ? 700 : 500, letterSpacing: -0.3, color: o.highlight ? accent : KS.charcoal, marginTop: -4 }}>{o.price}</div>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: o.highlight ? 'rgba(248,247,246,0.8)' : KS.charcoal, flex: 1, textWrap: 'pretty' }}>{o.desc}</p>
                <div style={{ fontFamily: KSFonts.mono, fontSize: 11.5, letterSpacing: 0.3, color: accent, paddingTop: 12, borderTop: `1px solid ${o.highlight ? 'rgba(248,247,246,0.15)' : KS.border}` }}>{o.out}</div>
                {o.cta && (
                  <a href={mailHref} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: accent, color: '#fff', padding: '12px 18px', fontSize: 14, fontWeight: 600, textDecoration: 'none', borderRadius: 7, marginTop: 4 }}>{t.heroCta}<Icon name="arrow-right" size={14} /></a>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WAS DU BEKOMMST */}
      <section style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
        {kicker(t.getKicker)}
        {h2(t.getTitle)}
        <p style={{ fontSize: mobile ? 14.5 : 16, lineHeight: 1.55, color: KS.charcoal, margin: '18px 0 40px', maxWidth: 560, textWrap: 'pretty' }}>{t.getIntro}</p>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
          {t.get.map((g, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, background: '#fff', border: `1px solid ${KS.border}`, borderRadius: 12, padding: '18px 18px' }}>
              <span style={{ width: 38, height: 38, borderRadius: 9, background: KS.offwhite, color: accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 19, flexShrink: 0 }}><Icon name={g.i} /></span>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15, color: KS.black, letterSpacing: -0.2, marginBottom: 3 }}>{g.name}</div>
                <div style={{ fontSize: 13, color: KS.charcoal, lineHeight: 1.45, textWrap: 'pretty' }}>{g.d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ ...wrap, padding: mobile ? '92px 20px' : '144px 32px', textAlign: 'center', background: '#fff', borderTop: `1px solid ${KS.border}`, maxWidth: 'none' }}>
        <div style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{t.ctaKicker}</div>
        <h2 style={{ fontSize: mobile ? 30 : 48, fontWeight: 800, letterSpacing: -1.8, lineHeight: 1.04, color: KS.black, margin: '0 auto 16px', maxWidth: 680, textWrap: 'balance' }}>{t.ctaTitle}</h2>
        <p style={{ fontSize: mobile ? 15 : 17, lineHeight: 1.55, color: KS.charcoal, margin: '0 auto 28px', maxWidth: 540, textWrap: 'pretty' }}>{t.ctaText}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={mailHref} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: accent, color: '#fff', padding: '15px 28px', fontSize: 15.5, fontWeight: 600, textDecoration: 'none', borderRadius: 8 }}>{t.ctaBtn}<Icon name="arrow-right" size={16} /></a>
          <CopyEmailButton label={AG_MAIL} copiedLabel={lang === 'en' ? 'Copied' : 'Kopiert'} email={AG_MAIL} style={{ padding: '15px 20px', fontSize: 12 }} />
        </div>
      </section>

      <SiteFooter lang={lang} page="agenten" maxWidth={1040} />
    </div>
  );
}

const AG_CSS = `
@media (prefers-reduced-motion: reduce) {
  .ag-note, [style*="grid-template-rows"] { transition: none !important; }
}
`;

Object.assign(window, { AgentenPage });