// Create Event — Luma-style single-page flow with live preview
const CreateEvent = ({ setRoute }) => {
  const [variant, setVariant] = React.useState('single-page');

  const [evt, setEvt] = React.useState({
    title: 'Apparat — LP5 Live',
    tagline: 'Ambient techno under cathedral acoustics',
    startDate: 'Sa, 24. Mai', startTime: '20:00',
    endDate: 'So, 25. Mai', endTime: '02:00',
    timezone: 'Europe/Berlin · CEST',
    venueName: 'Berghain',
    venueAddress: 'Am Wriezener Bahnhof, 10243 Berlin',
    city: 'Berlin',
    category: 'Concert',
    isVirtual: false,
    description: 'Ein intimer Abend mit Apparat — ambient, elektronisch, ohne Kompromisse. Kathedralen-Akustik, minimales Licht, unverstärkte Passagen. Doors 19:30.',
    coverHue: 30,
    tickets: [
      { title: 'Early Bird', price: 28, total: 200, type: 'EARLY_BIRD' },
      { title: 'Stehplatz', price: 42, total: 800, type: 'PAID' },
      { title: 'Premium + Meet & Greet', price: 120, total: 50, type: 'PAID' },
    ],
    agenda: [
      { title: 'Doors open', time: '19:30' },
      { title: 'Support — Nils Frahm B2B', time: '20:00' },
      { title: 'Apparat live set', time: '21:30' },
      { title: 'Meet & greet (Premium)', time: '23:30' },
    ],
    allowTax: true, vat: 19,
    bookingFee: 'absorb',
    collectInfo: true,
    capacity: 1050,
  });

  const update = (k, v) => setEvt(s => ({ ...s, [k]: v }));

  // For wizard variant
  const [step, setStep] = React.useState(0);
  const steps = ['Basics', 'When & where', 'Tickets', 'Agenda', 'Policies', 'Publish'];

  if (variant === 'wizard') return <WizardCreate evt={evt} update={update} step={step} setStep={setStep} steps={steps} setRoute={setRoute}/>;

  return (
    <div style={{ background: 'var(--bg-sunken)', minHeight: '100vh' }}>
      {/* Top bar */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: 'var(--bg)', borderBottom: '1px solid var(--line)',
        padding: '12px 28px', display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <Button variant="ghost" size="sm" icon="chevronLeft" onClick={() => setRoute('events')}>Back</Button>
        <Divider vertical style={{ height: 18 }}/>
        <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>Drafts / <span style={{ color: 'var(--ink), fontWeight: 600' }}>Untitled event</span></div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 99, background: 'var(--bg-muted)', fontSize: 11.5, color: 'var(--ink-3)' }}>
          <span style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--success)' }}/>
          Saved 2s ago
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="ghost" size="sm" icon="eye">Preview</Button>
        <Button variant="secondary" size="sm">Save as draft</Button>
        <Button variant="accent" size="sm" icon="sparkle">Publish event</Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 520px', maxWidth: 1400, margin: '0 auto', gap: 0 }}>
        {/* LEFT — form */}
        <div style={{ padding: '28px 32px 80px' }}>
          {/* Hero: cover + title */}
          <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 20, marginBottom: 28 }}>
            <div style={{ position: 'relative' }}>
              <Placeholder label="cover 2:3" aspect="3/4" hue={evt.coverHue} rounded={14} style={{ width: '100%' }}/>
              <button style={{
                position: 'absolute', bottom: 10, left: 10, right: 10,
                height: 32, borderRadius: 8,
                background: 'rgba(20,17,14,0.75)', color: '#fff', border: 0,
                backdropFilter: 'blur(8px)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                fontSize: 12, fontWeight: 550, fontFamily: 'inherit', cursor: 'pointer',
              }}><Icon name="upload" size={13}/>Change cover</button>
              <div style={{
                position: 'absolute', top: 10, right: 10,
                display: 'flex', gap: 4,
              }}>
                {[30, 65, 20, 275, 160, 340].map(h => (
                  <button key={h} onClick={() => update('coverHue', h)}
                    style={{
                      width: 20, height: 20, borderRadius: 99,
                      background: `oklch(0.70 0.14 ${h})`,
                      border: evt.coverHue === h ? '2px solid #fff' : '2px solid transparent',
                      boxShadow: evt.coverHue === h ? '0 0 0 1.5px rgba(0,0,0,0.3)' : 'none',
                      cursor: 'pointer',
                    }}/>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
              <input
                value={evt.title}
                onChange={e => update('title', e.target.value)}
                placeholder="Event name"
                className="display"
                style={{
                  border: 0, outline: 0, background: 'transparent',
                  fontSize: 38, fontWeight: 500, letterSpacing: '-0.025em',
                  color: 'var(--ink)', padding: 0, lineHeight: 1.1,
                  fontFamily: 'var(--font-display)',
                }}
              />
              <input
                value={evt.tagline}
                onChange={e => update('tagline', e.target.value)}
                placeholder="Add a tagline — what makes this special?"
                style={{
                  border: 0, outline: 0, background: 'transparent',
                  fontSize: 16, color: 'var(--ink-2)', padding: 0,
                  fontFamily: 'inherit',
                }}
              />
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
                <Chip tone="accent" size="lg" icon="tag">{evt.category}</Chip>
                <button style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '6px 10px', borderRadius: 99, border: '1px dashed var(--line-3)',
                  background: 'transparent', color: 'var(--ink-3)',
                  fontSize: 12, fontWeight: 550, fontFamily: 'inherit', cursor: 'pointer',
                }}><Icon name="plus" size={11}/>Add tags</button>
              </div>
            </div>
          </div>

          {/* Section: When */}
          <SectionCard icon="calendar" title="When">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Field label="Starts">
                <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 6 }}>
                  <Input value={evt.startDate} onChange={e => update('startDate', e.target.value)} prefix={<Icon name="calendar" size={14}/>}/>
                  <Input value={evt.startTime} onChange={e => update('startTime', e.target.value)} prefix={<Icon name="clock" size={14}/>}/>
                </div>
              </Field>
              <Field label="Ends">
                <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 6 }}>
                  <Input value={evt.endDate} onChange={e => update('endDate', e.target.value)} prefix={<Icon name="calendar" size={14}/>}/>
                  <Input value={evt.endTime} onChange={e => update('endTime', e.target.value)} prefix={<Icon name="clock" size={14}/>}/>
                </div>
              </Field>
            </div>
            <Field label="Timezone" style={{ marginTop: 12 }}>
              <Select value="cet" onChange={() => {}} options={[{value:'cet', label:'Europe/Berlin — CEST (GMT +02:00)'}, {value:'utc', label:'UTC'}]}/>
            </Field>
            <div style={{ marginTop: 10, display: 'flex', gap: 16 }}>
              <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, border: 0, background: 'transparent', color: 'var(--ink-3)', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer' }}>
                <Icon name="plus" size={12}/>Make recurring
              </button>
            </div>
          </SectionCard>

          {/* Section: Where */}
          <SectionCard icon="pin" title="Where" right={
            <SegControl value={evt.isVirtual ? 'virtual' : 'in-person'} onChange={v => update('isVirtual', v === 'virtual')} options={[
              { value: 'in-person', label: 'In-person', icon: 'pin' },
              { value: 'virtual', label: 'Virtual', icon: 'globe' },
            ]}/>
          }>
            {!evt.isVirtual ? (
              <>
                <Field label="Venue">
                  <Input value={evt.venueName} onChange={e => update('venueName', e.target.value)} prefix={<Icon name="search" size={14}/>}/>
                </Field>
                <Field label="Address" style={{ marginTop: 10 }}>
                  <Input value={evt.venueAddress} onChange={e => update('venueAddress', e.target.value)}/>
                </Field>
                <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <Field label="City"><Select value="berlin" onChange={() => {}} options={[{value:'berlin', label:'Berlin'}, {value:'hamburg', label:'Hamburg'}, {value:'muenchen', label:'München'}]}/></Field>
                  <Field label="Country"><Select value="de" onChange={() => {}} options={[{value:'de', label:'Deutschland'}, {value:'at', label:'Österreich'}, {value:'ch', label:'Schweiz'}]}/></Field>
                </div>
                <div style={{ marginTop: 12, height: 140, borderRadius: 10, background: 'var(--bg-muted)', overflow: 'hidden', position: 'relative' }}>
                  <svg width="100%" height="100%" viewBox="0 0 400 140" preserveAspectRatio="none">
                    <defs>
                      <pattern id="map" width="40" height="40" patternUnits="userSpaceOnUse">
                        <path d="M0 20h40M20 0v40" stroke="var(--line-2)" strokeWidth="0.5"/>
                      </pattern>
                    </defs>
                    <rect width="400" height="140" fill="url(#map)"/>
                    <path d="M0 80 Q80 60 140 70 T260 80 T400 70" stroke="var(--line-3)" strokeWidth="3" fill="none"/>
                    <path d="M50 120 L 160 40 L 280 100 L 390 30" stroke="var(--line-3)" strokeWidth="1" fill="none" opacity="0.5"/>
                  </svg>
                  <div style={{ position: 'absolute', left: '42%', top: '44%', width: 24, height: 24, borderRadius: 99, background: 'var(--accent)', border: '3px solid var(--bg-raised)', boxShadow: '0 4px 12px rgba(0,0,0,0.2)' }}/>
                  <div style={{ position: 'absolute', left: '42%', top: '44%', width: 60, height: 60, borderRadius: 99, background: 'var(--accent)', opacity: 0.15, transform: 'translate(-30%, -30%)', animation: 'pulse 2s infinite' }}/>
                </div>
              </>
            ) : (
              <Field label="Virtual event link">
                <Input placeholder="https://zoom.us/j/..." prefix={<Icon name="link" size={14}/>}/>
              </Field>
            )}
          </SectionCard>

          {/* Section: About */}
          <SectionCard icon="book" title="About this event">
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10, padding: '6px 8px', borderRadius: 8, background: 'var(--bg-sunken)' }}>
              <Icon name="sparkles" size={14} style={{ color: 'var(--accent-ink)' }}/>
              <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>Need help writing? <b style={{ color: 'var(--accent-ink)', cursor: 'pointer' }}>Generate with AI</b></span>
            </div>
            <Textarea
              value={evt.description}
              onChange={e => update('description', e.target.value)}
              rows={5}
              placeholder="What should attendees know? Dress code, what to bring, highlights..."
            />
            <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['**bold**', '_italic_', '• list', '🔗 link', '📷 image'].map(t => (
                <span key={t} style={{ fontSize: 11, color: 'var(--ink-3)', padding: '3px 7px', borderRadius: 5, background: 'var(--bg-sunken)', fontFamily: 'var(--font-mono)' }}>{t}</span>
              ))}
            </div>
          </SectionCard>

          {/* Section: Tickets */}
          <SectionCard icon="ticket" title="Tickets" right={<Button variant="ghost" size="sm" icon="plus">Add ticket</Button>}>
            {evt.tickets.map((t, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '24px 1fr auto auto 28px', gap: 14, alignItems: 'center',
                padding: '14px 14px', borderRadius: 10,
                border: '1px solid var(--line)', background: 'var(--bg)',
                marginBottom: 8, cursor: 'grab',
              }}>
                <Icon name="sort" size={14} style={{ color: 'var(--ink-4)' }}/>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8 }}>
                    {t.title}
                    {t.type === 'EARLY_BIRD' && <Chip tone="accent" size="sm">Early bird</Chip>}
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>
                    {t.total} available · sales end 24. Mai
                  </div>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-display)', minWidth: 90, textAlign: 'right' }}>
                  {euro(t.price)}
                </div>
                <button style={{ width: 30, height: 30, borderRadius: 7, border: '1px solid var(--line-2)', background: 'var(--bg-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                  <Icon name="edit" size={13}/>
                </button>
                <Icon name="more" size={14} style={{ color: 'var(--ink-3)' }}/>
              </div>
            ))}
            <button style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              width: '100%', padding: '14px', borderRadius: 10,
              border: '1px dashed var(--line-3)', background: 'transparent',
              color: 'var(--ink-3)', fontSize: 13, fontWeight: 550, fontFamily: 'inherit',
              cursor: 'pointer',
            }}>
              <Icon name="plus" size={14}/> Add another ticket type
            </button>
            <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
              <Chip tone="outline" size="sm">💡 Free</Chip>
              <Chip tone="outline" size="sm">Paid</Chip>
              <Chip tone="outline" size="sm">Early bird</Chip>
              <Chip tone="outline" size="sm">Group ticket</Chip>
              <Chip tone="outline" size="sm" icon="seat">Seat map</Chip>
              <Chip tone="outline" size="sm" icon="coupon">Promo codes</Chip>
            </div>
          </SectionCard>

          {/* Section: Agenda */}
          <SectionCard icon="clock" title="Schedule" optional right={<Button variant="ghost" size="sm" icon="plus">Add session</Button>}>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {evt.agenda.map((a, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr auto', gap: 14, alignItems: 'center', padding: '10px 0', borderBottom: i < evt.agenda.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, fontFamily: 'var(--font-mono)', color: 'var(--accent-ink)' }}>{a.time}</div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{a.title}</div>
                  <Icon name="edit" size={13} style={{ color: 'var(--ink-3)', cursor: 'pointer' }}/>
                </div>
              ))}
            </div>
          </SectionCard>

          {/* Section: Advanced (collapsible) */}
          <SectionCard icon="sliders" title="Policies & advanced" optional collapsible defaultOpen={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 10 }}>Fees & tax</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <Toggle checked={true} onChange={() => {}} label="Apply booking fee" desc="Platform charges 3% + 0,50 €"/>
                  <SegControl value={evt.bookingFee} onChange={v => update('bookingFee', v)} fullWidth options={[
                    { value: 'absorb', label: 'I absorb' },
                    { value: 'pass', label: 'Passed to buyer' },
                  ]}/>
                  <Toggle checked={evt.allowTax} onChange={v => update('allowTax', v)} label="Collect VAT (MwSt.)" desc={evt.allowTax ? evt.vat + '% standard / 7% reduced' : 'Disabled'}/>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 10 }}>Attendee experience</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <Toggle checked={evt.collectInfo} onChange={v => update('collectInfo', v)} label="Collect attendee info" desc="Custom form questions for each ticket"/>
                  <Toggle checked={true} onChange={() => {}} label="Allow PayPal" desc="In addition to SEPA, cards, Sofort, Klarna"/>
                  <Toggle checked={false} onChange={() => {}} label="Require approval" desc="Manually approve each booking"/>
                </div>
              </div>
            </div>
            <Divider style={{ margin: '18px 0' }}/>
            <Field label="Terms & conditions">
              <Textarea rows={3} placeholder="Refund policy, dress code, age limits..." defaultValue="Strictly 18+. Keine Rückerstattung innerhalb von 48 Stunden vor Veranstaltung. AGB gelten."/>
            </Field>
            <Field label="Custom URL slug" style={{ marginTop: 14 }} right={<Button variant="ghost" size="sm" icon="sparkles">Generate with AI</Button>}>
              <Input prefix="tixwerk.de/e/" defaultValue="apparat-lp5-berghain-berlin"/>
            </Field>
          </SectionCard>

          {/* Publish panel */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: 16, borderRadius: 14,
            background: 'var(--bg-raised)', border: '1px solid var(--line)',
            marginTop: 20,
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Ready to publish?</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>All fields check out. 1.050 tickets across 3 types, worth {euro(41800, { compact: true })} potential revenue.</div>
            </div>
            <Button variant="secondary" size="md">Save as draft</Button>
            <Button variant="accent" size="md" iconRight="arrow">Publish event</Button>
          </div>
        </div>

        {/* RIGHT — Live preview */}
        <aside style={{
          position: 'sticky', top: 61, alignSelf: 'start', height: 'calc(100vh - 61px)',
          borderLeft: '1px solid var(--line)',
          background: 'var(--bg)',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ padding: '14px 22px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Live preview</div>
            <div style={{ flex: 1 }}/>
            <SegControl value="desktop" onChange={() => {}} options={[
              { value: 'desktop', label: 'Desktop' },
              { value: 'mobile', label: 'Mobile' },
            ]}/>
          </div>
          <div style={{ flex: 1, overflow: 'auto', padding: '20px 22px' }} className="scroll-sunken">
            <EventPreview evt={evt}/>
          </div>
        </aside>
      </div>
    </div>
  );
};

const SectionCard = ({ icon, title, children, right, optional, collapsible, defaultOpen = true }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{
      background: 'var(--bg-raised)', border: '1px solid var(--line)',
      borderRadius: 14, padding: '18px 20px', marginBottom: 14,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: open ? 14 : 0 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--bg-muted)', color: 'var(--ink-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={icon} size={15}/>
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 600 }}>{title}</div>
        {optional && <span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500 }}>Optional</span>}
        <div style={{ flex: 1 }}/>
        {right}
        {collapsible && <button onClick={() => setOpen(o => !o)} style={{ width: 26, height: 26, borderRadius: 6, border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={open ? 'chevronUp' : 'chevronDown'} size={16}/>
        </button>}
      </div>
      {open && <div>{children}</div>}
    </div>
  );
};

