// Event Detail — tabs B: Block seats, Reminders, Settings, Embed, Promo (event-scoped)

// ─── Block Seats ──────────────────────────────────────────────────────────────
// Section-based stadium view with block-seat builder.

const EventDetailBlockSeats = () => {
  // Sections with capacity, sold, blocked counts — approximates a concert venue layout
  const [sections, setSections] = React.useState([
    { id: 'pit',   name: 'Front Pit',     tier: 'VIP',      capacity: 150, sold: 122, blocked: 8,  color: 'oklch(0.62 0.18 15)' },
    { id: 'ga-l',  name: 'Stehplatz · Links',  tier: 'GA', capacity: 500, sold: 380, blocked: 0,  color: 'oklch(0.52 0.12 265)' },
    { id: 'ga-c',  name: 'Stehplatz · Mitte', tier: 'GA', capacity: 800, sold: 512, blocked: 12, color: 'oklch(0.52 0.12 265)' },
    { id: 'ga-r',  name: 'Stehplatz · Rechts', tier: 'GA', capacity: 500, sold: 390, blocked: 0,  color: 'oklch(0.52 0.12 265)' },
    { id: 't1-l',  name: 'Rang 1 · Links',   tier: 'Balkon', capacity: 620, sold: 410, blocked: 4,  color: 'oklch(0.66 0.15 40)' },
    { id: 't1-c',  name: 'Rang 1 · Mitte', tier: 'Balkon',  capacity: 780, sold: 630, blocked: 0,  color: 'oklch(0.66 0.15 40)' },
    { id: 't1-r',  name: 'Rang 1 · Rechts',  tier: 'Balkon', capacity: 620, sold: 420, blocked: 4,  color: 'oklch(0.66 0.15 40)' },
    { id: 't2-l',  name: 'Rang 2 · Links',   tier: 'Oberrang', capacity: 540, sold: 220, blocked: 0,  color: 'oklch(0.6 0.14 155)' },
    { id: 't2-c',  name: 'Rang 2 · Mitte', tier: 'Oberrang',  capacity: 680, sold: 300, blocked: 0,  color: 'oklch(0.6 0.14 155)' },
    { id: 't2-r',  name: 'Rang 2 · Rechts',  tier: 'Oberrang', capacity: 540, sold: 240, blocked: 0,  color: 'oklch(0.6 0.14 155)' },
  ]);
  const [selected, setSelected] = React.useState(new Set(['pit']));
  const toggleSelect = (id) => setSelected(s => {
    const n = new Set(s);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });

  const selectedSections = sections.filter(s => selected.has(s.id));
  const selectedCapacity = selectedSections.reduce((a, s) => a + (s.capacity - s.sold - s.blocked), 0);

  const totals = sections.reduce((a, s) => ({
    capacity: a.capacity + s.capacity,
    sold: a.sold + s.sold,
    blocked: a.blocked + s.blocked,
  }), { capacity: 0, sold: 0, blocked: 0 });

  const [blockCount, setBlockCount] = React.useState(10);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 14 }}>
      <Card pad={0}>
        <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Venue map · Mercedes-Benz Arena</h3>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Tap sections to block seats. Colors represent the ticket tier.</div>
          </div>
          <div style={{ flex: 1 }}/>
          <SegControl value="map" onChange={() => {}} options={[
            {value:'map', label:<span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><Icon name="pin" size={11}/>Map</span>},
            {value:'list', label:<span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><Icon name="rows" size={11}/>List</span>},
          ]}/>
        </div>

        {/* Venue SVG */}
        <div style={{ padding: 24, background: 'var(--bg-sunken)' }}>
          <VenueMap sections={sections} selected={selected} onToggle={toggleSelect}/>
        </div>

        {/* Legend & summary */}
        <div style={{ padding: '12px 18px', borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          {[
            { c: 'oklch(0.62 0.18 15)',  l: 'VIP (Pit)' },
            { c: 'oklch(0.52 0.12 265)', l: 'Stehplatz (GA)' },
            { c: 'oklch(0.66 0.15 40)',  l: 'Balkon (Rang 1)' },
            { c: 'oklch(0.6 0.14 155)',  l: 'Oberrang (Rang 2)' },
          ].map(L => (
            <span key={L.l} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--ink-2)' }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: L.c }}/>{L.l}
            </span>
          ))}
          <div style={{ flex: 1 }}/>
          <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>
            {totals.sold.toLocaleString()} sold · {totals.blocked} blocked · {(totals.capacity - totals.sold - totals.blocked).toLocaleString()} available
          </span>
        </div>
      </Card>

      {/* Right rail */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Selection summary */}
        <Card>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Selection</div>
          {selectedSections.length === 0 ? (
            <div style={{ fontSize: 12.5, color: 'var(--ink-4)', padding: '20px 0', textAlign: 'center' }}>Tap sections on the map to start blocking seats</div>
          ) : (
            <>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {selectedSections.map(s => (
                  <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 8, background: 'var(--bg-sunken)', fontSize: 12.5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color, flexShrink: 0 }}/>
                    <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</span>
                    <span className="mono" style={{ color: 'var(--ink-3)', whiteSpace: 'nowrap', flexShrink: 0 }}>{(s.capacity - s.sold - s.blocked)} free</span>
                    <button onClick={() => toggleSelect(s.id)} style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer', color: 'var(--ink-4)', flexShrink: 0 }}><Icon name="close" size={11}/></button>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 10, padding: '10px 12px', background: 'color-mix(in oklch, var(--accent) 8%, var(--bg-sunken))', borderRadius: 8, display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                <span style={{ color: 'var(--ink-2)' }}>Available in selection</span>
                <span className="mono" style={{ fontWeight: 700, color: 'var(--accent)' }}>{selectedCapacity}</span>
              </div>
            </>
          )}
        </Card>

        {/* Block form */}
        <Card>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Block seats</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 14 }}>Reserve seats that won't be sold through checkout.</div>

          <Field label="Number of seats">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <button onClick={() => setBlockCount(Math.max(1, blockCount - 1))} style={stepBtn}>−</button>
              <Input value={blockCount} onChange={e => setBlockCount(Number(e.target.value) || 0)} style={{ width: 70, textAlign: 'center' }}/>
              <button onClick={() => setBlockCount(blockCount + 1)} style={stepBtn}>+</button>
              <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>of {selectedCapacity} available</span>
            </div>
          </Field>

          <Field label="Reason" style={{ marginTop: 12 }}>
            <Select options={[
              { value: 'vip', label: 'VIP / Artist guest list' },
              { value: 'sponsor', label: 'Sponsor allocation' },
              { value: 'press', label: 'Press & media' },
              { value: 'staff', label: 'Crew / staff' },
              { value: 'hold', label: 'Commercial hold' },
            ]}/>
          </Field>

          <Field label="Assigned to" style={{ marginTop: 10 }}>
            <Input placeholder="z. B. Universal Music — Jonas" prefix={<Icon name="user" size={12}/>}/>
          </Field>

          <Field label="Auto-release if unused" style={{ marginTop: 10 }}>
            <Select options={[
              { value: 'never', label: 'Never — manual release' },
              { value: '48h', label: '48h before doors' },
              { value: '24h', label: '24h before doors' },
              { value: '2h', label: '2h before doors' },
            ]}/>
          </Field>

          <Field label="Internal note" style={{ marginTop: 10 }}>
            <Textarea rows={2} placeholder="Optional — shown only to your team"/>
          </Field>

          <Button variant="primary" style={{ width: '100%', marginTop: 14 }} icon="lock" disabled={selectedSections.length === 0 || blockCount < 1}>
            {selectedSections.length === 0 ? 'Select a section first' : `Block ${blockCount} seat${blockCount > 1 ? 's' : ''}`}
          </Button>
        </Card>

        {/* Recent holds */}
        <Card>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Recent holds</div>
            <div style={{ flex: 1 }}/>
            <Button variant="ghost" size="sm">View all</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 8 }}>
            {[
              { where: 'Front Pit',  count: 8,  reason: 'Artist guest list',  by: 'Priya', ago: '2d' },
              { where: 'Stehplatz · Mitte', count: 12, reason: 'Press',              by: 'System', ago: '4d' },
              { where: 'Rang 1 · Links', count: 4, reason: 'Sponsor — Universal', by: 'Jonas', ago: '1w' },
              { where: 'Rang 1 · Rechts', count: 4, reason: 'Crew',             by: 'Lena',  ago: '1w' },
            ].map((h, i) => (
              <div key={i} style={{ padding: '9px 0', borderBottom: i<3?'1px solid var(--line)':'none' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600 }}>{h.where} <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· {h.count} seats</span></span>
                  <span style={{ fontSize: 11, color:'var(--ink-3)' }}>{h.ago} ago</span>
                </div>
                <div style={{ fontSize: 11.5, color:'var(--ink-3)', marginTop: 2 }}>{h.reason} · by {h.by}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
};

const stepBtn = {
  width: 30, height: 30, borderRadius: 7, border: '1px solid var(--line)',
  background: 'var(--bg-raised)', color: 'var(--ink-2)',
  fontSize: 14, fontFamily: 'inherit', cursor: 'pointer',
};

// Schematic top-down venue. Stage at bottom; seating fans out.
const VenueMap = ({ sections, selected, onToggle }) => {
  const W = 700, H = 440;
  // Lookup helpers
  const get = (id) => sections.find(s => s.id === id);
  const pct = (s) => ({
    sold: s.sold / s.capacity,
    blocked: s.blocked / s.capacity,
  });
  const blockColor = (s) => {
    const isSel = selected.has(s.id);
    return isSel ? s.color : `color-mix(in oklch, ${s.color} 55%, var(--bg-raised))`;
  };
  const textColor = (s) => selected.has(s.id) ? '#fff' : 'var(--ink)';

  const Section = ({ id, x, y, w, h, rx = 8, skewX = 0, rotate = 0, nameSize = 12 }) => {
    const s = get(id);
    if (!s) return null;
    const p = pct(s);
    const isSel = selected.has(id);
    return (
      <g transform={`translate(${x}, ${y}) rotate(${rotate}) skewX(${skewX})`} style={{ cursor: 'pointer' }} onClick={() => onToggle(id)}>
        <rect width={w} height={h} rx={rx} ry={rx} fill={blockColor(s)}
          stroke={isSel ? '#fff' : 'rgba(0,0,0,0.08)'}
          strokeWidth={isSel ? 2.5 : 1}
          style={{ transition: 'all 160ms' }}
        />
        {/* sold overlay */}
        <clipPath id={`clip-${id}`}>
          <rect width={w} height={h} rx={rx} ry={rx}/>
        </clipPath>
        <rect x={0} y={0} width={w * p.sold} height={h} clipPath={`url(#clip-${id})`}
          fill="rgba(0,0,0,0.25)"/>
        {/* blocked stripes */}
        {s.blocked > 0 && (
          <rect x={w * p.sold} y={0} width={w * p.blocked} height={h} clipPath={`url(#clip-${id})`}
            fill="url(#blockStripes)"/>
        )}
        <text x={w/2} y={h/2 - 4} textAnchor="middle" dominantBaseline="middle"
          fill={textColor(s)} fontSize={nameSize} fontWeight={600}
          style={{ fontFamily: 'var(--font-ui)', pointerEvents: 'none' }}>
          {s.name.replace(/ · .*/, '')}
        </text>
        <text x={w/2} y={h/2 + 11} textAnchor="middle" dominantBaseline="middle"
          fill={textColor(s)} fontSize={9.5} opacity={0.85}
          style={{ fontFamily: 'var(--font-mono)', pointerEvents: 'none' }}>
          {s.sold}/{s.capacity}
        </text>
      </g>
    );
  };

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', maxWidth: 820, margin: '0 auto' }}>
      <defs>
        <pattern id="blockStripes" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(255,255,255,0.5)" strokeWidth="2"/>
        </pattern>
        <linearGradient id="stageGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="oklch(0.3 0.04 340)"/>
          <stop offset="100%" stopColor="oklch(0.2 0.03 340)"/>
        </linearGradient>
      </defs>

      {/* Tier 2 arc (back) */}
      <Section id="t2-l" x={40} y={30} w={180} h={52} rx={12}/>
      <Section id="t2-c" x={240} y={30} w={220} h={52} rx={12}/>
      <Section id="t2-r" x={480} y={30} w={180} h={52} rx={12}/>

      {/* Tier 1 (middle) */}
      <Section id="t1-l" x={60} y={100} w={170} h={60} rx={10}/>
      <Section id="t1-c" x={250} y={100} w={200} h={60} rx={10}/>
      <Section id="t1-r" x={470} y={100} w={170} h={60} rx={10}/>

      {/* GA Standing (close to stage) */}
      <Section id="ga-l" x={90} y={180} w={140} h={70} rx={10}/>
      <Section id="ga-c" x={250} y={180} w={200} h={70} rx={10}/>
      <Section id="ga-r" x={470} y={180} w={140} h={70} rx={10}/>

      {/* Front Pit */}
      <Section id="pit" x={220} y={270} w={260} h={50} rx={8}/>

      {/* Stage */}
      <g>
        <path d={`M 150 350 L 550 350 L 590 400 L 110 400 Z`} fill="url(#stageGrad)" stroke="rgba(0,0,0,0.1)"/>
        <text x={350} y={378} textAnchor="middle" fill="#fff" fontSize={16} fontWeight={700}
          style={{ letterSpacing: '0.18em', fontFamily: 'var(--font-ui)' }}>STAGE</text>
      </g>

      {/* Compass */}
      <g transform="translate(30, 410)">
        <text x={0} y={0} fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">ENTRY · NORTH GATE</text>
      </g>
    </svg>
  );
};

// ─── Reminders ────────────────────────────────────────────────────────────────

const EventDetailReminders = () => {
  const reminders = [
    { id: 1, name: 'Welcome & event details', channel: 'email', trigger: 'On booking', delay: 'Immediately', status: 'active', sent: 3240, opened: 2284, rate: 70 },
    { id: 2, name: 'Two weeks to go — hype video', channel: 'email+push', trigger: 'Before event', delay: '14 days', status: 'scheduled', sent: 0, opened: 0, rate: 0 },
    { id: 3, name: '48h: event day essentials', channel: 'email+sms', trigger: 'Before event', delay: '2 days', status: 'active', sent: 0, opened: 0, rate: 0 },
    { id: 4, name: 'Gates open — ticket in app', channel: 'push+sms', trigger: 'Before event', delay: '3 hours', status: 'active', sent: 0, opened: 0, rate: 0 },
    { id: 5, name: 'Thanks for coming — feedback', channel: 'email', trigger: 'After event', delay: '1 day', status: 'active', sent: 0, opened: 0, rate: 0 },
  ];

  // Shared column template — keeps timeline + header + rows aligned.
  // [index] [name] [channels] [performance] [status] [actions]
  const COLS = '32px minmax(220px,1.6fr) 170px 180px 110px 72px';

  const timelinePoints = [
    { pct: 6,  label: 'On booking', sub: '#1' },
    { pct: 26, label: '−14 days',   sub: '#2' },
    { pct: 50, label: '−2 days',    sub: '#3' },
    { pct: 56, label: '−3 hrs',     sub: '#4' },
    { pct: 82, label: '+1 day',     sub: '#5' },
  ];
  const eventPct = 64;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Card pad={0}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center' }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Automated reminders</h3>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Sent automatically based on the event timeline.</div>
            </div>
            <div style={{ flex: 1 }}/>
            <Button variant="primary" size="sm" icon="plus">New reminder</Button>
          </div>

          {/* Visual timeline — clean 3-layer: labels / rail+nodes / numbers */}
          <div style={{ padding: '20px 28px 18px', borderBottom: '1px solid var(--line)', background: 'var(--bg-sunken)' }}>
            <div style={{ position: 'relative' }}>
              {/* Labels row */}
              <div style={{ position: 'relative', height: 18, marginBottom: 6 }}>
                {timelinePoints.map((p, i) => (
                  <div key={i} style={{
                    position: 'absolute', left: `${p.pct}%`, transform: 'translateX(-50%)',
                    fontSize: 11, fontWeight: 600, color: 'var(--ink-2)', whiteSpace: 'nowrap',
                  }}>{p.label}</div>
                ))}
                <div style={{
                  position: 'absolute', left: `${eventPct}%`, transform: 'translateX(-50%)',
                  fontSize: 11, fontWeight: 700, color: 'var(--accent)', whiteSpace: 'nowrap',
                  letterSpacing: '0.05em', textTransform: 'uppercase',
                }}>Event · 24. Mai</div>
              </div>

              {/* Rail + nodes */}
              <div style={{ position: 'relative', height: 22, marginBottom: 6 }}>
                <div style={{ position: 'absolute', left: 0, right: 0, top: 10, height: 2, background: 'var(--line-2)' }}/>
                {timelinePoints.map((p, i) => (
                  <div key={i} style={{
                    position: 'absolute', left: `${p.pct}%`, top: 4, transform: 'translateX(-50%)',
                    width: 14, height: 14, borderRadius: '50%',
                    background: 'var(--bg-raised)', border: '2px solid var(--ink-2)',
                  }}/>
                ))}
                {/* Event marker */}
                <div style={{
                  position: 'absolute', left: `${eventPct}%`, top: 0, transform: 'translateX(-50%)',
                  width: 22, height: 22, borderRadius: '50%',
                  background: 'var(--accent)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent)',
                }}><Icon name="calendar" size={11}/></div>
              </div>

              {/* Sub row */}
              <div style={{ position: 'relative', height: 14 }}>
                {timelinePoints.map((p, i) => (
                  <div key={i} style={{
                    position: 'absolute', left: `${p.pct}%`, transform: 'translateX(-50%)',
                    fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)',
                  }}>{p.sub}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Column headers */}
          <div style={{
            display: 'grid', gridTemplateColumns: COLS, gap: 12,
            padding: '10px 18px', background: 'var(--bg-sunken)',
            borderBottom: '1px solid var(--line)',
            fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: '0.06em',
          }}>
            <span/>
            <span>Reminder</span>
            <span>Channels</span>
            <span>Performance</span>
            <span>Status</span>
            <span/>
          </div>

          {/* Reminder rows */}
          {reminders.map((r, i) => (
            <div key={r.id} style={{
              display: 'grid', gridTemplateColumns: COLS, gap: 12, alignItems: 'center',
              padding: '14px 18px', borderBottom: i<reminders.length-1?'1px solid var(--line)':'none',
              minHeight: 60,
            }}>
              <div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--bg-sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>{i+1}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{r.trigger} · {r.delay}</div>
              </div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                {r.channel.split('+').map(c => (
                  <Badge key={c} variant="neutral"><Icon name={c === 'email' ? 'mail' : c === 'sms' ? 'phone' : 'bell'} size={10} style={{ marginRight: 4 }}/>{c.toUpperCase()}</Badge>
                ))}
              </div>
              <div style={{ fontSize: 12 }}>
                {r.sent > 0 ? (
                  <>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                      <span className="mono" style={{ color: 'var(--ink-2)' }}>{r.opened.toLocaleString()}/{r.sent.toLocaleString()}</span>
                      <span style={{ color: 'var(--success)', fontWeight: 600 }}>{r.rate}% open</span>
                    </div>
                    <div style={{ height: 4, background: 'var(--bg-muted)', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{ width: `${r.rate}%`, height: '100%', background: 'var(--success)', borderRadius: 99 }}/>
                    </div>
                  </>
                ) : <span style={{ color: 'var(--ink-4)' }}>Not yet sent</span>}
              </div>
              <div><StatusBadge status={r.status}/></div>
              <div style={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
                <Button variant="ghost" size="sm" icon="edit" style={{ padding: '0 6px' }}/>
                <Button variant="ghost" size="sm" icon="more" style={{ padding: '0 6px' }}/>
              </div>
            </div>
          ))}
        </Card>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Card>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Reminder channels</div>
          {[
            { i: 'mail', l: 'Email', sub: 'transactional@tixwerk.de', on: true },
            { i: 'phone', l: 'SMS', sub: 'TIXWERK — 2 credits per send', on: true },
            { i: 'bell', l: 'Push (app)', sub: 'via iOS/Android apps', on: true },
            { i: 'message', l: 'WhatsApp', sub: 'Upgrade to Premium', on: false },
          ].map(c => (
            <div key={c.l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--line)' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={c.i} size={14}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{c.l}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{c.sub}</div>
              </div>
              <Toggle checked={c.on} onChange={()=>{}}/>
            </div>
          ))}
        </Card>

        <Card>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>Tips</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 12 }}>Events with a full reminder sequence see 34% higher attendance on average.</div>
          {[
            'Send the "event-day essentials" 3h before doors, not 24h',
            'Use push + SMS together for gates-open — email alone has 40% open rate',
            'Post-event feedback reminders within 24h get 3× response rate',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, padding: '6px 0', fontSize: 12, color: 'var(--ink-2)' }}>
              <Icon name="sparkle" size={12} style={{ marginTop: 2, color: 'var(--accent)' }}/>
              <span>{t}</span>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
};

// ─── Settings ─────────────────────────────────────────────────────────────────

const EventDetailSettings = () => {
  const sections = [
    { key: 'details',       label: 'Event details',   icon: 'calendar', desc: 'Core info shown on the page' },
    { key: 'tickets',       label: 'Ticketing rules', icon: 'ticket',   desc: 'Transfers, holds, refunds' },
    { key: 'checkout',      label: 'Checkout & fees', icon: 'cart',     desc: 'Fees, tax, cart timeout' },
    { key: 'form',          label: 'Attendee form',   icon: 'form',     desc: 'What to collect per ticket' },
    { key: 'communication', label: 'Communication',   icon: 'mail',     desc: 'Sender, replies, templates' },
    { key: 'access',        label: 'Access & roles',  icon: 'users',    desc: 'Teammates & scanner access' },
    { key: 'advanced',      label: 'Advanced',        icon: 'settings', desc: 'Tracking, API, webhooks' },
    { key: 'danger',        label: 'Danger zone',     icon: 'warning',  desc: 'Cancel, duplicate, delete' },
  ];
  const [active, setActive] = React.useState('details');
  const current = sections.find(s => s.key === active) || sections[0];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 28 }}>
      {/* Left nav */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, position: 'sticky', top: 20, alignSelf: 'start' }}>
        {sections.map((s) => {
          const isActive = s.key === active;
          const isDanger = s.key === 'danger';
          return (
            <button key={s.key} onClick={() => setActive(s.key)} style={{
              display: 'flex', alignItems: 'flex-start', gap: 11,
              padding: '10px 12px', border: 0, borderRadius: 8,
              background: isActive ? 'var(--bg-sunken)' : 'transparent',
              fontFamily: 'inherit', textAlign: 'left', cursor: 'pointer',
              color: isDanger ? 'var(--danger)' : (isActive ? 'var(--ink)' : 'var(--ink-2)'),
              position: 'relative',
            }}>
              {isActive && <span style={{ position: 'absolute', left: -10, top: 10, bottom: 10, width: 3, borderRadius: 99, background: isDanger ? 'var(--danger)' : 'var(--accent)' }}/>}
              <Icon name={s.icon} size={14} style={{ marginTop: 2, flexShrink: 0 }}/>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: isActive ? 600 : 500, whiteSpace: 'nowrap' }}>{s.label}</div>
                <div style={{ fontSize: 11, color: isDanger ? 'color-mix(in oklch, var(--danger) 70%, var(--ink-3))' : 'var(--ink-3)', marginTop: 2, lineHeight: 1.35 }}>{s.desc}</div>
              </div>
            </button>
          );
        })}
      </div>

      {/* Right content */}
      <div>
        <div style={{ marginBottom: 16 }}>
          <h2 className="display" style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>{current.label}</h2>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>{current.desc}</div>
        </div>

        {active === 'details'       && <SettingsDetails/>}
        {active === 'tickets'       && <SettingsTicketing/>}
        {active === 'checkout'      && <SettingsCheckout/>}
        {active === 'form'          && <SettingsForm/>}
        {active === 'communication' && <SettingsComm/>}
        {active === 'access'        && <SettingsAccess/>}
        {active === 'advanced'      && <SettingsAdvanced/>}
        {active === 'danger'        && <SettingsDanger/>}
      </div>
    </div>
  );
};

