// hero.jsx
const { useState } = React;

// Preise
const STANDALONE = { base: 890, ein: 299, sim: 99, itin: 399 };
const ADDON     = { base: 890, ein: 199, sim: 69, itin: 339 };

function Hero() {
  const [ein, setEin] = useState(false);
  const [sim, setSim] = useState(false);
  const [itin, setItin] = useState(false);

  const total = ADDON.base
    + (ein  ? ADDON.ein  : 0)
    + (sim  ? ADDON.sim  : 0)
    + (itin ? ADDON.itin : 0);

  const standaloneSum = STANDALONE.base
    + (ein  ? STANDALONE.ein  : 0)
    + (sim  ? STANDALONE.sim  : 0)
    + (itin ? STANDALONE.itin : 0);

  const savings = standaloneSum - total;
  const allSelected = ein && sim && itin;

  return (
    <header className="hero">
      <div className="hero-grid"></div>
      <div className="wrap hero-inner">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <div className="chip">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></span>
            Jetzt #1 Anbieter für DACH-Gründer in den USA
          </div>
        </div>

        <h1>
          Deine US LLC.<br/>
          <span className="accent">In 14 Tagen</span> gegründet.
        </h1>

        <p className="sub">
          Steuerlich optimiert, international skalierbar, von echten Experten begleitet — nicht von einem Formular-Generator. Wir übernehmen EIN, Bankkonto, Buchhaltung und bringen dich rein in die Community mit 470+ Gründern.
        </p>

        <div className="hero-actions">
          <a href="#llc" className="btn btn-primary">Jetzt LLC gründen — 890 € <Arrow /></a>
          <a href="#itin" className="btn btn-ghost">ITIN Service ansehen</a>
        </div>

        <div className="trust-strip">
          <div className="trust-item"><Stars n={5} /><strong>4.9</strong> <span>/ 5 · 218 Kundenbewertungen</span></div>
          <div className="trust-item"><strong>1.400+</strong> <span>LLCs gegründet</span></div>
          <div className="trust-item"><strong>470+</strong> <span>Member in der Community</span></div>
          <div className="trust-item"><strong>14 Tage</strong> <span>Durchschnitt bis EIN</span></div>
        </div>

        <div className="configurator">
          <div className="config-left">
            <div className="eyebrow" style={{ marginBottom: 8 }}><span className="dot"></span>Live-Konfigurator</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, marginBottom: 4 }}>Stell dir dein Paket zusammen</h3>
            <p style={{ fontSize: 14, margin: '0 0 8px' }}>
              Jeder Service ist einzeln buchbar — zur LLC dazugebucht bekommst du automatisch den Add-On-Preis.
            </p>

            {!allSelected && (
              <button
                className="bundle-nudge"
                onClick={() => { setEin(true); setSim(true); setItin(true); }}
                type="button"
              >
                <span className="bn-l">
                  <strong>All-inklusive Bundle aktivieren</strong>
                  <span>LLC + EIN Express + eSIM + ITIN + BOI Filing</span>
                </span>
                <span className="bn-r">
                  <span className="bn-old">1.687 €</span>
                  <span className="bn-new">1.497 €</span>
                </span>
              </button>
            )}

            <ConfigRow
              t="US LLC Gründung"
              pflicht
              d="US-Bundesstaat deiner Wahl · Registered Agent · Operating Agreement · EIN · Bankkonto-Support · 1 Jahr Compliance"
              price={STANDALONE.base}
              addonPrice={ADDON.base}
              on={true}
              locked
            />
            <ConfigRow
              t="EIN Express Service"
              d="EIN innerhalb von 72 Stunden statt 4–8 Wochen — wenn es schnell gehen muss."
              price={STANDALONE.ein}
              addonPrice={ADDON.ein}
              on={ein}
              onToggle={() => setEin(!ein)}
            />
            <ConfigRow
              t="US T-Mobile eSIM"
              d="Echte US-Nummer auf deinen Namen — für Stripe, Banking, Google Business, Apple ID."
              price={STANDALONE.sim}
              addonPrice={ADDON.sim}
              on={sim}
              onToggle={() => setSim(!sim)}
            />
            <ConfigRow
              t="ITIN Done 4 You"
              d="US-Steuer-ID für non-residents. Bearbeitungszeit beim IRS: 6–14 Wochen — deshalb direkt mitbestellen."
              price={STANDALONE.itin}
              addonPrice={ADDON.itin}
              on={itin}
              onToggle={() => setItin(!itin)}
            />

            <div className="itin-why">
              <div className="itin-why-head">
                <span className="itin-why-ic">!</span>
                <div>
                  <div className="itin-why-t">Warum ITIN direkt mitbestellen?</div>
                  <div className="itin-why-d">Erst mit der ITIN aktivierst du die <strong>vollen Zugriffe aufs US-Finanzsystem</strong> — Kreditkarten, Credit Lines, echte Business-Accounts. LLC und EIN allein reichen nicht. Und: der IRS braucht <strong>6–14 Wochen</strong>. Wer das nicht gleich mitstartet, verliert Monate.</div>
                </div>
              </div>
              <a href="itin.html" className="itin-why-link">Alle Details zur ITIN <Arrow /></a>
            </div>
          </div>

          <div className="config-right">
            <div className="summary-title">Dein Paket</div>

            <SummaryLine label="US LLC Gründung" standalone={STANDALONE.base} price={ADDON.base} />
            {ein  && <SummaryLine label="EIN Express (72h)" standalone={STANDALONE.ein}  price={ADDON.ein} />}
            {sim  && <SummaryLine label="T-Mobile eSIM"     standalone={STANDALONE.sim}  price={ADDON.sim} />}
            {itin && <SummaryLine label="ITIN Done 4 You"   standalone={STANDALONE.itin} price={ADDON.itin} />}

            {allSelected && <div className="summary-line" style={{ color: 'var(--accent)' }}><span className="l">BOI Filing</span><span className="v">INKL.</span></div>}
            <div className="summary-line" style={{ color: 'var(--accent)' }}><span className="l">Business Funding Blueprint</span><span className="v">INKL.</span></div>
            <div className="summary-line" style={{ color: 'var(--accent)' }}><span className="l">Zugang zur Community (470+)</span><span className="v">INKL.</span></div>

            {savings > 0 && (
              <div className="summary-discount">
                <span className="l">Deine Ersparnis</span>
                <span className="v">−{savings.toLocaleString('de-DE')} €</span>
              </div>
            )}

            <div className="summary-total">
              <span className="l">Gesamt</span>
              <span className="v">
                {savings > 0 && <span className="old">{standaloneSum.toLocaleString('de-DE')} €</span>}
                <span className="cur">€</span>{total.toLocaleString('de-DE')}
              </span>
            </div>

            <div className="config-cta">
              <a href="checkout.html?p=llc" className="btn btn-primary">Jetzt starten <Arrow /></a>
            </div>
            <div className="config-footnote">einmalig · inkl. MwSt · 30 Tage Geld-zurück</div>

            <div className="bonus-box">
              <div className="hd">Exklusiv: Business Funding Blueprint</div>
              <div className="d">Kostenloser Zugang zur Community mit <strong>470+ Gründern</strong> & 1:1 Call-Templates für US-Banking und Kreditkarten — im Wert von 997 €.</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function ConfigRow({ t, d, price, addonPrice, on, onToggle, locked, pflicht }) {
  const hasDiscount = addonPrice !== price && on;
  const plus = !locked ? '+' : '';
  const fmt = (n) => n.toLocaleString('de-DE');
  return (
    <div className="config-row">
      <div className="info">
        <div className="t">
          {t}
          {pflicht && <span className="chip" style={{ marginLeft: 8, padding: '2px 8px', fontSize: 9 }}>PFLICHT</span>}
        </div>
        <div className="d">{d}</div>
      </div>
      <div className="price-block">
        {on && hasDiscount ? (
          <>
            <div className="price-old">{plus}{fmt(price)} €</div>
            <div className="price price-new">{plus}{fmt(addonPrice)} €</div>
          </>
        ) : (
          <div className="price">{plus}{fmt(on ? addonPrice : price)} €</div>
        )}
      </div>
      <button
        className={`toggle ${on ? 'on' : ''} ${locked ? 'locked' : ''}`}
        onClick={locked ? undefined : onToggle}
        aria-label={t}
        type="button"
      />
    </div>
  );
}

function SummaryLine({ label, standalone, price }) {
  const hasDiscount = standalone !== price;
  const fmt = (n) => n.toLocaleString('de-DE');
  return (
    <div className="summary-line">
      <span className="l">{label}</span>
      <span className="v">
        {hasDiscount && <span className="old-inline">{fmt(standalone)} €</span>}
        {fmt(price)} €
      </span>
    </div>
  );
}

window.Hero = Hero;