// signup.jsx — Anmälningssektion för event (Sandaredsdagen & Höstmarknad)

function DarkField({ label, placeholder, type = 'text', span = 1, textarea, name, required }) {
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <div style={{ gridColumn: `span ${span}` }}>
      <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: SITE_TOKENS.cream + 'cc', marginBottom: 7, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        {label}{required && <span style={{ color: SITE_TOKENS.sun }}> *</span>}
      </label>
      <Tag
        className="dark-field"
        name={name}
        required={required}
        type={textarea ? undefined : type}
        placeholder={placeholder}
        rows={textarea ? 3 : undefined}
        style={{
          width: '100%', padding: '14px 16px', borderRadius: 12,
          border: 0, background: 'rgba(255,255,255,0.08)',
          color: SITE_TOKENS.cream, fontSize: 14, fontFamily: 'inherit',
          outline: 'none', resize: textarea ? 'vertical' : undefined,
          boxShadow: `inset 0 0 0 1.5px ${SITE_TOKENS.cream}22`,
          transition: 'box-shadow .15s, background .15s',
        }}
        onFocus={e => { e.target.style.boxShadow = `inset 0 0 0 1.5px ${SITE_TOKENS.sun}`; e.target.style.background = 'rgba(255,255,255,0.14)'; }}
        onBlur={e => { e.target.style.boxShadow = `inset 0 0 0 1.5px ${SITE_TOKENS.cream}22`; e.target.style.background = 'rgba(255,255,255,0.08)'; }}
      />
    </div>
  );
}

// ─── Hjälpfunktion: spara påminnelsemail (mot /api) ────────────────────
function saveReminder(eventId, email) {
  return API.post('reminders', { eventId, email });
}

// ─── Hjälpfunktion: skicka in anmälan (mot /api) ───────────────────────
function submitSignup(form, eventId, type) {
  const fd = new FormData(form);
  return API.post('signups', {
    eventId,
    typ:     type === 'foretag' ? 'Företag' : 'Förening',
    namn:    fd.get('namn')    || '',
    kontakt: fd.get('kontakt') || '',
    mobil:   fd.get('mobil')   || '',
    email:   fd.get('email')   || '',
    plats:   fd.get('plats')   || '',
    ovrigt:  fd.get('ovrigt')  || '',
  });
}