// ─── Panels ───────────────────────────────────────────────────────────────────

const SettingsSection = ({ title, desc, children, danger }) => (
  <Card style={{ marginBottom: 14, borderColor: danger ? 'color-mix(in oklch, var(--danger) 30%, var(--line))' : undefined }}>
    {title && <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600, color: danger ? 'var(--danger)' : undefined }}>{title}</h3>}
    {desc && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3, marginBottom: 16 }}>{desc}</div>}
    {children}
  </Card>
);

const SettingRow = ({ title, sub, children, last }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 0', borderBottom: last ? 'none' : '1px solid var(--line)' }}>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{sub}</div>
    </div>
    <div>{children}</div>
  </div>
);

// Event details
const SettingsDetails = () => (
  <>
    <SettingsSection>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="Event name" style={{ gridColumn: '1 / -1' }}><Input value="Apparat — LP5 Live · Berlin"/></Field>
        <Field label="URL slug"><Input value="apparat-berghain" prefix="tixwerk.de/e/"/></Field>
        <Field label="Category">
          <Select value="concert" options={[
            { value: 'concert', label: 'Konzert' },
            { value: 'comedy', label: 'Comedy' },
            { value: 'sports', label: 'Sport' },
            { value: 'festival', label: 'Festival' },
          ]}/>
        </Field>
        <Field label="Venue"><Input value="Berghain, Am Wriezener Bahnhof"/></Field>
        <Field label="City"><Input value="Berlin"/></Field>
        <Field label="Start date & time"><Input value="Sa, 24. Mai · 22:00 MESZ" prefix={<Icon name="calendar" size={12}/>}/></Field>
        <Field label="Doors open"><Input value="21:00" prefix={<Icon name="clock" size={12}/>}/></Field>
        <Field label="Event end"><Input value="So, 25. Mai · 04:00 MESZ"/></Field>
        <Field label="Age restriction">
          <Select value="13" options={[
            { value: 'all', label: 'All ages' },
            { value: '13', label: '13+' },
            { value: '18', label: '18+' },
            { value: '21', label: '21+' },
          ]}/>
        </Field>
        <Field label="Timezone">
          <Select value="cet" options={[{ value: 'cet', label: 'Europe/Berlin — MESZ (UTC+2)' }]}/>
        </Field>
      </div>

      <Field label="Short description" style={{ marginTop: 14 }}>
        <Textarea value="Apparat kehrt mit dem neuen Album LP5 zurück ins Berghain für eine Nacht." rows={2}/>
      </Field>

      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 6, color: 'var(--ink-2)' }}>Cover image</div>
          <div style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, oklch(0.52 0.12 280), oklch(0.42 0.14 340))', borderRadius: 10, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 28, fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>Apparat · LP5</div>
            <div style={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 6 }}>
              <button style={coverBtnStyle}>Replace</button>
              <button style={coverBtnStyle}>Crop</button>
            </div>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>Recommended: 1920×1080 · JPG or PNG · Under 2MB</div>
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 6, color: 'var(--ink-2)' }}>Status</div>
          <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-sunken)', border: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <StatusBadge status="active"/>
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 10 }}>Selling since 3. Apr. Sales close automatically 1h before doors.</div>
            <Button variant="ghost" size="sm" icon="pause" style={{ width:'100%', justifyContent: 'center' }}>Pause sales</Button>
          </div>
        </div>
      </div>
    </SettingsSection>

    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 4 }}>
      <Button variant="ghost">Discard</Button>
      <Button variant="primary">Save changes</Button>
    </div>
  </>
);

