// Non-hero sections: Nav, Agenda, Hosts, Social proof, Stats, FAQ, Final CTA, Footer

function Nav({ onCTAClick }) {
  return (
    <nav style={{
      padding: '18px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      maxWidth: 1200, margin: '0 auto', width: '100%', boxSizing: 'border-box',
    }}>
      <Logo />
      <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
        <button onClick={onCTAClick} style={{
          padding: '9px 16px',
          background: VP_COLORS.ink, color: '#fff',
          border: 'none', borderRadius: 8,
          fontSize: 13.5, fontWeight: 500,
          fontFamily: "'Inter', sans-serif",
          cursor: 'pointer',
          letterSpacing: '-0.005em',
        }}>
          Platz sichern
        </button>
      </div>
    </nav>
  );
}

function SectionLabel({ children }) {
  return (
    <div style={{
      fontSize: 11.5,
      fontFamily: "'JetBrains Mono', monospace",
      letterSpacing: '0.1em',
      textTransform: 'uppercase',
      color: VP_COLORS.accent,
      marginBottom: 14,
    }}>
      → {children}
    </div>
  );
}

function Agenda() {
  const items = [
    { t: '00:00', h: 'Willkommen & Kurzvorstellung', d: 'Wer wir sind, was dich erwartet.' },
    { t: '05:00', h: 'Das Problem: Ausschreibungssuche heute', d: 'Warum die meisten Portale dich bremsen statt helfen.' },
    { t: '12:00', h: 'Live-Demo: Vergabepilot.AI in Aktion', d: '300+ Portale in einer Suche. KI-Bewertung in < 5 Minuten.' },
    { t: '30:00', h: 'Praxis-Tipps & Use Cases', d: 'Wie unsere Kunden die Plattform im Alltag einsetzen.' },
    { t: '38:00', h: 'Deine Fragen. Live.', d: 'Wir beantworten alles, was du zu Ausschreibungen wissen willst.' },
  ];
  return (
    <section style={{ padding: '96px 0', background: VP_COLORS.paper }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <div className="vp-agenda-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div className="vp-sticky" style={{ position: 'sticky', top: 32 }}>
            <SectionLabel>Agenda</SectionLabel>
            <h2 style={{
              fontFamily: "'Inter', sans-serif",
              fontSize: 40, fontWeight: 600,
              letterSpacing: '-0.025em', lineHeight: 1.05,
              color: VP_COLORS.ink, margin: '0 0 16px',
              textWrap: 'balance',
            }}>
              Was dich in 45 Minuten erwartet.
            </h2>
            <p style={{
              fontSize: 16, lineHeight: 1.6,
              color: VP_COLORS.inkSoft, margin: 0,
              maxWidth: 380,
            }}>
              Keine oberflächliche Präsentation – eine echte Live-Demo mit Fokus
              auf die Arbeitsabläufe, die du ab morgen einsetzen kannst.
            </p>
          </div>

          <div style={{
            borderLeft: `1px solid ${VP_COLORS.line}`,
            paddingLeft: 0,
          }}>
            {items.map((it, i) => (
              <div key={i} className="vp-agenda-item" style={{
                display: 'grid', gridTemplateColumns: '80px 1fr',
                padding: '20px 0 20px 28px',
                borderBottom: i < items.length - 1 ? `1px solid ${VP_COLORS.lineSoft}` : 'none',
                position: 'relative',
                marginLeft: -1,
              }}>
                <span style={{
                  position: 'absolute', left: -5, top: 26,
                  width: 9, height: 9, borderRadius: '50%',
                  background: i === 0 ? VP_COLORS.accent : VP_COLORS.paper,
                  border: `1px solid ${i === 0 ? VP_COLORS.accent : VP_COLORS.line}`,
                }}/>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 12.5,
                  color: VP_COLORS.inkMuted,
                  letterSpacing: '0.02em',
                  paddingTop: 3,
                }}>{it.t}</span>
                <div>
                  <div style={{
                    fontFamily: "'Inter', sans-serif",
                    fontSize: 17, fontWeight: 600,
                    color: VP_COLORS.ink, marginBottom: 4,
                    letterSpacing: '-0.01em',
                  }}>{it.h}</div>
                  <div style={{
                    fontSize: 14.5, lineHeight: 1.55,
                    color: VP_COLORS.inkSoft,
                  }}>{it.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductPreview() {
  return (
    <section style={{
      padding: '96px 0',
      background: VP_COLORS.paper,
      borderTop: `1px solid ${VP_COLORS.lineSoft}`,
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>Das siehst du live</SectionLabel>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 40, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.05,
            color: VP_COLORS.ink, margin: '0 auto 14px',
            maxWidth: 720, textWrap: 'balance',
          }}>
            Ein Blick in die Plattform, bevor du sie selbst testest.
          </h2>
          <p style={{
            fontSize: 16, lineHeight: 1.6,
            color: VP_COLORS.inkSoft,
            margin: '0 auto', maxWidth: 560,
          }}>
            Im Webinar zeigen wir dir die gesamte Oberfläche — hier schon mal ein Vorgeschmack.
          </p>
        </div>

        {/* Screenshot with callouts */}
        <div className="vp-preview-wrap" style={{
          position: 'relative',
          background: '#fff',
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 16,
          padding: 10,
          boxShadow: '0 1px 2px rgba(18,24,40,.04), 0 24px 60px -24px rgba(18,24,40,.22)',
          margin: '0 auto',
          maxWidth: 1100,
        }}>
          <img
            className="vp-preview-img-desktop"
            src="assets/vergabe-ss.png"
            alt="Vergabepilot.AI Plattform-Oberfläche mit Filter, Suchergebnissen und KI-Scoring"
            style={{
              display: 'block', width: '100%', height: 'auto',
              borderRadius: 8,
              border: `1px solid ${VP_COLORS.lineSoft}`,
            }}
          />
          <img
            className="vp-preview-img-mobile"
            src="assets/vergabe-ss-mobile.png"
            alt="Vergabepilot.AI Plattform-Oberfläche auf dem Smartphone"
            style={{
              display: 'none', width: '100%', maxWidth: 380, margin: '0 auto',
              height: 'auto',
              borderRadius: 8,
              border: `1px solid ${VP_COLORS.lineSoft}`,
            }}
          />

          {/* Callouts — positioned as % of the image */}
          <Callout className="vp-callout-a" style={{ top: '2%',  left: '18%' }}
            dir="down" label="KI-Suche"
            text="Beschreibe in eigenen Worten, wonach du suchst." />
          <Callout className="vp-callout-b" style={{ top: '38%', left: '-2%' }}
            dir="right" label="Smarte Filter"
            text="Zeitraum, Region, CPV, Auftraggeber — kombinierbar." />
          <Callout className="vp-callout-c" style={{ top: '14%', right: '-2%' }}
            dir="left" label="Ergebnisliste"
            text="13.078 durchsuchte Ausschreibungen, tagesaktuell." />
        </div>

        {/* Legend for mobile (callouts hidden there) */}
        <div className="vp-preview-legend" style={{
          display: 'none',
          marginTop: 24,
          gap: 16,
          flexDirection: 'column',
        }}>
          <LegendRow n="1" label="KI-Suche" text="Beschreibe in eigenen Worten, wonach du suchst." />
          <LegendRow n="2" label="Smarte Filter" text="Zeitraum, Region, CPV, Auftraggeber — kombinierbar." />
          <LegendRow n="3" label="Ergebnisliste" text="13.078 durchsuchte Ausschreibungen, tagesaktuell." />
        </div>
      </div>
    </section>
  );
}

function Callout({ style, dir, label, text, className }) {
  return (
    <div className={className} style={{
      position: 'absolute',
      ...style,
      zIndex: 2,
      background: '#fff',
      border: `1px solid ${VP_COLORS.line}`,
      borderRadius: 12,
      padding: '10px 14px',
      maxWidth: 220,
      boxShadow: '0 1px 2px rgba(18,24,40,.04), 0 8px 24px -8px rgba(18,24,40,.18)',
      fontFamily: "'Inter', sans-serif",
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 11,
        fontFamily: "'JetBrains Mono', monospace",
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: VP_COLORS.accent,
        marginBottom: 4,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: VP_COLORS.accent,
        }}/>
        {label}
      </div>
      <div style={{
        fontSize: 13, lineHeight: 1.4,
        color: VP_COLORS.ink,
      }}>
        {text}
      </div>
    </div>
  );
}

function LegendRow({ n, label, text }) {
  return (
    <div style={{
      display: 'flex', gap: 14, alignItems: 'flex-start',
      background: '#fff',
      border: `1px solid ${VP_COLORS.line}`,
      borderRadius: 12,
      padding: 14,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: VP_COLORS.accent, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 13, fontWeight: 600,
        fontFamily: "'JetBrains Mono', monospace",
        flexShrink: 0,
      }}>{n}</div>
      <div>
        <div style={{
          fontSize: 11,
          fontFamily: "'JetBrains Mono', monospace",
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: VP_COLORS.accent,
          marginBottom: 4,
        }}>{label}</div>
        <div style={{ fontSize: 14, lineHeight: 1.45, color: VP_COLORS.ink }}>{text}</div>
      </div>
    </div>
  );
}

function Hosts() {
  return (
    <section style={{
      padding: '96px 0',
      background: VP_COLORS.paperWarm,
      borderTop: `1px solid ${VP_COLORS.lineSoft}`,
      borderBottom: `1px solid ${VP_COLORS.lineSoft}`,
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px', textAlign: 'center' }}>
        <SectionLabel>Deine Hosts</SectionLabel>
        <h2 style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: 40, fontWeight: 600,
          letterSpacing: '-0.025em', lineHeight: 1.05,
          color: VP_COLORS.ink, margin: '0 auto 14px',
          maxWidth: 640, textWrap: 'balance',
        }}>
          Geführt von den Menschen, die Vergabepilot.AI jeden Tag bauen.
        </h2>
        <p style={{
          fontSize: 16, lineHeight: 1.6,
          color: VP_COLORS.inkSoft,
          margin: '0 auto 56px', maxWidth: 560,
        }}>
          Kein Sales-Pitch. Direkte Einblicke von Produkt & Customer Success.
        </p>

        <div className="vp-hosts-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {HOSTS.map((h, i) => (
            <div key={i} style={{
              background: '#fff',
              border: `1px solid ${VP_COLORS.line}`,
              borderRadius: 16,
              padding: '32px 24px',
              textAlign: 'center',
            }}>
              <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'center' }}>
                <HostAvatar name={h.name} photo={h.photo} color={h.color} size={84} />
              </div>
              <div style={{
                fontFamily: "'Inter', sans-serif",
                fontSize: 17, fontWeight: 600,
                color: VP_COLORS.ink,
                letterSpacing: '-0.01em',
                marginBottom: 4,
              }}>{h.name}</div>
              <div style={{
                fontSize: 13.5, color: VP_COLORS.inkMuted,
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: '0.01em',
              }}>{h.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section style={{ padding: '72px 0', background: VP_COLORS.paper }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <div className="vp-stats-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 16,
          overflow: 'hidden',
          background: '#fff',
        }}>
          {STATS.map((s, i) => (
            <div key={i} style={{
              padding: '36px 28px',
              borderRight: i < STATS.length - 1 ? `1px solid ${VP_COLORS.lineSoft}` : 'none',
              textAlign: 'center',
            }}>
              <div style={{
                fontFamily: "'Inter', sans-serif",
                fontSize: 42, fontWeight: 600,
                letterSpacing: '-0.03em',
                color: VP_COLORS.ink,
                lineHeight: 1,
                marginBottom: 10,
              }}>{s.n}</div>
              <div style={{
                fontSize: 13, color: VP_COLORS.inkSoft,
                lineHeight: 1.4,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  return (
    <section style={{
      padding: '96px 0',
      background: VP_COLORS.paperWarm,
      borderTop: `1px solid ${VP_COLORS.lineSoft}`,
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SectionLabel>Stimmen unserer Kunden</SectionLabel>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 40, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.05,
            color: VP_COLORS.ink, margin: '0 auto',
            maxWidth: 640, textWrap: 'balance',
          }}>
            Warum über 400 Unternehmen auf Vergabepilot.AI vertrauen.
          </h2>
        </div>

        <div className="vp-proof-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} style={{
              background: '#fff',
              border: `1px solid ${VP_COLORS.line}`,
              borderRadius: 16,
              padding: '28px 26px',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                fontSize: 28, lineHeight: 1,
                color: VP_COLORS.accent, marginBottom: 12,
                fontFamily: 'Georgia, serif',
              }}>“</div>
              <p style={{
                fontSize: 15.5, lineHeight: 1.55,
                color: VP_COLORS.ink, margin: '0 0 24px',
                flex: 1, textWrap: 'pretty',
              }}>{t.quote}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <HostAvatar name={t.name} photo={t.photo} color={t.color} size={40} />
                <div>
                  <div style={{
                    fontSize: 14, fontWeight: 600,
                    color: VP_COLORS.ink,
                    letterSpacing: '-0.005em',
                  }}>{t.name}</div>
                  <div style={{ fontSize: 12.5, color: VP_COLORS.inkMuted }}>{t.company}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '96px 0', background: VP_COLORS.paper, borderTop: `1px solid ${VP_COLORS.lineSoft}` }}>
      <div style={{ maxWidth: 820, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>FAQ</SectionLabel>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 40, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.05,
            color: VP_COLORS.ink, margin: 0,
            textWrap: 'balance',
          }}>
            Häufige Fragen zum Webinar.
          </h2>
        </div>

        <div style={{
          border: `1px solid ${VP_COLORS.line}`,
          borderRadius: 14,
          background: '#fff',
          overflow: 'hidden',
        }}>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: i < FAQS.length - 1 ? `1px solid ${VP_COLORS.lineSoft}` : 'none',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  padding: '20px 24px',
                  background: 'transparent', border: 'none', outline: 'none',
                  WebkitTapHighlightColor: 'transparent',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  gap: 24,
                  cursor: 'pointer',
                  fontFamily: "'Inter', sans-serif",
                }}>
                  <span style={{
                    fontSize: 16, fontWeight: 500,
                    color: VP_COLORS.ink,
                    letterSpacing: '-0.005em',
                  }}>{f.q}</span>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: isOpen ? VP_COLORS.ink : VP_COLORS.lineSoft,
                    color: isOpen ? '#fff' : VP_COLORS.inkSoft,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                    transition: 'background .15s',
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
                      <line x1="1" y1="5" x2="9" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                      {!isOpen && <line x1="5" y1="1" x2="5" y2="9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>}
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 220 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .28s ease',
                }}>
                  <div style={{
                    padding: '0 24px 22px',
                    fontSize: 15, lineHeight: 1.6,
                    color: VP_COLORS.inkSoft,
                    maxWidth: 680,
                  }}>{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onSubmit }) {
  return (
    <section style={{
      padding: '96px 0',
      background: VP_COLORS.ink,
      color: '#fff',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '-40%', right: '-10%',
        width: 600, height: 600, borderRadius: '50%',
        background: `radial-gradient(circle, oklch(0.52 0.17 255 / 0.35) 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>
      <div className="vp-cta-grid" style={{
        maxWidth: 1000, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
        alignItems: 'center', position: 'relative',
      }}>
        <div>
          <div style={{
            fontSize: 11.5,
            fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: '0.1em', textTransform: 'uppercase',
            color: 'oklch(0.80 0.12 255)',
            marginBottom: 16,
          }}>→ Letzter Aufruf</div>
          <h2 style={{
            fontFamily: "'Inter', sans-serif",
            fontSize: 44, fontWeight: 600,
            letterSpacing: '-0.028em', lineHeight: 1.02,
            margin: '0 0 18px', color: '#fff',
            textWrap: 'balance',
          }}>
            Sichere dir jetzt deinen Platz.
          </h2>
          <p style={{
            fontSize: 16.5, lineHeight: 1.55,
            color: 'rgba(255,255,255,.7)',
            margin: '0 0 24px', maxWidth: 440,
          }}>
            Kostenlos. Ohne Verpflichtung. Inklusive 2-wöchiger Testphase nach dem Webinar.
          </p>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '12px 14px',
            background: 'rgba(255,255,255,.04)',
            border: '1px solid rgba(255,255,255,.1)',
            borderRadius: 10,
            maxWidth: 440,
          }}>
            <span style={{ fontSize: 16 }}>🇩🇪</span>
            <span style={{ fontSize: 13, color: 'rgba(255,255,255,.75)' }}>
              Made in Germany · DSGVO-konform · Ciconia Systems GmbH
            </span>
          </div>
        </div>
        <div style={{
          background: 'rgba(255,255,255,.04)',
          border: '1px solid rgba(255,255,255,.1)',
          borderRadius: 16,
          padding: 26,
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
        }}>
          <RegistrationForm inverse onSubmit={onSubmit} />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: '48px 32px 40px',
      background: VP_COLORS.paper,
      borderTop: `1px solid ${VP_COLORS.lineSoft}`,
    }}>
      <div className="vp-footer-inner" style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, flexWrap: 'wrap',
      }}>
        <Logo size={18} />
        <div className="vp-footer-links" style={{
          display: 'flex', gap: 24,
          fontSize: 13, color: VP_COLORS.inkMuted,
          flexWrap: 'wrap',
        }}>
          <a href="https://www.vergabepilot.ai/impressum" style={{ color: 'inherit', textDecoration: 'none' }}>Impressum</a>
          <a href="https://www.vergabepilot.ai/datenschutz" style={{ color: 'inherit', textDecoration: 'none' }}>Datenschutz</a>
          <a href="https://www.vergabepilot.ai/agb" style={{ color: 'inherit', textDecoration: 'none' }}>AGB</a>
          <a href="mailto:support@vergabepilot.ai" style={{ color: 'inherit', textDecoration: 'none' }}>Support</a>
        </div>
        <div className="vp-footer-copy" style={{ fontSize: 12, color: VP_COLORS.inkMuted }}>
          © 2026 Ciconia Systems GmbH
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Agenda, Hosts, Stats, SocialProof, FAQ, FinalCTA, Footer });