// Onboarding / first-event setup — multi-step with progress
const Onboarding = ({ setRoute }) => {
  const [step, setStep] = React.useState(0);
  const [showConfetti, setShowConfetti] = React.useState(false);

  const steps = ['Workspace', 'Verify', 'Bank', 'First event'];

  const next = () => {
    if (step < steps.length - 1) setStep(s => s + 1);
    else {
      setShowConfetti(true);
      setTimeout(() => { setShowConfetti(false); setRoute('dashboard'); }, 2400);
    }
  };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg-sunken)', display:'flex', flexDirection:'column' }}>
      {/* Top bar */}
      <div style={{ display:'flex', alignItems:'center', padding: '18px 32px', borderBottom: '1px solid var(--line)', background: 'var(--bg)' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--ink)', color: 'var(--bg)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontSize: 17, fontWeight: 500 }}>T</div>
          <span style={{ fontSize: 14.5, fontWeight: 600 }}>Tixwerk</span>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>Need help? <a style={{ color:'var(--ink)', fontWeight: 500 }}>hey@tixwerk.de</a></div>
      </div>

      <div style={{ flex: 1, display:'flex', alignItems:'center', justifyContent:'center', padding: '40px 20px' }}>
        <div style={{ width: '100%', maxWidth: 640 }}>
          {/* Stepper */}
          <div style={{ marginBottom: 32 }}>
            <Stepper steps={steps} current={step}/>
          </div>

          <FadeSlide key={step} from="bottom" distance={12}>
            <Card pad={32}>
              {step === 0 && <>
                <div className="display" style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em', marginBottom: 6 }}>Welcome to Tixwerk</div>
                <div style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 24, lineHeight: 1.5 }}>Let's set up your organizer workspace. This takes about 4 minutes.</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <Field label="Workspace name" hint="This is what attendees see on tickets & emails">
                    <Input defaultValue="Rhythm Events Co." prefix={<Icon name="users" size={14}/>}/>
                  </Field>
                  <Field label="Primary city">
                    <Select value="berlin" onChange={()=>{}} options={[
                      { value:'berlin', label:'Berlin' },
                      { value:'hamburg', label:'Hamburg' },
                      { value:'munich', label:'München' },
                      { value:'frankfurt', label:'Frankfurt' },
                    ]}/>
                  </Field>
                  <Field label="What kind of events do you run?" hint="Helps us tailor templates and recommendations">
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                      {['Music','Comedy','Conferences','Workshops','Food & Drink','Sports','Theatre','Other'].map((c, i) => (
                        <button key={c} style={{
                          padding: '8px 14px', borderRadius: 99,
                          border: i < 2 ? '1.5px solid var(--ink)' : '1px solid var(--line-2)',
                          background: i < 2 ? 'var(--ink)' : 'var(--bg-raised)',
                          color: i < 2 ? 'var(--bg)' : 'var(--ink-2)',
                          fontFamily:'inherit', fontSize: 12.5, fontWeight: 550, cursor:'pointer',
                        }}>{c}</button>
                      ))}
                    </div>
                  </Field>
                </div>
              </>}

              {step === 1 && <>
                <div className="display" style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em', marginBottom: 6 }}>Verify your business</div>
                <div style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 24, lineHeight: 1.5 }}>Required to issue VAT invoices and process payouts under German law.</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
                  <Field label="Steuernummer" style={{ gridColumn: '1 / -1' }}>
                    <Input placeholder="29/451/00234" defaultValue="29/451/00234"/>
                  </Field>
                  <Field label="USt-IdNr (optional)" hint="Required once annual turnover exceeds 22.000 €" style={{ gridColumn: '1 / -1' }}>
                    <Input placeholder="DE312894567"/>
                  </Field>
                  <div style={{ gridColumn: '1 / -1' }}>
                    <div style={{ fontSize: 12.5, fontWeight: 550, color: 'var(--ink-2)', marginBottom: 6 }}>PAN card upload</div>
                    <FileUpload label="Drop PAN card photo or PDF" height={120}/>
                  </div>
                  <div style={{ gridColumn: '1 / -1' }}>
                    <Banner tone="info" title="Verification usually takes 2–4 hours" desc="You can keep setting up while we review. We'll email you."/>
                  </div>
                </div>
              </>}

              {step === 2 && <>
                <div className="display" style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em', marginBottom: 6 }}>Where should payouts go?</div>
                <div style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 24, lineHeight: 1.5 }}>We settle weekly on Mondays, 2 days after each event ends.</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Field label="Account holder name" style={{ gridColumn: '1 / -1' }}>
                    <Input placeholder="As per bank records" defaultValue="Rhythm Events Co."/>
                  </Field>
                  <Field label="Account number">
                    <Input placeholder="0123456789" defaultValue="502100004821"/>
                  </Field>
                  <Field label="Confirm account number">
                    <Input placeholder="0123456789" defaultValue="502100004821"/>
                  </Field>
                  <Field label="BIC / SWIFT">
                    <Input placeholder="COBADEFFXXX" defaultValue="COBADEFFXXX" suffix={<Chip tone="success" size="sm" icon="check">Commerzbank Berlin</Chip>}/>
                  </Field>
                  <Field label="Account type">
                    <Select value="current" onChange={()=>{}} options={[
                      { value:'current', label:'Current' },
                      { value:'savings', label:'Savings' },
                    ]}/>
                  </Field>
                </div>
              </>}

              {step === 3 && <>
                <div className="display" style={{ fontSize: 28, fontWeight: 500, letterSpacing:'-0.02em', marginBottom: 6 }}>Create your first event</div>
                <div style={{ fontSize: 14, color: 'var(--ink-3)', marginBottom: 24, lineHeight: 1.5 }}>Start with a template or skip and set up later.</div>
                <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
                  {[
                    { title: 'Concert', desc: 'Live music with GA + VIP', icon:'sparkle', hue: 20 },
                    { title: 'Comedy', desc: 'Stand-up or open mic', icon:'message', hue: 75 },
                    { title: 'Conference', desc: 'Multi-track with speakers', icon:'users', hue: 265 },
                    { title: 'Workshop', desc: 'Limited seats, hands-on', icon:'book', hue: 155 },
                    { title: 'Festival', desc: 'Multi-day with camping', icon:'calendar', hue: 340 },
                    { title: 'Start blank', desc: 'I know what I want', icon:'plus', hue: 60 },
                  ].map((t, i) => (
                    <button key={i} style={{
                      border: '1px solid var(--line-2)', background: 'var(--bg-raised)',
                      borderRadius: 12, padding: 14, textAlign: 'left', cursor: 'pointer',
                      display:'flex', flexDirection:'column', gap: 8, fontFamily:'inherit',
                      transition: 'all 160ms',
                    }}
                    onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--ink)';e.currentTarget.style.transform='translateY(-2px)';}}
                    onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line-2)';e.currentTarget.style.transform='translateY(0)';}}>
                      <div style={{ width: 36, height: 36, borderRadius: 9, background: `oklch(0.94 0.04 ${t.hue})`, color: `oklch(0.4 0.12 ${t.hue})`, display:'flex', alignItems:'center', justifyContent:'center' }}>
                        <Icon name={t.icon} size={18}/>
                      </div>
                      <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.title}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{t.desc}</div>
                    </button>
                  ))}
                </div>
              </>}
            </Card>
          </FadeSlide>

          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop: 20 }}>
            <Button variant="ghost" onClick={() => setStep(s => Math.max(0, s-1))} disabled={step === 0}>Back</Button>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Step {step+1} of {steps.length}</div>
            <Button variant="primary" iconRight={step === steps.length - 1 ? 'sparkle' : 'arrow'} onClick={next}>
              {step === steps.length - 1 ? 'Finish setup' : 'Continue'}
            </Button>
          </div>
        </div>
      </div>
      <Confetti show={showConfetti} count={60}/>
    </div>
  );
};

window.Onboarding = Onboarding;