const coverBtnStyle = {
  padding: '4px 10px', borderRadius: 6, border: '1px solid rgba(255,255,255,0.25)',
  background: 'rgba(0,0,0,0.45)', color: '#fff', fontSize: 11, fontFamily: 'inherit', cursor: 'pointer',
  backdropFilter: 'blur(8px)',
};

// Ticketing rules
const SettingsTicketing = () => (
  <>
    <SettingsSection title="Checkout & guest behavior">
      <SettingRow title="Allow guest checkout" sub="Buyers can book without creating an account"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Require phone OTP" sub="Verify every buyer via SMS before payment"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Require attendee name per ticket" sub="Useful for Platinum+ tiers and reserved seating"><Toggle checked={false} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Cart hold timer" sub="How long to reserve seats during checkout">
        <Select value="8" options={[{value:'5',label:'5 min'},{value:'8',label:'8 min'},{value:'10',label:'10 min'},{value:'15',label:'15 min'}]}/>
      </SettingRow>
      <SettingRow title="Max tickets per booking" sub="Hard cap across all tiers" last>
        <Select value="8" options={[{value:'4',label:'4'},{value:'6',label:'6'},{value:'8',label:'8'},{value:'10',label:'10'},{value:'20',label:'20'}]}/>
      </SettingRow>
    </SettingsSection>

    <SettingsSection title="Transfers & refunds">
      <SettingRow title="Transferable tickets" sub="Buyers can transfer tickets to a friend via the app"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Transfer deadline" sub="Cut-off for ticket transfers">
        <Select value="24" options={[{value:'48',label:'48h before doors'},{value:'24',label:'24h before doors'},{value:'2',label:'2h before doors'},{value:'none',label:'Until doors open'}]}/>
      </SettingRow>
      <SettingRow title="Self-serve refunds" sub="Allow buyers to refund themselves from the app"><Toggle checked={false} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Refund window" sub="How long buyers have to refund after booking" last>
        <Select value="7" options={[{value:'2',label:'2 days'},{value:'7',label:'7 days'},{value:'30',label:'30 days'},{value:'never',label:'No self-serve refunds'}]}/>
      </SettingRow>
    </SettingsSection>

    <SettingsSection title="Waitlist & resale">
      <SettingRow title="Enable waitlist" sub="Collect emails once sold out"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Official resale marketplace" sub="Let verified buyers resell at face value"><Toggle checked={false} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Dynamic pricing" sub="Let Tixwerk raise tier prices as inventory shrinks" last><Toggle checked={false} onChange={()=>{}}/></SettingRow>
    </SettingsSection>
  </>
);