// ─── Desktop ──────────────────────────────────────────────────────────
function DesktopAnmal() {
  const [activeEvent, setActiveEvent] = React.useState(SIGNUP_EVENTS[0].id);
  const [type, setType] = React.useState('foretag');
  const [submitted, setSubmitted] = React.useState(false);
  const [remEmail,   setRemEmail]   = React.useState('');
  const [remThanks,  setRemThanks]  = React.useState(false);
  const T = SITE_TOKENS;

  return (
    <section id="anmal" style={{ padding: '110px 64px', background: T.cream }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginBottom: 50 }}>
        <SectionHead
          eyebrow="Anmäl er till våra event"
          title={<>Var med och fyll <span className="serif" style={{ color: T.coral }}>Sandaredsdagen</span>.</>}
          subtitle="Årets absoluta höjdpunkt i Sandared"
          titleSize={56} maxWidth={720}
        />
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'flex-end' }}>
          <div style={{ textAlign: 'right' }}>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Snabb status</div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 32, fontWeight: 700, color: T.forest, lineHeight: 1 }}>2 event</div>
            <div style={{ fontSize: 13, color: T.muted, marginTop: 4 }}>öppna för anmälan</div>
          </div>
        </div>
      </div>

      {/* Event tabs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20, marginBottom: 32 }}>
        {SIGNUP_EVENTS.map(ev => {
          const Illu = window[ev.illu];
          const active = activeEvent === ev.id;
          return (
            <button key={ev.id} onClick={() => { setActiveEvent(ev.id); setSubmitted(false); setRemEmail(''); setRemThanks(false); }} style={{ textAlign: 'left', padding: 0, background: 'transparent', border: 0, cursor: 'pointer' }}>
              <div style={{
                background: T.paper, borderRadius: 20, overflow: 'hidden',
                boxShadow: active ? `0 0 0 3px ${ev.accent}, 0 16px 40px rgba(31,42,36,0.12)` : `inset 0 0 0 1.5px ${T.line}, 0 1px 0 ${T.line}`,
                transition: 'box-shadow .15s, transform .15s',
                transform: active ? 'translateY(-2px)' : 'none',
                display: 'grid', gridTemplateColumns: '180px 1fr',
              }}>
                <div style={{ background: ev.tint, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  <Illu size={140}/>
                  {active && <div style={{ position: 'absolute', top: 12, right: 12, background: ev.accent, color: '#fff', fontSize: 11, fontWeight: 700, padding: '5px 10px', borderRadius: 999, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Valt</div>}
                </div>
                <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 8, opacity: ev.signupOpen ? 1 : 0.92 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: ev.signupOpen ? ev.accent : T.muted }}/>
                    <span style={{ fontSize: 12, fontWeight: 600, color: ev.signupOpen ? ev.accent : T.muted, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                      {ev.signupOpen ? 'Anmälan öppen' : 'Anmälan stängd'}
                    </span>
                  </div>
                  <h3 style={{ fontSize: 24 }}>{ev.title}</h3>
                  <div style={{ fontSize: 14, color: T.ink2 }}>
                    <strong style={{ color: T.ink }}>{ev.date}</strong> · {ev.time}<br/>
                    {ev.place} · {ev.audience}
                  </div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
                    {ev.signupOpen ? (
                      <>
                        <span className="chip" style={{ background: ev.tint, boxShadow: 'none', color: ev.accent, fontSize: 11 }}>{ev.deadline}</span>
                        <span className="chip" style={{ background: T.cream2, boxShadow: 'none', fontSize: 11 }}>{ev.spotsLeft}</span>
                      </>
                    ) : (
                      <span className="chip" style={{ background: T.ink, color: T.cream, boxShadow: 'none', fontSize: 11, fontWeight: 600 }}>🕒 {ev.opensAt}</span>
                    )}
                  </div>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* Details + Form */}
      {(() => {
        const ev = SIGNUP_EVENTS.find(e => e.id === activeEvent);
        return (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 32 }}>
            <div className="card" style={{ padding: 40, alignSelf: 'start' }}>
              <div className="eyebrow" style={{ marginBottom: 8, color: ev.accent }}>Om eventet</div>
              <h3 style={{ fontSize: 32 }}>{ev.title}</h3>
              <p style={{ fontSize: 17, color: T.ink2, marginTop: 18, lineHeight: 1.6 }}>{ev.intro}</p>
              <p style={{ fontSize: 15, color: T.ink2, marginTop: 14, lineHeight: 1.65 }}>
                Vi möts i <strong style={{ color: T.ink }}>{ev.place}</strong> mellan <strong style={{ color: T.ink }}>{ev.time}</strong>. Förra året kom drygt {ev.audience.replace('+','')} besökare förbi — en perfekt dag att möta nya kunder, värva medlemmar eller bara visa upp vad ni gör i Sandared.
              </p>
              <p style={{ fontSize: 15, color: T.ink2, marginTop: 14, lineHeight: 1.65 }}>
                Som anmäld förening eller företag får ni en egen yta att inreda som ni vill. Vi hjälper er med praktiska detaljer i ett uppstartsmejl närmare datumet.
              </p>
              <div style={{ marginTop: 32, paddingTop: 28, borderTop: `1px solid ${T.line}`, textAlign: 'center' }}>
                <div className="eyebrow" style={{ marginBottom: 12, fontSize: 12 }}>Deadline för anmälan</div>
                <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 40, fontWeight: 700, color: ev.accent, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{ev.deadline}</div>
              </div>
            </div>

            <div style={{ background: T.forest, color: T.cream, borderRadius: 24, padding: 36, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -80, right: -80, width: 240, height: 240, borderRadius: '50%', background: ev.accent, opacity: 0.18 }}/>

              {!ev.signupOpen ? (
                <div style={{ position: 'relative', textAlign: 'center', padding: '40px 0' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(255,255,255,0.12)', margin: '0 auto 22px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={T.sun} strokeWidth="2" strokeLinecap="round">
                      <circle cx="12" cy="12" r="10"/><path d="M12 6 V12 L16 14"/>
                    </svg>
                  </div>
                  <div className="eyebrow" style={{ color: T.sun, marginBottom: 12 }}>Kommer snart</div>
                  <h3 style={{ fontSize: 30, color: T.cream }}>Anmälan till {ev.title} öppnar senare.</h3>
                  <p style={{ fontSize: 15, color: T.cream + 'cc', marginTop: 16, maxWidth: 420, margin: '16px auto 0', lineHeight: 1.55 }}>
                    {ev.opensAt}. Lämna er e-post nedan så får ni en påminnelse så fort vi öppnar.
                  </p>
                  {remThanks ? (
                    <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '14px 22px', borderRadius: 14, background: 'rgba(255,255,255,0.12)', maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>
                      <svg width="18" height="18" viewBox="0 0 24 24"><path d="M5 13 L10 18 L20 7" stroke={T.sun} strokeWidth="2.5" fill="none" strokeLinecap="round"/></svg>
                      <span style={{ fontSize: 14, color: T.cream, fontWeight: 600 }}>Tack! Vi hör av oss när anmälan öppnar.</span>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', gap: 8, marginTop: 28, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>
                      <input
                        className="dark-field"
                        placeholder="din@epost.se"
                        type="email"
                        value={remEmail}
                        onChange={e => setRemEmail(e.target.value)}
                        style={{ flex: 1, padding: '14px 16px', borderRadius: 12, border: 0, background: 'rgba(255,255,255,0.08)', color: T.cream, fontSize: 14, fontFamily: 'inherit', outline: 'none', boxShadow: `inset 0 0 0 1.5px ${T.cream}22` }}
                      />
                      <button
                        className="btn btn-primary"
                        style={{ background: ev.accent, color: '#fff', padding: '0 22px', fontSize: 14, flexShrink: 0 }}
                        onClick={async () => {
                          if (!remEmail.trim()) return;
                          try { await saveReminder(ev.id, remEmail.trim()); } catch (e) {}
                          setRemThanks(true);
                        }}
                      >Påminn mig</button>
                    </div>
                  )}
                </div>
              ) : submitted ? (
                <div style={{ position: 'relative', textAlign: 'center', padding: '40px 0' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: ev.accent, margin: '0 auto 22px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 13 L10 18 L20 7" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round"/></svg>
                  </div>
                  <h3 style={{ fontSize: 28, color: T.cream }}>Tack, vi har fått er anmälan!</h3>
                  <p style={{ fontSize: 15, color: T.cream + 'cc', marginTop: 14, maxWidth: 400, margin: '14px auto 0', lineHeight: 1.55 }}>
                    Vi skickar en bekräftelse till er e-post inom kort. Vi återkommer med detaljer senast två veckor innan eventet.
                  </p>
                  <button onClick={() => setSubmitted(false)} className="btn btn-secondary" style={{ marginTop: 26 }}>Anmäl ytterligare ett företag</button>
                </div>
              ) : (
                <form style={{ position: 'relative' }} onSubmit={(e) => {
                  e.preventDefault();
                  submitSignup(e.target, ev.id, type)
                    .then(() => setSubmitted(true))
                    .catch(() => alert('Något gick fel när anmälan skulle skickas. Försök igen.'));
                }}>
                  <div className="eyebrow" style={{ color: T.sun, marginBottom: 10 }}>Anmäl er till {ev.title}</div>
                  <h3 style={{ fontSize: 30, color: T.cream }}>Tre minuter, sen är ni med.</h3>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 22 }}>
                    {[['foretag','Företag'],['forening','Förening']].map(([id, label]) => {
                      const active = type === id;
                      return (
                        <button type="button" key={id} onClick={() => setType(id)} style={{ padding: '14px 18px', borderRadius: 12, background: active ? T.cream : 'transparent', color: active ? T.ink : T.cream, boxShadow: active ? 'none' : `inset 0 0 0 1.5px ${T.cream}44`, fontWeight: 600, fontSize: 14, textAlign: 'left', display: 'flex', alignItems: 'center', gap: 10 }}>
                          <div style={{ width: 18, height: 18, borderRadius: '50%', background: active ? ev.accent : 'transparent', boxShadow: active ? 'none' : `inset 0 0 0 1.5px ${T.cream}88`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            {active && <div style={{ width: 7, height: 7, background: '#fff', borderRadius: '50%' }}/>}
                          </div>
                          {label}
                        </button>
                      );
                    })}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }}>
                    <DarkField name="namn"    required label={type === 'foretag' ? 'Företagsnamn' : 'Föreningens namn'} placeholder={type === 'foretag' ? 'Sandareds AB' : 'Sandareds IF'} span={2}/>
                    <DarkField name="kontakt" required label="Kontaktperson" placeholder="Anna Andersson" span={1}/>
                    <DarkField name="mobil"   required label="Mobilnummer" placeholder="070-123 45 67" type="tel" span={1}/>
                    <DarkField name="email"   required label="E-post" placeholder="anna@exempel.se" type="email" span={2}/>
                    <DarkField name="plats"   label="Önskad plats" placeholder="T.ex. vid magasinet, skolan, sjön" span={2}/>
                    <DarkField name="ovrigt"  label="Övrig information" placeholder="El, vatten, tält, bord, andra önskemål..." textarea span={2}/>
                  </div>
                  <div style={{ marginTop: 22, padding: '14px 16px', borderRadius: 12, background: 'rgba(0,0,0,0.18)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={T.sun} strokeWidth="2" style={{ flexShrink: 0, marginTop: 2 }}>
                      <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16"/>
                    </svg>
                    <span style={{ fontSize: 12.5, color: T.cream + 'cc', lineHeight: 1.5 }}>
                      När ni skickar får ni ett bekräftelsemejl direkt och vi för in er i vårt anmälningsregister. Vi delar aldrig era uppgifter.
                    </span>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 18, background: ev.accent, padding: '18px 24px', fontSize: 16, color: '#fff' }}>
                    Skicka anmälan →
                  </button>
                </form>
              )}
            </div>
          </div>
        );
      })()}
    </section>
  );
}

