// pricing.jsx
function Pricing() {
  const [tab, setTab] = React.useState('bundle');

  return (
    <section className="pricing" id="llc" data-screen-label="Pakete">
      <div className="wrap">
        <SectionHead
          eyebrow="Preise & Pakete"
          title={<>Ein Preis. Alles drin.<br/><em>Keine versteckten Kosten.</em></>}
          sub="Die LLC-Gründung kostet 890 € — und deckt dein komplettes erstes Jahr. Add-Ons nur, wenn du sie wirklich brauchst."
        />

        <div className="pricing-tabs">
          <button className={`pricing-tab ${tab === 'single' ? 'active' : ''}`} onClick={() => setTab('single')}>Einzel-Buchung</button>
          <button className={`pricing-tab ${tab === 'bundle' ? 'active' : ''}`} onClick={() => setTab('bundle')}>All-Inclusive Paket</button>
        </div>

        <div className="packages">
          <div className="pkg pkg-main">
            <div className="pkg-head">
              <div>
                <div className="chip accent-solid" style={{ marginBottom: 14 }}>{tab === 'bundle' ? 'All-Inclusive' : 'Basis-Paket'}</div>
                <div className="pkg-name">{tab === 'bundle' ? 'LLC + EIN + eSIM + ITIN' : 'LLC Gründung'}</div>
                <p className="sub">{tab === 'bundle' ? 'Alles was du brauchst — ein Preis' : 'Komplettpaket inkl. erstes Jahr'}</p>
              </div>
            </div>
            <div className="price-row">
              <span className="price"><span className="cur">€</span>{tab === 'bundle' ? '1.497' : '890'}</span>
              <span className="price-meta">
                {tab === 'bundle' && <span style={{ color: 'var(--accent)', marginRight: 8 }}>statt 1.687 €</span>}
                einmalig · inkl. MwSt
              </span>
            </div>
            <ul>
              <li><span className="check c"></span> Gründung im US-Bundesstaat deiner Wahl</li>
              <li><span className="check c"></span> Registered Agent für 1 Jahr</li>
              <li><span className="check c"></span> Operating Agreement (maßgeschneidert)</li>
              <li><span className="check c"></span> EIN-Beantragung beim IRS</li>
              <li><span className="check c"></span> US Bankkonto-Setup (Mercury / Wise / Relay)</li>
              <li><span className="check c"></span> Virtuelle US-Adresse inkl. Post-Scan</li>
              <li><span className="check c"></span> 1 Jahr Compliance-Support</li>
              {tab === 'bundle' && <>
                <li><span className="check c"></span> EIN Express — 72h statt 4–8 Wochen</li>
                <li><span className="check c"></span> US T-Mobile eSIM auf deinen Namen</li>
                <li><span className="check c"></span> ITIN Done 4 You (W-7 + Notar)</li>
                <li><span className="check c"></span> BOI Filing erledigt</li>
              </>}
            </ul>

            <div className="bonus-inline">
              <div className="ic">★</div>
              <div>
                <div className="b-t">Gratis dazu: Business Funding Blueprint <em>+ Community</em></div>
                <div className="b-d">Zugang zur Community mit 470+ Gründern, Bank- und Kreditkarten-Templates, 1:1-Strategien für US-Banking. <strong style={{ color: 'var(--ink)' }}>Wert: 997 €</strong>.</div>
              </div>
            </div>

            <a href="checkout.html?p=llc" className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>{tab === 'bundle' ? 'All-Inclusive buchen' : 'LLC buchen'} <Arrow /></a>
          </div>

          <div className="pkg pkg-side">
            <div className="pkg-head">
              <div>
                <div className="chip" style={{ marginBottom: 14 }}>{tab === 'bundle' ? 'Im Paket enthalten' : 'Erweiterungen'}</div>
                <div className="pkg-name" style={{ fontSize: 28 }}>{tab === 'bundle' ? 'Deine Ersparnis' : 'Add-Ons'}</div>
                <p className="sub">{tab === 'bundle' ? 'Das sparst du im Paket' : 'Optional zur LLC dazubuchen'}</p>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {tab === 'bundle' ? (
                <>
                  <AddonLine t="EIN Express Service" d="72h statt 4–8 Wochen" p="199 €" oldP="299 €" />
                  <AddonLine t="T-Mobile eSIM" d="US-Nummer auf deinen Namen" p="69 €" oldP="99 €" />
                  <AddonLine t="ITIN Done 4 You" d="W-7 + Notar + IRS Follow-up" p="339 €" oldP="399 €" />
                  <AddonLine t="BOI Filing" d="Beneficial Ownership Report" p="0 €" tag="INKLUSIVE" />
                </>
              ) : (
                <>
                  <AddonLine t="EIN Express Service" d="EIN in 72h statt 4–8 Wochen" p="+299 €" />
                  <AddonLine t="T-Mobile eSIM" d="Echte US-Nummer auf deinen Namen" p="+99 €" />
                  <AddonLine t="Federal Tax Filing" d="Jährliche Pflichterklärung übernommen" p="ab 399 €/Jahr" />
                  <AddonLine t="ITIN Done 4 You" d="Stand-alone oder zum Paket" p="399 €" />
                </>
              )}
            </div>

            {tab === 'bundle' && (
              <div style={{ marginTop: 'auto', padding: '16px', background: 'var(--bg-3)', borderRadius: 12, border: '1px solid var(--accent-line)' }}>
                <div style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--accent)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Deine Ersparnis</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 14 }}>Einzeln: 1.687 € → Paket: 1.497 €</span>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 600, color: 'var(--accent)' }}>−190 €</span>
                </div>
              </div>
            )}

            {tab === 'single' && (
              <div style={{ marginTop: 'auto', padding: '16px', background: 'var(--bg-3)', borderRadius: 12, border: '1px solid var(--line)' }}>
                <div style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Vollausstattung</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 14 }}>LLC + EIN + eSIM + ITIN</span>
                  <span className="mono" style={{ fontSize: 18, fontWeight: 600 }}>1.497 €</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function AddonLine({ t, d, p, oldP, tag, muted }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 16px', borderRadius: 10,
      background: 'var(--bg-3)', border: '1px solid var(--line)',
      opacity: muted ? 0.7 : 1
    }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{t}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{d}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        {oldP && <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', textDecoration: 'line-through' }}>{oldP}</div>}
        <div style={{ fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 14, color: tag ? 'var(--accent)' : 'inherit' }}>{tag || p}</div>
      </div>
    </div>
  );
}

window.Pricing = Pricing;