// Home.jsx — Startseite, ausgerichtet auf das Leistungen-Pattern

function HomeView({ onNav }) {
  return (
    <main className="view-enter">
      {/* ============ HERO — page-head pattern ============ */}
      <section className="page-head">
        <div className="container">
          <p className="eyebrow">BERATUNG FÜR UNTERNEHMEN & FÜHRUNGSKRÄFTE </p>
          <h1 className="h-editorial">
            Klarheit für Entscheidungen.<br />
            <em>Struktur für Veränderung.</em>
          </h1>
          <p className="lead">Unterstützung für Unternehmen und Führungskräfte bei der Weiterentwicklung von Strategien, der Strukturierung von Transformationen und dem Aufbau belastbarer Strukturen für nachhaltige Performance.



          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => onNav('kontakt')}>
              Unverbindliches Erstgespräch <Arrow />
            </button>
            <button className="btn btn-secondary" onClick={() => onNav('leistungen')}>
              Leistungen ansehen
            </button>
          </div>
        </div>
      </section>

      {/* ============ LEISTUNGEN — sect-head pattern + 3 cards ============ */}
      <section className="section">
        <div className="container">
          <div className="sect-head">
            <div className="left">
              <p className="eyebrow">Leistungen</p>
              <h2 className="h-editorial">
                Beratung mit <em>Wirkung.</em>
              </h2>
            </div>
            <div className="right">
              <p className="lead">Ich unterstütze Entscheider und Teams als Sparringspartner und Umsetzungsbegleiter. Von der strategischen Klärung über die Strukturierung von Transformationen bis zur performanceorientierten Steuerung.



              </p>
            </div>
          </div>

          <div className="service-cards">
            <article className="service-card">
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 6h18l-2 11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L3 6Z" />
                  <path d="M3 6 2 3H0" />
                  <circle cx="9" cy="22" r="1" />
                  <circle cx="18" cy="22" r="1" />
                </svg>
              </span>
              <h3>Strategie</h3>
              <p>Klare Zielbilder, priorisierte Handlungsfelder und fundierte Entscheidungsgrundlagen schaffen Orientierung für das Management. Daraus entstehen managementgerechte Storylines, klare Optionen und ein fokussierter Umsetzungsrahmen.



              </p>
            </article>

            <article className="service-card">
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 12h6l2 -4 4 8 2 -4h4" />
                  <circle cx="3" cy="12" r="1" />
                  <circle cx="21" cy="12" r="1" />
                </svg>
              </span>
              <h3>Transformation</h3>
              <p>Transformationen werden entlang von Wertschöpfung, Governance und klarer Verantwortung strukturiert. Rollen, Aufgaben und Abhängigkeiten werden sauber abgestimmt und in eine pragmatische Umsetzungssteuerung überführt.



              </p>
            </article>

            <article className="service-card">
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 11.5a8.38 8.38 0 0 1 -.9 3.8 8.5 8.5 0 0 1 -7.6 4.7 8.38 8.38 0 0 1 -3.8 -.9L3 21l1.9 -5.7a8.38 8.38 0 0 1 -.9 -3.8 8.5 8.5 0 0 1 4.7 -7.6 8.38 8.38 0 0 1 3.8 -.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                </svg>
              </span>
              <h3>Performance</h3>
              <p>Kennzahlen, Fortschritt und Wirkung werden transparent gemacht und in ein klares Management Reporting übersetzt. Eine saubere Review-Logik und fokussierte KPIs schaffen die Grundlage für kontinuierliche Verbesserung.



              </p>
            </article>
          </div>

          <div style={{ marginTop: 48 }}>
            <button className="btn btn-secondary" onClick={() => onNav('leistungen')}>
              Alle Leistungen ansehen <Arrow />
            </button>
          </div>
        </div>
      </section>

      {/* ============ KONTAKT ============ */}
      <HomeContact onNav={onNav} />
    </main>);

}

function HomeContact({ onNav }) {
  const [form, setForm] = React.useState({
    first: '', last: '', company: '', topic: '', email: ''
  });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.first.trim()) next.first = true;
    if (!form.last.trim()) next.last = true;
    if (!form.email.trim()) next.email = true;else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) next.email = true;
    setErrs(next);
    if (Object.keys(next).length === 0) {
      setSent(true);
      setTimeout(() => setSent(false), 4000);
    }
  };

  return (
    <section className="section" style={{ background: 'var(--ice-warm)' }}>
      <div className="container">
        <div className="sect-head">
          <div className="left">
            <p className="eyebrow">Kontakt</p>
            <h2 className="h-editorial">
              Nehmen Sie <em>Kontakt</em> auf.
            </h2>
          </div>
          <div className="right">
            <p className="lead">Für Anfragen rund um Einkaufsstrategie, Lieferanten­management oder Prozessverbesserung direkt per E-Mail oder Telefon.



            </p>
          </div>
        </div>

        <div className="contact-split">
          <div className="contact-lines">
            <a className="contact-line-row" href="tel:+4912345674567">
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1 -2.18 2 19.79 19.79 0 0 1 -8.63 -3.07 19.5 19.5 0 0 1 -6 -6 19.79 19.79 0 0 1 -3.07 -8.67 2 2 0 0 1 2 -2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 0.7 2.81 2 2 0 0 1 -0.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27 -1.27a2 2 0 0 1 2.11 -0.45 12.84 12.84 0 0 0 2.81 0.7 2 2 0 0 1 1.72 2z" />
                </svg>
              </span>
              <div>
                <span className="k">Telefon</span>
                <span className="v">+49 177 3356684</span>
              </div>
            </a>
            <a className="contact-line-row" href="mailto:ricardo@massague-consulting.de">
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 4h16c1.1 0 2 0.9 2 2v12c0 1.1 -0.9 2 -2 2H4c-1.1 0 -2 -0.9 -2 -2V6c0 -1.1 0.9 -2 2 -2z" />
                  <path d="M22 6 12 13 2 6" />
                </svg>
              </span>
              <div>
                <span className="k">E-Mail</span>
                <span className="v">kontakt@massague-consulting.de</span>
              </div>
            </a>
            <div className="contact-line-row" style={{ cursor: 'default' }}>
              <span className="ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7 -9 13 -9 13s-9 -6 -9 -13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
              </span>
              <div>
                <span className="k">Standort</span>
                <span className="v">Stuttgart, Germany</span>
              </div>
            </div>
          </div>

          <form className="contact-form-card" onSubmit={submit} noValidate>
            <div className="row-2">
              <input
                className={"inp " + (errs.first ? 'err' : '')}
                placeholder="Vorname"
                value={form.first}
                onChange={upd('first')} />
              
              <input
                className={"inp " + (errs.last ? 'err' : '')}
                placeholder="Nachname"
                value={form.last}
                onChange={upd('last')} />
              
            </div>
            <input
              className="inp"
              placeholder="Unternehmen"
              value={form.company}
              onChange={upd('company')} />
            
            <input
              className="inp"
              placeholder="Thema"
              value={form.topic}
              onChange={upd('topic')} />
            
            <input
              className={"inp " + (errs.email ? 'err' : '')}
              type="email"
              placeholder="E-Mail"
              value={form.email}
              onChange={upd('email')} />
            
            <button type="submit" className="submit">
              {sent ? 'Anfrage gesendet ✓' : 'Anfrage senden'}
            </button>
            {sent &&
            <span className="sent-msg">
                Vielen Dank — ich melde mich innerhalb von zwei Werktagen.
              </span>
            }
          </form>
        </div>
      </div>
    </section>);

}

window.HomeView = HomeView;