// ─── Mobile ───────────────────────────────────────────────────────────
function MobileAnmal() {
  const [activeEvent, setActiveEvent] = React.useState(SIGNUP_EVENTS[0].id);
  const [type, setType] = React.useState('foretag');
  const [submitted, setSubmitted] = React.useState(false);
  const [remEmail, setRemEmail] = React.useState('');
  const [remThanks, setRemThanks] = React.useState(false);
  const T = SITE_TOKENS;
  const ev = SIGNUP_EVENTS.find(e => e.id === activeEvent);
  const Illu = window[ev.illu];

  return (
    <section id="anmal" style={{ padding: '40px 22px', background: T.cream }}>
      <SectionHead
        eyebrow="Anmäl er till våra event"
        title={<>Var med och fyll <span className="serif" style={{ color: T.coral }}>Sandareds dagar</span>.</>}
        subtitle="Föreningar och företag — anmäl er nedan, vi återkommer inom två dagar."
        titleSize={28}
      />
      <div style={{ display: 'flex', gap: 8, marginTop: 22, marginBottom: 16 }}>
        {SIGNUP_EVENTS.map(e => {
          const active = activeEvent === e.id;
          return (
            <button key={e.id} onClick={() => { setActiveEvent(e.id); setSubmitted(false); setRemEmail(''); setRemThanks(false); }} style={{ flex: 1, padding: 14, borderRadius: 14, background: active ? T.paper : 'transparent', boxShadow: active ? `0 0 0 2px ${e.accent}, 0 6px 16px rgba(31,42,36,0.08)` : `inset 0 0 0 1.5px ${T.line}`, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: e.accent, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{e.signupOpen ? 'Anmälan öppen' : 'Stängd'}</div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 15, fontWeight: 600 }}>{e.title}</div>
              <div style={{ fontSize: 11, color: T.muted }}>{e.date.split(' ').slice(0,2).join(' ')}</div>
            </button>
          );
        })}
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ background: ev.tint, padding: '18px 18px 0', display: 'flex', justifyContent: 'center' }}>
          <Illu size={120}/>
        </div>
        <div style={{ padding: 18 }}>
          <h3 style={{ fontSize: 20 }}>{ev.title}</h3>
          <div style={{ fontSize: 13, color: T.ink2, marginTop: 6 }}><strong>{ev.date}</strong> · {ev.time}<br/>{ev.place}</div>
          <p style={{ fontSize: 13, color: T.ink2, marginTop: 10, lineHeight: 1.5 }}>{ev.intro}</p>
          {Array.isArray(ev.inkluderar) && ev.inkluderar.length > 0 && (
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${T.line}` }}>
              <div className="eyebrow" style={{ marginBottom: 8, fontSize: 10 }}>Det här ingår</div>
              {ev.inkluderar.map(it => (
                <div key={it} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <div style={{ width: 14, height: 14, borderRadius: '50%', background: ev.accent + '22', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="8" height="8" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" stroke={ev.accent} strokeWidth="2.5" fill="none" strokeLinecap="round"/></svg>
                  </div>
                  <span style={{ fontSize: 12.5, color: T.ink2 }}>{it}</span>
                </div>
              ))}
            </div>
          )}
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${T.line}`, display: 'flex', justifyContent: 'space-between' }}>
            <div><div className="eyebrow" style={{ fontSize: 9, marginBottom: 2 }}>Deadline</div><div style={{ fontSize: 12.5, color: ev.accent, fontWeight: 600 }}>{ev.deadline}</div></div>
          </div>
        </div>
      </div>

      <div style={{ background: T.forest, color: T.cream, borderRadius: 18, padding: 20, marginTop: 18, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 180, height: 180, borderRadius: '50%', background: ev.accent, opacity: 0.18 }}/>
        {!ev.signupOpen ? (
          <div style={{ position: 'relative', textAlign: 'center', padding: '8px 0' }}>
            <div className="eyebrow" style={{ color: T.sun, marginBottom: 10 }}>Kommer snart</div>
            <h3 style={{ fontSize: 20, color: T.cream }}>Anmälan till {ev.title} öppnar senare.</h3>
            <p style={{ fontSize: 13, color: T.cream + 'cc', marginTop: 10, lineHeight: 1.55 }}>
              {ev.opensAt || 'Anmälan öppnar längre fram.'} Lämna din e-post så får du en påminnelse när vi öppnar.
            </p>
            {remThanks ? (
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 16px', borderRadius: 12, background: 'rgba(255,255,255,0.12)' }}>
                <svg width="16" height="16" viewBox="0 0 24 24"><path d="M5 13 L10 18 L20 7" stroke={T.sun} strokeWidth="2.5" fill="none" strokeLinecap="round"/></svg>
                <span style={{ fontSize: 13, color: T.cream, fontWeight: 600 }}>Tack! Vi hör av oss när anmälan öppnar.</span>
              </div>
            ) : (
              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <input className="dark-field" placeholder="din@epost.se" type="email" value={remEmail} onChange={e => setRemEmail(e.target.value)}
                  style={{ flex: 1, padding: '12px 14px', borderRadius: 10, border: 0, background: 'rgba(255,255,255,0.08)', color: T.cream, fontSize: 14, fontFamily: 'inherit', outline: 'none', boxShadow: `inset 0 0 0 1.5px ${T.cream}22` }}/>
                <button type="button" className="btn btn-primary" style={{ background: ev.accent, color: '#fff', padding: '0 18px', fontSize: 14, flexShrink: 0 }}
                  onClick={async () => { if (!remEmail.trim()) return; try { await saveReminder(ev.id, remEmail.trim()); } catch (e) {} setRemThanks(true); }}>
                  Påminn mig
                </button>
              </div>
            )}
          </div>
        ) : submitted ? (
          <div style={{ position: 'relative', textAlign: 'center', padding: '20px 0' }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', background: ev.accent, margin: '0 auto 14px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 13 L10 18 L20 7" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round"/></svg>
            </div>
            <h3 style={{ fontSize: 22, color: T.cream }}>Tack, vi har fått er anmälan!</h3>
            <p style={{ fontSize: 13, color: T.cream + 'cc', marginTop: 10 }}>Bekräftelse skickas till er e-post.</p>
            <button onClick={() => setSubmitted(false)} className="btn btn-secondary" style={{ marginTop: 14, fontSize: 13 }}>Anmäl ytterligare en</button>
          </div>
        ) : (
          <form style={{ position: 'relative' }} onSubmit={(e) => {
            e.preventDefault();
            submitSignup(e.target, ev.id, type)
              .then(() => setSubmitted(true))
              .catch(() => alert('Något gick fel när anmälan skulle skickas. Försök igen.'));
          }}>
            <div className="eyebrow" style={{ color: T.sun, marginBottom: 10 }}>Anmäl er</div>
            <h3 style={{ fontSize: 22, color: T.cream }}>{ev.title}</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 14 }}>
              {[['foretag','Företag'],['forening','Förening']].map(([id, label]) => {
                const active = type === id;
                return (
                  <button type="button" key={id} onClick={() => setType(id)} style={{ padding: '10px 12px', borderRadius: 10, background: active ? T.cream : 'transparent', color: active ? T.ink : T.cream, boxShadow: active ? 'none' : `inset 0 0 0 1.5px ${T.cream}44`, fontWeight: 600, fontSize: 13 }}>{label}</button>
                );
              })}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
              <DarkField name="namn"    required label={type === 'foretag' ? 'Företagsnamn' : 'Föreningens namn'} placeholder="Sandareds IF" span={2}/>
              <DarkField name="kontakt" required label="Kontaktperson" placeholder="Anna Andersson" span={2}/>
              <DarkField name="mobil"   required label="Mobilnummer" placeholder="070-123 45 67" type="tel" span={2}/>
              <DarkField name="email"   required label="E-post" placeholder="anna@exempel.se" type="email" span={2}/>
              <DarkField name="plats"   label="Önskad plats" placeholder="T.ex. Magasinet, skolan, sjön" span={2}/>
              <DarkField name="ovrigt"  label="Övrig information" placeholder="El, vatten, tält, bord, andra önskemål..." textarea span={2}/>
            </div>
            <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 16, background: ev.accent, padding: '14px 18px', fontSize: 14, color: '#fff' }}>
              Skicka anmälan →
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { DarkField, DesktopAnmal, MobileAnmal });