// Checkout & fees
const SettingsCheckout = () => (
  <>
    <SettingsSection title="Who pays the fees?" desc="Pick whether buyer or organizer absorbs Tixwerk platform fees.">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <RadioTileBig selected label="Buyer pays" sub="Fees shown on top of ticket price" muted="Recommended"/>
        <RadioTileBig label="Organizer absorbs" sub="Fees deducted from your payout"/>
      </div>
    </SettingsSection>

    <SettingsSection title="Fee breakdown" desc="What buyers see in their cart for a 45,00 € GA ticket.">
      <div style={{ background: 'var(--bg-sunken)', borderRadius: 10, padding: 14, fontSize: 13 }}>
        {[
          ['Ticket price', euro(45), 'var(--ink-2)'],
          ['Platform fee (3.5%)', euro(1.58), 'var(--ink-2)'],
          ['Payment gateway (0.5%)', euro(0.23), 'var(--ink-2)'],
          ['VAT (19% on fees)', euro(0.34), 'var(--ink-2)'],
        ].map(([l, v, c], i) => (
          <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', color: c, borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
            <span>{l}</span><span className="mono">{v}</span>
          </div>
        ))}
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, paddingTop: 10, borderTop: '1px solid var(--line-2)', fontSize: 14, fontWeight: 600 }}>
          <span>Buyer pays</span><span className="mono">{euro(47.15)}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 13 }}>
          <span style={{ color: 'var(--ink-3)' }}>You receive</span><span className="mono" style={{ color: 'var(--success)', fontWeight: 600 }}>{euro(45)}</span>
        </div>
      </div>
    </SettingsSection>

    <SettingsSection title="Payment methods">
      {[
        { l: 'SEPA-Lastschrift', s: 'Most popular — 52% of your sales', on: true },
        { l: 'Credit & debit cards', s: 'Visa, Mastercard, Amex', on: true },
        { l: 'Sofortüberweisung / Klarna', s: 'Instant bank transfer', on: true },
        { l: 'PayPal', s: 'Buyer protection included', on: true },
        { l: 'giropay', s: 'For German bank customers', on: false },
        { l: 'Klarna Ratenkauf (3, 6, 12 months)', s: 'For tickets over 100 € · +2% fee', on: false },
      ].map((r, i, arr) => (
        <SettingRow key={r.l} title={r.l} sub={r.s} last={i === arr.length - 1}><Toggle checked={r.on} onChange={()=>{}}/></SettingRow>
      ))}
    </SettingsSection>

    <SettingsSection title="Tax & invoicing">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="USt-IdNr"><Input value="DE312894567" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
        <Field label="Steuernummer"><Input value="29/451/00234" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
        <Field label="Registered name"><Input value="Universal Music GmbH"/></Field>
        <Field label="Invoice prefix"><Input value="APPARAT-BER-" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
      </div>
    </SettingsSection>
  </>
);

