/* Founder profile + Contact section */

function Founder() {
  return (
    <section id="founder" className="section">
      <div className="container">
        <SectionHeader
          kicker="Gründer"
          num="06"
          title={<>Eine Person.<br /><span style={{ color: 'var(--on-surface-variant)' }}>Eine Plattform im Aufbau.</span></>}
          intro="RICS Analytics ist ein junges Unternehmen. Die Plattform wird gegenwärtig vom Gründer aufgebaut, mit ausgewählten Pilotkunden in der Frühphase. Wer früh einsteigt, gestaltet die nächsten Berichtsformate aktiv mit."
        />

        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64, alignItems: 'start' }}>
          {/* Portrait placeholder */}
          <Reveal>
            <div>
              <div style={{
                aspectRatio: '4 / 5',
                background: 'repeating-linear-gradient(135deg, var(--surface-low) 0 8px, var(--surface-lowest) 8px 16px)',
                position: 'relative',
                marginBottom: 24,
              }}>
                <div className="mono" style={{ position: 'absolute', bottom: 16, left: 16, fontSize: 10, letterSpacing: '0.16em', color: 'var(--on-surface-quiet)', textTransform: 'uppercase' }}>
                  Porträt · s/w · Platzhalter
                </div>
              </div>
              <div className="label" style={{ marginBottom: 10 }}>Öffentlich</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <a href="https://www.tradingview.com/u/Phillipklh/" target="_blank" rel="noopener noreferrer"
                   style={{ fontSize: 13, color: 'var(--on-surface)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  TradingView · @Phillipklh <span style={{ color: 'var(--on-surface-dim)' }}>↗</span>
                </a>
                <a href="#" style={{ fontSize: 13, color: 'var(--on-surface-variant)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  LinkedIn <span style={{ color: 'var(--on-surface-dim)' }}>↗</span>
                </a>
                <a href="#" style={{ fontSize: 13, color: 'var(--on-surface-variant)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  Substack <span style={{ color: 'var(--on-surface-dim)' }}>↗</span>
                </a>
              </div>
            </div>
          </Reveal>

          {/* Bio */}
          <Reveal delay={120}>
            <div>
              <h3 className="display-sm" style={{ margin: 0, fontSize: 'clamp(32px, 3.4vw, 48px)', letterSpacing: '-0.025em', color: 'var(--primary)', fontWeight: 500 }}>
                Phillip Kölsche
              </h3>
              <div className="mono" style={{ fontSize: 11, marginTop: 14, color: 'var(--on-surface-dim)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                Gründer · Inhaber · Lead Analyst
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 24, marginTop: 40, maxWidth: 560 }}>
                <p className="body" style={{ margin: 0, fontSize: 16, lineHeight: 1.65 }}>
                  Phillip Kölsche gründete RICS Analytics 2026 mit dem Ziel, geopolitische Analyse für Investoren falsifizierbar zu machen. Der Hintergrund ist eigene Kapitalmarktarbeit — nicht akademische Politologie — und damit die Frage, die jede Veröffentlichung leitet: <em style={{ fontStyle: 'normal', color: 'var(--on-surface)' }}>was bedeutet das für die Position?</em>
                </p>
                <p className="body" style={{ margin: 0, fontSize: 16, lineHeight: 1.65 }}>
                  Alle Analysen, Reports und Markteinschätzungen erscheinen ausschließlich auf dieser Plattform — strukturiert, mit Datum und falsifizierbarem Cutoff.
                </p>
                <p className="body" style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--on-surface-dim)' }}>
                  RICS Analytics befindet sich im Aufbau. Die Plattform wird schrittweise erweitert — mit Berichtsformaten, die gemeinsam mit frühen Partnern entwickelt werden.
                </p>
              </div>

              <div style={{ marginTop: 56, padding: '28px 32px', background: 'var(--surface-low)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <div>
                  <div className="label" style={{ marginBottom: 12 }}>Pilotphase</div>
                  <div style={{ fontSize: 15, color: 'var(--on-surface)' }}>Q2 – Q3 2026</div>
                  <div className="body-sm" style={{ fontSize: 12, color: 'var(--on-surface-dim)', marginTop: 6 }}>
                    Ausgewählte Erstkunden · Konditionen auf Anfrage
                  </div>
                </div>
                <div>
                  <div className="label" style={{ marginBottom: 12 }}>Plattformstatus</div>
                  <div style={{ fontSize: 15, color: 'var(--on-surface)' }}>Im Aufbau</div>
                  <div className="body-sm" style={{ fontSize: 12, color: 'var(--on-surface-dim)', marginTop: 6 }}>
                    Frühe Einsteiger gestalten Berichtsformate mit
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function Contact() {
  const [form, setForm] = useState({ name: '', email: '', company: '', message: '', interest: 'Beispielbericht' });
  const [submitted, setSubmitted] = useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const interests = ['Beispielbericht', 'Pilot-Mandat', 'White-Label', 'Allgemeine Anfrage'];

  return (
    <section id="contact" className="section" style={{ background: 'var(--surface-lowest)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64 }}>
          {/* Left column — the statement */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>
              <span className="label">Kontakt</span>
              <span className="label" style={{ color: 'var(--on-surface-quiet)' }}>/ 07</span>
            </div>
            <h2 className="display-md" style={{ margin: 0, color: 'var(--primary)', fontSize: 'clamp(40px, 5vw, 72px)' }}>
              Bringen Sie eine<br />
              <span style={{ color: 'var(--on-surface-variant)' }}>offene Frage.</span>
            </h2>
            <p className="body" style={{ marginTop: 36, maxWidth: 400, fontSize: 15 }}>
              Wir antworten innerhalb eines Werktags. Auf Wunsch senden wir Ihnen einen aktuellen Beispielbericht zur Einordnung, bevor das erste Gespräch stattfindet.
            </p>

            <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 28 }}>
              <div>
                <div className="label" style={{ marginBottom: 10 }}>Direkt</div>
                <a href="mailto:support@ricsanalytics.de" style={{ fontSize: 17, color: 'var(--on-surface)' }}>support@ricsanalytics.de</a>
              </div>
              <div>
                <div className="label" style={{ marginBottom: 10 }}>Anschrift</div>
                <div style={{ fontSize: 14, color: 'var(--on-surface-variant)', lineHeight: 1.55 }}>
                  RICS Analytics<br />
                  Inhaber Phillip Kölsche<br />
                  Gummersbach · Nordrhein-Westfalen
                </div>
              </div>
              <div>
                <div className="label" style={{ marginBottom: 10 }}>Presse</div>
                <a href="mailto:phillip@ricsanalytics.de" style={{ fontSize: 13, color: 'var(--on-surface-variant)' }}>phillip@ricsanalytics.de</a>
              </div>
            </div>
          </div>

          {/* Right column — form */}
          <div>
            {!submitted ? (
              <form onSubmit={submit} style={{ background: 'var(--surface-low)', padding: 48 }}>
                <div className="label" style={{ marginBottom: 28, color: 'var(--on-surface-dim)' }}>
                  Anfrage &nbsp;·&nbsp; vier Felder
                </div>

                {/* Interest selector — segmented */}
                <div style={{ marginBottom: 24 }}>
                  <label className="label" style={{ display: 'block', marginBottom: 10 }}>Anliegen</label>
                  <div style={{ display: 'flex', gap: 1, background: 'var(--ghost-strong)' }}>
                    {interests.map((it) => (
                      <button key={it} type="button"
                        onClick={() => setForm({ ...form, interest: it })}
                        style={{
                          flex: 1, padding: '12px 8px',
                          background: form.interest === it ? 'var(--surface-highest)' : 'var(--surface-lowest)',
                          color: form.interest === it ? 'var(--on-surface)' : 'var(--on-surface-dim)',
                          border: 0, fontSize: 12, letterSpacing: '-0.005em',
                          transition: 'background 160ms ease, color 160ms ease',
                        }}>
                        {it}
                      </button>
                    ))}
                  </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                  <Field label="Name" value={form.name} onChange={set('name')} placeholder="Jana Bauer" />
                  <Field label="E-Mail" type="email" value={form.email} onChange={set('email')} placeholder="jana@firma.de" />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <Field label="Unternehmen" value={form.company} onChange={set('company')} placeholder="Vermögensverwalter · Family Office · Asset Manager" />
                </div>
                <div style={{ marginBottom: 28 }}>
                  <label className="label" style={{ display: 'block', marginBottom: 10 }}>Worüber müssen Sie entscheiden?</label>
                  <textarea
                    className="input"
                    rows={4}
                    value={form.message}
                    onChange={set('message')}
                    placeholder="Ein Absatz genügt. Welche Region, welches Szenario, welcher Zeithorizont?"
                    style={{ resize: 'none', fontFamily: 'inherit' }}
                  />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--on-surface-quiet)' }}>
                    Verschlüsselte Übertragung · DSGVO-konform
                  </div>
                  <button type="submit" className="btn btn-primary">
                    Anfrage senden <span className="arrow">→</span>
                  </button>
                </div>
              </form>
            ) : (
              <div style={{ background: 'var(--surface-low)', padding: 56 }}>
                <div className="label" style={{ marginBottom: 28 }}>Eingegangen · {new Date().toLocaleDateString('de-DE')}</div>
                <h3 className="display-sm" style={{ margin: 0, fontSize: 36, letterSpacing: '-0.025em' }}>
                  Vielen Dank{form.name ? `, ${form.name.split(' ')[0]}` : ''}.
                </h3>
                <p className="body" style={{ marginTop: 24, maxWidth: 480 }}>
                  Wir melden uns innerhalb eines Werktags unter <span style={{ color: 'var(--on-surface)' }}>{form.email || 'der angegebenen Adresse'}</span> — mit Bezug auf Ihr Anliegen <span style={{ color: 'var(--on-surface)' }}>„{form.interest}"</span>. Sollten Sie nichts hören, schreiben Sie bitte direkt an <a href="mailto:support@ricsanalytics.de" style={{ color: 'var(--on-surface)', borderBottom: '1px solid var(--ghost-strong)' }}>support@ricsanalytics.de</a>.
                </p>
                <button onClick={() => { setSubmitted(false); setForm({ name: '', email: '', company: '', message: '', interest: 'Beispielbericht' }); }}
                  className="btn btn-tertiary" style={{ marginTop: 36 }}>
                  Weitere Anfrage senden <span className="arrow">→</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, type = 'text' }) {
  return (
    <div>
      <label className="label" style={{ display: 'block', marginBottom: 10 }}>{label}</label>
      <input className="input" type={type} value={value} onChange={onChange} placeholder={placeholder} />
    </div>
  );
}

Object.assign(window, { Founder, Contact });