// steps.jsx
function Steps() {
  const steps = [
    {
      n: '01',
      t: 'Paket wählen & buchen',
      p: 'Du wählst dein Paket (LLC, LLC + ITIN oder Vollausbau) und schließt die Buchung online ab. Direkt im Anschluss erhältst du Zugang zum Onboarding und zum Kalender für Schritt 2.',
      meta: 'Online · 5 min',
      cta: 'Tag 0'
    },
    {
      n: '02',
      t: 'Termin mit Edis (Zoom)',
      p: 'Du wählst einen Termin und wir gehen gemeinsam deinen Case durch: Bundesstaat-Wahl (Wyoming, Delaware, New Mexico — wir gründen überall), Struktur, ITIN-Timing, Banking-Strategie. Danach starten wir.',
      meta: 'Zoom · 45–60 min',
      cta: 'Tag 1–3'
    },
    {
      n: '03',
      t: 'Gründung, EIN, ITIN, Banking',
      p: 'Wir übernehmen: LLC-Gründung im gewählten Bundesstaat, Registered Agent, Operating Agreement, EIN beim IRS, ITIN-Einreichung (falls gebucht), Banking-Setup. Du bekommst alle Unterlagen digital, Zugang zu Blueprint und Community.',
      meta: 'Dauer · 10–14 Tage',
      cta: 'Ab Tag 3'
    }
  ];

  return (
    <section className="steps-outer" data-screen-label="Ablauf">
      <div className="wrap">
        <SectionHead
          eyebrow="Ablauf in 3 Schritten"
          title={<>So einfach läuft es.<br/><em>Buchen. Termin wählen. Starten.</em></>}
          sub="Keine Calls vorab, keine Beratungsschleifen. Du buchst, du wählst deinen Termin, wir legen los. Persönlich begleitet — mit einem festen Ansprechpartner."
        />

        <div className="steps-grid">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.p}</p>
              <div className="meta">
                <span>{s.meta}</span>
                <span>{s.cta}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="steps-callout">
          <div className="sc-ic">★</div>
          <div>
            <div className="sc-t">Wir gründen in <em style={{ fontFamily: 'var(--serif)', color: 'var(--accent)' }}>jedem Bundesstaat</em> der USA</div>
            <div className="sc-d">Wyoming, Delaware, New Mexico, Florida, Texas — du entscheidest nicht blind. Im Termin gehen wir deine Situation durch und wählen den Bundesstaat, der <strong>steuerlich und operativ zu deinem Business passt</strong>.</div>
          </div>
          <div className="sc-meta">50 States ✓</div>
        </div>
      </div>
    </section>
  );
}
window.Steps = Steps;