// sections.jsx — Sektionen nach dem Rad: Process, Why-Me, Kontakt-CTA

function Process({ accent }) {
  const steps = [
    { no: '01', name: 'Brief & Scope',    body: 'Kurzer Call. Ich höre zu, stelle dumme Fragen, schreibe ein Brief, das beide verstehen.' },
    { no: '02', name: 'Richtung',         body: 'Zwei bis drei Konzept-Richtungen in einem Dokument. Kein Moodboard-Dschungel.' },
    { no: '03', name: 'Iteration',        body: 'Eine Feedback-Schleife pro Meilenstein. Kurze Loops, schnelle Commits.' },
    { no: '04', name: 'Polish & Launch',  body: 'Finale Details, Testing, Übergabe. Dokumentation inklusive — alles, was danach kommt, verständlich.' },
  ];
  return (
    <section className="process" id="process">
      <div className="sec-head">
        <div className="sec-head-no">/ ablauf</div>
        <h2 className="sec-head-title">Vier Schritte,<br/>keine Überraschungen.</h2>
      </div>
      <ol className="process-grid">
        {steps.map((s, i) => (
          <li key={s.no} className="process-step" style={{ '--i': i }}>
            <div className="process-step-no">{s.no}</div>
            <div className="process-step-name">{s.name}</div>
            <div className="process-step-body">{s.body}</div>
            <span className="process-step-line" style={{ background: accent }} />
          </li>
        ))}
      </ol>
    </section>
  );
}

function WhyMe() {
  const points = [
    { k: 'Eine Person',    v: 'Kein Weiterreichen, kein Agentur-Churn. Du redest mit der Person, die baut.' },
    { k: 'Fünf Gewerke',   v: 'Design, Code, Motion, Grafik, Video. Überschneidungen sind dein Vorteil.' },
    { k: 'Schnell',        v: 'Ohne Zwischen-Reviews. Der erste Entwurf ist schon der dritte im Kopf.' },
    { k: 'Fair kalkuliert', v: 'Preise sind Preise. Keine aufgeblähten Tagessätze, keine versteckten Rundungen.' },
  ];
  return (
    <section className="why" id="why">
      <div className="sec-head">
        <div className="sec-head-no">/ warum</div>
        <h2 className="sec-head-title">Warum mit mir,<br/>nicht mit einer Agentur.</h2>
      </div>
      <dl className="why-grid">
        {points.map((p) => (
          <div className="why-item" key={p.k}>
            <dt>{p.k}</dt>
            <dd>{p.v}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

function BigCTA({ accent }) {
  const [hover, setHover] = React.useState(false);
  return (
    <section className="cta" id="kontakt">
      <div className="cta-eyebrow">
        <span className="cta-dot" style={{ background: accent }} />
        <span>Projekt im Kopf?</span>
      </div>
      <a className="cta-link"
         href="mailto:kontakt@senso-digital.de?subject=Projektanfrage"
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         data-hover>
        <span className="cta-word-wrap">
          <span className="cta-word">
            <span className="cta-word-front">kontakt@senso-digital.de</span>
            <span className="cta-word-back" style={{ color: accent }}>Lass uns reden.</span>
          </span>
          <svg className={'cta-arrow' + (hover ? ' is-hover' : '')}
               width="48" height="48" viewBox="0 0 48 48">
            <circle cx="24" cy="24" r="23" fill="none" stroke="currentColor" strokeWidth="0.6" />
            <path d="M17 31 31 17 M20 17h11v11"
                  stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" />
          </svg>
        </span>
      </a>
      <div className="cta-foot">
        <span>Antwort innerhalb 24h</span>
        <span className="cta-foot-sep">·</span>
        <span>Erstgespräch kostet nichts</span>
        <span className="cta-foot-sep">·</span>
        <span>Remote / Jena</span>
      </div>
    </section>
  );
}

Object.assign(window, { Process, WhyMe, BigCTA });