const EventPreview = ({ evt }) => (
  <div style={{
    background: 'var(--bg-raised)', border: '1px solid var(--line)',
    borderRadius: 12, overflow: 'hidden',
  }}>
    <Placeholder label="" aspect="3/2" hue={evt.coverHue} rounded={0} />
    <div style={{ padding: 20 }}>
      <div style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>
        {evt.startDate.toUpperCase()} · {evt.startTime}
      </div>
      <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
        {evt.title}
      </h2>
      <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.4 }}>{evt.tagline}</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-2)' }}><Icon name="calendar" size={16}/></div>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.3 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>{evt.startDate}, {evt.startTime}</span>
            <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>to {evt.endTime} · {evt.timezone}</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-2)' }}><Icon name="pin" size={16}/></div>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.3 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>{evt.venueName}</span>
            <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{evt.venueAddress}</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 18, padding: 14, borderRadius: 10, background: 'var(--bg-sunken)' }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Tickets</div>
        {evt.tickets.map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0', borderTop: i > 0 ? '1px dashed var(--line-2)' : 'none' }}>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 550 }}>{t.title}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{t.total} available</div>
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 600, fontFamily: 'var(--font-display)' }}>{euro(t.price)}</div>
          </div>
        ))}
        <button style={{
          width: '100%', height: 40, marginTop: 12,
          border: 0, borderRadius: 9,
          background: 'var(--ink)', color: 'var(--bg)',
          fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
        }}>Get tickets</button>
      </div>

      <div style={{ marginTop: 18 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>About</div>
        <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>{evt.description}</div>
      </div>
    </div>
  </div>
);

const WizardCreate = ({ evt, update, step, setStep, steps, setRoute }) => (
  <div style={{ minHeight: '100vh', background: 'var(--bg)' }}>
    <div style={{ padding: '12px 28px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <Button variant="ghost" size="sm" icon="chevronLeft" onClick={() => setRoute('events')}>Back</Button>
      <div style={{ flex: 1 }}/>
      <Button variant="secondary" size="sm">Save as draft</Button>
    </div>
    <div style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px 80px' }}>
      {/* Step rail */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 32 }}>
        {steps.map((s, i) => (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 24, height: 24, borderRadius: 99,
                background: i < step ? 'var(--ink)' : i === step ? 'var(--accent)' : 'var(--bg-muted)',
                color: i <= step ? '#fff' : 'var(--ink-3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 600,
              }}>{i < step ? <Icon name="check" size={12}/> : i + 1}</div>
              <span style={{ fontSize: 12.5, fontWeight: i === step ? 600 : 500, color: i === step ? 'var(--ink)' : 'var(--ink-3)' }}>{s}</span>
            </div>
            {i < steps.length - 1 && <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>}
          </React.Fragment>
        ))}
      </div>
      <h2 className="display" style={{ margin: 0, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>
        {step === 0 && 'Tell us about your event'}
        {step === 1 && 'When and where?'}
        {step === 2 && 'Set up tickets'}
        {step === 3 && 'Build a schedule'}
        {step === 4 && 'Policies & settings'}
        {step === 5 && 'Review & publish'}
      </h2>
      <div style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 6, marginBottom: 28 }}>
        Step {step + 1} of {steps.length} · About 2 minutes to finish
      </div>
      <Card pad={24}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Field label="Event name"><Input defaultValue={evt.title}/></Field>
          <Field label="Category"><Select value="concert" onChange={() => {}} options={[{value:'concert',label:'Concert'},{value:'comedy',label:'Comedy'},{value:'festival',label:'Festival'}]}/></Field>
          <Field label="Tagline" hint="One line that sells it"><Input defaultValue={evt.tagline}/></Field>
          <Field label="Cover image">
            <div style={{ border: '1px dashed var(--line-3)', borderRadius: 10, padding: 20, textAlign: 'center', background: 'var(--bg-sunken)' }}>
              <Icon name="upload" size={20} style={{ color: 'var(--ink-3)' }}/>
              <div style={{ fontSize: 13, fontWeight: 550, marginTop: 6 }}>Drop an image or click to upload</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 3 }}>Recommended 1200×800 · up to 2MB</div>
            </div>
          </Field>
        </div>
      </Card>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24 }}>
        <Button variant="ghost" icon="chevronLeft" onClick={() => setStep(Math.max(0, step - 1))}>Back</Button>
        <Button variant="accent" iconRight="arrow" onClick={() => setStep(Math.min(steps.length - 1, step + 1))}>Continue</Button>
      </div>
    </div>
  </div>
);

window.CreateEvent = CreateEvent;