const RadioTileBig = ({ selected, label, sub, muted }) => (
  <button style={{
    textAlign: 'left', padding: 16, borderRadius: 12, cursor: 'pointer', fontFamily: 'inherit',
    background: selected ? 'color-mix(in oklch, var(--accent) 6%, var(--bg-raised))' : 'var(--bg-raised)',
    border: `1.5px solid ${selected ? 'var(--accent)' : 'var(--line)'}`,
    color: 'var(--ink)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
      <span style={{ width: 16, height: 16, borderRadius: 99, border: `2px solid ${selected ? 'var(--accent)' : 'var(--line-strong)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {selected && <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--accent)' }}/>}
      </span>
      <span style={{ fontSize: 13.5, fontWeight: 600 }}>{label}</span>
      {muted && <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '2px 8px', borderRadius: 99, background: 'color-mix(in oklch, var(--success) 14%, transparent)', color: 'var(--success)' }}>{muted}</span>}
    </div>
    <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{sub}</div>
  </button>
);

// Attendee form
const SettingsForm = () => {
  const fields = [
    { l: 'Full name', type: 'Text',  req: true,  core: true },
    { l: 'Email',     type: 'Email', req: true,  core: true },
    { l: 'Phone',     type: 'Phone', req: true,  core: true },
    { l: 'T-shirt size',   type: 'Select',   req: false, core: false },
    { l: 'How did you hear about us?', type: 'Select', req: false, core: false },
  ];
  return (
    <>
      <SettingsSection title="Fields collected at checkout" desc="Drag to reorder. Core fields can't be removed.">
        {fields.map((f, i) => (
          <div key={f.l} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 8, marginBottom: 6, background: f.core ? 'var(--bg-sunken)' : 'var(--bg-raised)' }}>
            <Icon name="drag" size={14} style={{ color: 'var(--ink-4)', cursor: 'grab' }}/>
            <span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{f.l}</span>
            <span style={{ fontSize: 11, color: 'var(--ink-3)', padding: '2px 8px', background: 'var(--bg-raised)', borderRadius: 99, border: '1px solid var(--line)' }}>{f.type}</span>
            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--ink-3)' }}>
              <input type="checkbox" checked={f.req} readOnly/> Required
            </label>
            {f.core ? (
              <span style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Core</span>
            ) : (
              <button style={iconBtnStyle}><Icon name="close" size={11}/></button>
            )}
          </div>
        ))}
        <Button variant="ghost" size="sm" icon="plus">Add custom field</Button>
      </SettingsSection>

      <SettingsSection title="Per-ticket vs. per-order">
        <SettingRow title="Collect info per ticket" sub="Ask attendee name on every ticket, not just the buyer"><Toggle checked={false} onChange={()=>{}}/></SettingRow>
        <SettingRow title="Allow editing after purchase" sub="Buyers can update attendee names until 24h before doors" last><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      </SettingsSection>
    </>
  );
};

const iconBtnStyle = {
  width: 24, height: 24, borderRadius: 6, border: '1px solid var(--line)',
  background: 'var(--bg-raised)', color: 'var(--ink-3)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer',
};

// Communication
const SettingsComm = () => (
  <>
    <SettingsSection title="Sender identity" desc="What buyers see when emails land in their inbox.">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Field label="From name"><Input value="Universal Music DE"/></Field>
        <Field label="Reply-to email"><Input value="tickets@universalmusic.de" prefix={<Icon name="mail" size={12}/>}/></Field>
        <Field label="SMS sender ID"><Input value="UNIMUS" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
        <Field label="WhatsApp template ID"><Input value="t_apparat_confirm_01" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
      </div>
    </SettingsSection>

    <SettingsSection title="Transactional messages" desc="What goes out automatically at each step.">
      {[
        { l: 'Booking confirmation',    ch: 'Email + SMS',            on: true },
        { l: 'Ticket delivery',          ch: 'Email (with QR PDF)',   on: true },
        { l: 'Payment receipt',          ch: 'Email',                  on: true },
        { l: '7 days before event',      ch: 'Email reminder',         on: true },
        { l: '24h before doors',         ch: 'Email + SMS reminder',   on: true },
        { l: '2h before doors',          ch: 'SMS + WhatsApp',         on: false },
        { l: 'Post-event survey',        ch: 'Email, 2h after',        on: true },
      ].map((r, i, arr) => (
        <SettingRow key={r.l} title={r.l} sub={r.ch} last={i === arr.length - 1}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <button style={{ background: 'transparent', border: 0, color: 'var(--accent)', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>Edit template</button>
            <Toggle checked={r.on} onChange={()=>{}}/>
          </div>
        </SettingRow>
      ))}
    </SettingsSection>

    <SettingsSection title="Marketing permission">
      <SettingRow title="Add checkbox at checkout" sub="Buyers can opt in to future marketing emails"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="Pre-tick by default" sub="Not recommended — violates DSGVO guidance" last><Toggle checked={false} onChange={()=>{}}/></SettingRow>
    </SettingsSection>
  </>
);

// Access
const SettingsAccess = () => {
  const members = [
    { name: 'Priya Menon', email: 'priya@universalmusic.de', role: 'Owner',    you: true },
    { name: 'Jonas Richter', email: 'jonas@universalmusic.de', role: 'Manager' },
    { name: 'Lena Weber',   email: 'lena@universalmusic.de',  role: 'Scanner' },
    { name: 'Gate Team · Berlin', email: 'gate-berlin@universalmusic.de', role: 'Scanner' },
  ];
  return (
    <>
      <SettingsSection title="Team members" desc="Who can manage or scan this event.">
        {members.map((m, i) => (
          <div key={m.email} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < members.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <Avatar name={m.name} size={36}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{m.name} {m.you && <span style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 500, marginLeft: 6 }}>(you)</span>}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{m.email}</div>
            </div>
            <Select value={m.role.toLowerCase()} options={[
              { value: 'owner', label: 'Owner' },
              { value: 'manager', label: 'Manager' },
              { value: 'scanner', label: 'Scanner' },
              { value: 'viewer', label: 'Viewer' },
            ]} disabled={m.you}/>
            {!m.you && <button style={iconBtnStyle}><Icon name="close" size={11}/></button>}
          </div>
        ))}
        <Button variant="ghost" size="sm" icon="plus" style={{ marginTop: 10 }}>Invite teammate</Button>
      </SettingsSection>

      <SettingsSection title="Gate scanner PIN" desc="Quick code for scanner apps at the venue.">
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{
            padding: '10px 18px', borderRadius: 10, background: 'var(--bg-sunken)',
            border: '1px solid var(--line)', fontFamily: 'var(--font-mono)', fontSize: 18, letterSpacing: '0.1em', fontWeight: 600,
          }}>4821-90</div>
          <Button variant="ghost" size="sm" icon="refresh">Regenerate</Button>
          <div style={{ flex: 1 }}/>
          <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>Expires at end of event</span>
        </div>
      </SettingsSection>
    </>
  );
};

// Advanced
const SettingsAdvanced = () => (
  <>
    <SettingsSection title="Tracking & analytics">
      <Field label="Google Analytics 4 measurement ID"><Input value="G-J9Q4HZ1LM2" style={{ fontFamily: 'var(--font-mono)' }} prefix={<Icon name="bar" size={12}/>}/></Field>
      <Field label="Meta Pixel ID" style={{ marginTop: 12 }}><Input placeholder="1234567890" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
      <Field label="Custom event parameters" style={{ marginTop: 12 }}>
        <Textarea rows={3} placeholder='{"campaign": "sommer-tour", "artist": "apparat"}' style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}/>
      </Field>
    </SettingsSection>

    <SettingsSection title="Webhooks" desc="POST to your endpoint on every booking, refund, or check-in.">
      <div style={{ padding: 12, border: '1px solid var(--line)', borderRadius: 10, background: 'var(--bg-sunken)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--success)' }}/>
          <span className="mono" style={{ fontSize: 12.5, flex: 1 }}>https://api.universalmusic.de/hooks/tixwerk</span>
          <span style={{ fontSize: 11, color: 'var(--success)' }}>Healthy</span>
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 8 }}>Last delivery: 2 min ago · booking.created · 200 OK</div>
      </div>
      <Button variant="ghost" size="sm" icon="plus" style={{ marginTop: 10 }}>Add webhook</Button>
    </SettingsSection>

    <SettingsSection title="API access">
      <SettingRow title="Public API" sub="Read-only access to bookings, tickets, and analytics"><Toggle checked={true} onChange={()=>{}}/></SettingRow>
      <SettingRow title="API key" sub="Use in Authorization: Bearer header" last>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 12, padding: '4px 10px', background: 'var(--bg-sunken)', borderRadius: 6 }}>txw_live_••••RT8q</span>
          <Button variant="ghost" size="sm" icon="copy"/>
          <Button variant="ghost" size="sm" icon="refresh"/>
        </div>
      </SettingRow>
    </SettingsSection>
  </>
);

// Danger zone
const SettingsDanger = () => (
  <>
    <SettingsSection title="Pause sales" desc="Hide all ticket tiers from the event page. Existing tickets still work." danger>
      <Button variant="ghost" icon="pause" style={{ borderColor: 'color-mix(in oklch, var(--warning) 40%, var(--line))', color: 'oklch(0.48 0.16 75)' }}>Pause sales temporarily</Button>
    </SettingsSection>

    <SettingsSection title="Duplicate event" desc="Copy this event's tiers, settings, and team as a new draft.">
      <Button variant="ghost" icon="copy">Duplicate to new draft</Button>
    </SettingsSection>

    <SettingsSection title="Cancel event" desc="Invalidates all tickets and triggers automatic refunds. Buyers are emailed immediately. Cannot be undone." danger>
      <div style={{ padding: 12, background: 'color-mix(in oklch, var(--danger) 6%, transparent)', border: '1px solid color-mix(in oklch, var(--danger) 25%, var(--line))', borderRadius: 8, marginBottom: 14, fontSize: 12.5, color: 'var(--ink-2)' }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <Icon name="warning" size={14} style={{ color: 'var(--danger)', marginTop: 2 }}/>
          <div>1.420 tickets will be refunded — total payout reversal of <b className="mono">{euro(58400, { compact: true })}</b>. Platform fees ({euro(2040, { compact: true })}) are refunded to you.</div>
        </div>
      </div>
      <Button variant="primary" icon="close" style={{ background: 'var(--danger)', borderColor: 'var(--danger)' }}>Cancel this event</Button>
    </SettingsSection>

    <SettingsSection title="Delete event" desc="Permanently remove this event and all analytics. Only works for drafts with no bookings." danger>
      <Button variant="ghost" icon="trash" style={{ borderColor: 'color-mix(in oklch, var(--danger) 40%, var(--line))', color: 'var(--danger)' }} disabled>Delete event</Button>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>Disabled — this event has active bookings. Cancel first.</div>
    </SettingsSection>
  </>
);

// ─── Embed ────────────────────────────────────────────────────────────────────

const EventDetailEmbed = () => {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
      <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
        <Card>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>Embed this event</h3>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2, marginBottom: 16 }}>Drop a ticket widget into your own site — checkout happens in-place, no redirects.</div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 16 }}>
            {[
              { l: 'Full widget', sub: 'Tiers + checkout' },
              { l: 'Compact', sub: '"Book now" button' },
              { l: 'Countdown', sub: 'Stream-style banner' },
            ].map((v, i) => (
              <button key={v.l} style={{
                padding: '12px 10px', borderRadius: 10, textAlign: 'left',
                border: `1px solid ${i === 0 ? 'var(--accent)' : 'var(--line)'}`,
                background: i === 0 ? 'color-mix(in oklch, var(--accent) 6%, var(--bg-raised))' : 'var(--bg-raised)',
                cursor: 'pointer', fontFamily: 'inherit',
              }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: i === 0 ? 'var(--accent)' : 'var(--ink)' }}>{v.l}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{v.sub}</div>
              </button>
            ))}
          </div>

          <Field label="Theme">
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                { l: 'Light', bg: '#fff', ink: '#171717' },
                { l: 'Dark', bg: '#0a0a0a', ink: '#fafafa' },
                { l: 'Match parent', bg: 'transparent', ink: 'var(--ink)' },
              ].map((t, i) => (
                <button key={t.l} style={{
                  flex: 1, padding: '10px 12px', borderRadius: 8,
                  border: `1px solid ${i === 1 ? 'var(--accent)' : 'var(--line)'}`,
                  background: t.bg === 'transparent' ? 'repeating-linear-gradient(45deg, var(--bg-sunken) 0, var(--bg-sunken) 4px, var(--bg-raised) 4px, var(--bg-raised) 8px)' : t.bg,
                  color: t.ink, fontSize: 12, fontWeight: 500, cursor: 'pointer',
                }}>{t.l}</button>
              ))}
            </div>
          </Field>

          <Field label="Accent color" style={{ marginTop: 12 }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              {['#D94F30','#7C3AED','#0EA5E9','#16A34A','#DB2777','#0F172A'].map(c => (
                <button key={c} style={{ width: 28, height: 28, borderRadius: '50%', background: c, border: c === '#D94F30' ? '2px solid var(--ink)' : '1px solid var(--line)', cursor: 'pointer', boxShadow: c === '#D94F30' ? '0 0 0 2px var(--bg-raised)' : 'none' }}/>
              ))}
              <Input value="#D94F30" style={{ width: 110, fontFamily: 'var(--font-mono)' }}/>
            </div>
          </Field>

          <div style={{ marginTop: 18, padding: 14, borderRadius: 10, background: 'var(--ink)', color: '#e5e5e5' }}>
            <div style={{ fontSize: 11, color: 'oklch(0.7 0.02 240)', marginBottom: 8, display: 'flex', alignItems: 'center' }}>
              <span>HTML snippet</span>
              <div style={{ flex: 1 }}/>
              <button style={{ background: 'transparent', border: '1px solid oklch(0.3 0.02 240)', color: '#e5e5e5', padding: '3px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer', fontFamily: 'inherit' }}>Copy</button>
            </div>
            <pre style={{ margin: 0, fontSize: 11.5, fontFamily: 'var(--font-mono)', lineHeight: 1.7, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
{`<script src="https://tixwerk.de/embed.js" async></script>
<div
  data-tixwerk-event="apparat-berghain"
  data-theme="dark"
  data-accent="#D94F30"
  data-variant="full"
></div>`}
            </pre>
          </div>
        </Card>

        <Card>
          <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Share & distribute</h3>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2, marginBottom: 14 }}>Where are most of your sales coming from?</div>
          {[
            { icon: 'link', label: 'Direct link', sub: '1,820 clicks · 9% conv', color: 'var(--ink-2)' },
            { icon: 'instagram', label: 'Instagram bio', sub: '842 clicks · 14% conv', color: 'oklch(0.62 0.18 15)' },
            { icon: 'whatsapp', label: 'WhatsApp', sub: '634 clicks · 21% conv', color: 'oklch(0.68 0.15 155)' },
            { icon: 'embed', label: 'Embed (3 sites)', sub: '418 clicks · 17% conv', color: 'oklch(0.52 0.12 265)' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: i<3?'1px solid var(--line)':'none' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: s.color }}><Icon name={s.icon} size={14}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.label}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.sub}</div>
              </div>
              <Button variant="ghost" size="sm" icon="copy" style={{ padding: '0 8px' }}/>
            </div>
          ))}
        </Card>
      </div>

      {/* Live preview */}
      <Card style={{ position: 'sticky', top: 80, alignSelf: 'start' }}>
        <div style={{ display:'flex', alignItems:'center', marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Live preview</h3>
          <div style={{ flex:1 }}/>
          <SegControl value="desktop" onChange={()=>{}} options={[
            {value:'desktop', label:<Icon name="desktop" size={12}/>},
            {value:'mobile', label:<Icon name="mobile" size={12}/>},
          ]}/>
        </div>
        {/* Fake embedded widget dark */}
        <div style={{ borderRadius: 14, padding: 20, background: '#0a0a0a', color: '#fafafa' }}>
          <div style={{ fontSize: 11, color: 'oklch(0.7 0.02 240)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>Sa, 24. Mai · Berlin</div>
          <div style={{ fontSize: 22, fontFamily: 'var(--font-display)', lineHeight: 1.2, marginBottom: 6 }}>Apparat</div>
          <div style={{ fontSize: 13, color: 'oklch(0.75 0.02 240)', marginBottom: 18 }}>LP5 Live · Berghain</div>

          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'oklch(0.7 0.02 240)', marginBottom: 10 }}>Choose a tier</div>
          {[
            { name: 'VIP — Floor', price: 120, left: 20 },
            { name: 'Stehplatz', price: 45, left: 220 },
            { name: 'Balkon', price: 68, left: 60 },
          ].map((t, i) => (
            <div key={t.name} style={{ display: 'flex', alignItems: 'center', padding: '12px 14px', borderRadius: 10, background: i === 0 ? 'oklch(0.18 0.02 240)' : 'transparent', border: `1px solid ${i === 0 ? '#D94F30' : 'oklch(0.22 0.02 240)'}`, marginBottom: 8 }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                <div style={{ fontSize: 11, color: 'oklch(0.65 0.02 240)' }}>{t.left} left</div>
              </div>
              <div style={{ flex: 1 }}/>
              <div className="mono" style={{ fontSize: 14, fontWeight: 600 }}>{euro(t.price)}</div>
            </div>
          ))}

          <button style={{
            width: '100%', marginTop: 12, padding: '13px', borderRadius: 10,
            background: '#D94F30', color: '#fff', border: 0, fontSize: 14, fontWeight: 600,
            fontFamily: 'inherit', cursor: 'pointer',
          }}>{`Book 1× VIP · ${euro(120)}`}</button>

          <div style={{ fontSize: 10, color: 'oklch(0.55 0.02 240)', textAlign: 'center', marginTop: 14 }}>
            Powered by Tixwerk · Secure checkout
          </div>
        </div>
      </Card>
    </div>
  );
};

window.EventDetailBlockSeats = EventDetailBlockSeats;
window.EventDetailReminders = EventDetailReminders;
window.EventDetailSettings = EventDetailSettings;
window.EventDetailEmbed = EventDetailEmbed;