// Step 1 — Type: PWA or Android. Big visual choice cards.

const Step1Type = ({ draft, setDraft }) => {
  const { ChoiceCard, IconGlobe, IconSmartphone, IconCheck, SectionTitle } = window;

  const types = [
    {
      id: 'pwa',
      icon: IconGlobe,
      title: 'Progressive Web App',
      sub: 'Browser-installable',
      desc: 'Pre-lander + service worker funnel. Highest distribution flexibility — no store review, instant updates, full pixel/push control.',
      bullets: [
        'No store gatekeepers',
        'Updates ship instantly via Cloudflare Pages',
        'Pixel + push fire from your domain',
        'Best for paid social funnels (Meta, TikTok)',
      ],
      meta: '~3 min setup',
      accent: '#66b3ff',
    },
    {
      id: 'android',
      icon: IconSmartphone,
      title: 'Android (Play Store)',
      sub: 'Native APK via Base44',
      desc: 'Trusted store presence with native install. Slower to ship, but unlocks larger creative budgets and longer ad lifetime.',
      bullets: [
        'Real Play Store listing & ratings',
        'Higher Meta ad acceptance rates',
        'Native splash + background restore',
        'Best for evergreen scale campaigns',
      ],
      meta: '~3 days inc. review',
      accent: '#00d084',
    },
  ];

  return (
    <div className="step-anim">
      <SectionTitle
        kicker="Step 01 / 07"
        title="What are we building?"
        desc="Pick the surface this app will live on. You can keep iterating on either — but the type can't be changed after launch."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {types.map(t => {
          const active = draft.type === t.id;
          const Ic = t.icon;
          return (
            <ChoiceCard key={t.id} active={active} onClick={() => setDraft({ ...draft, type: t.id })} accent={t.accent}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 18 }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 12,
                  background: `${t.accent}1A`,
                  border: `1px solid ${t.accent}40`,
                  display: 'grid', placeItems: 'center',
                  color: t.accent,
                  flexShrink: 0,
                }}>
                  <Ic size={26} sw={1.6} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{t.title}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>{t.sub}</div>
                </div>
                {active && (
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: t.accent, color: '#001a0c', display: 'grid', placeItems: 'center' }}>
                    <IconCheck size={12} sw={3} />
                  </div>
                )}
              </div>

              <p style={{ fontSize: 13, color: 'var(--text-dim)', marginBottom: 16, lineHeight: 1.55 }}>{t.desc}</p>

              <ul style={{ listStyle: 'none', padding: 0, marginBottom: 16, display: 'flex', flexDirection: 'column', gap: 7 }}>
                {t.bullets.map(b => (
                  <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12.5, color: 'var(--text-dim)' }}>
                    <span style={{ color: t.accent, marginTop: 1, flexShrink: 0 }}><IconCheck size={12} sw={2.5} /></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>

              <div style={{
                fontSize: 11, color: 'var(--muted-2)', fontFamily: 'JetBrains Mono, monospace',
                paddingTop: 14, borderTop: '1px solid var(--line-soft)',
              }}>
                {t.meta}
              </div>
            </ChoiceCard>
          );
        })}
      </div>

      <div style={{
        marginTop: 22, padding: '12px 16px',
        background: 'var(--info-dim)', border: '1px solid rgba(103,179,255,0.25)',
        borderRadius: 10, fontSize: 12.5, color: 'var(--text-dim)',
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <window.IconAlert size={16} style={{ color: 'var(--info)', flexShrink: 0, marginTop: 1 }} />
        <span>
          <strong style={{ color: 'var(--text)' }}>Heads up:</strong>{' '}
          PWAs route through your worker via <code style={{ background: 'var(--bg-3)', padding: '1px 5px', borderRadius: 3 }}>?app=…</code> param.
          Android apps embed the same worker endpoint at build time — both share the same GEO routing config you'll set in step 3.
        </span>
      </div>
    </div>
  );
};

window.Step1Type = Step1Type;