// mobile.jsx — Mobile site sections

function MobileTopBar() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const T = SITE_TOKENS;

  const NAV = [
    { label: 'Våra projekt',       href: '#projekt',     dot: T.forest },
    { label: 'Kalender',           href: '#kalender',    dot: T.sky    },
    { label: 'Anmäl er',           href: '#anmal',       dot: T.coral  },
    { label: 'Bli medlem',         href: '#medlem',       dot: T.forest },
    { label: 'Företagsmedlemmar',  href: '#foretag',      dot: T.sun    },
    { label: 'Bli företagsmedlem', href: '#bli-foretag',  dot: T.coral  },
    { label: 'Om oss',             href: '#om-oss',       dot: T.sky    },
  ];

  const close = () => setMenuOpen(false);

  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 30, background: T.cream, borderBottom: `1px solid ${T.line}` }}>
      {/* ── Rad 1: logga + knappar ── */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 20px' }}>
        <a href="#" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); close(); }}>
          <Wordmark size={30}/>
        </a>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            onClick={() => { window.dispatchEvent(new CustomEvent('openAdmin')); close(); }}
            style={{ width: 40, height: 40, borderRadius: 12, background: T.paper, boxShadow: `inset 0 0 0 1px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', border: 0, cursor: 'pointer' }}
            title="Logga in"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </button>
          <button onClick={() => setMenuOpen(v => !v)} style={{ width: 40, height: 40, borderRadius: 12, background: menuOpen ? T.forest : T.paper, boxShadow: menuOpen ? 'none' : `inset 0 0 0 1px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', border: 0, cursor: 'pointer', transition: 'background .18s' }}>
            {menuOpen
              ? <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 1L13 13M13 1L1 13" stroke={T.cream} strokeWidth="2.2" strokeLinecap="round"/></svg>
              : <svg width="18" height="14" viewBox="0 0 18 14"><path d="M0 1 H18 M0 7 H18 M0 13 H18" stroke={T.ink} strokeWidth="2" strokeLinecap="round"/></svg>
            }
          </button>
        </div>
      </div>

      {/* ── Dropdown-meny ── */}
      {menuOpen && (
        <div style={{ borderTop: `1px solid ${T.line}`, paddingBottom: 8 }}>
          {NAV.map((item, i) => (
            <a
              key={item.label}
              href={item.href}
              onClick={close}
              style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '13px 22px',
                borderBottom: i < NAV.length - 1 ? `1px solid ${T.line}` : 'none',
                fontSize: 16, fontWeight: 600, color: T.ink,
              }}
            >
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: item.dot, flexShrink: 0 }}/>
              {item.label}
            </a>
          ))}
          <div style={{ padding: '12px 22px 4px' }}>
            <a href="#medlem" onClick={close} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', background: T.coral, fontSize: 15 }}>
              Bli medlem · 200 kr/år →
            </a>
          </div>
        </div>
      )}
    </div>
  );
}

function MobileHero() {
  return (
    <section style={{ padding: '28px 22px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 240, height: 240, borderRadius: '50%',
        background: `radial-gradient(circle at 30% 30%, ${SITE_TOKENS.sun}55, transparent 70%)`,
      }}/>
      <div className="chip" style={{ marginBottom: 18 }}>
        <span className="chip-dot" style={{ background: SITE_TOKENS.coral }}/>
        Sandared, för Sandared
      </div>
      <h1 style={{ fontSize: 42, lineHeight: 1, letterSpacing: '-0.03em' }}>
        Tillsammans gör vi{' '}
        <span style={{ display: 'inline-block', position: 'relative' }}>
          Sandared
          <span style={{ position: 'absolute', left: 0, bottom: -8 }}>
            <Squiggle color={SITE_TOKENS.coral} width={160}/>
          </span>
        </span>{' '}finare.
      </h1>
      <p style={{ fontSize: 15, color: SITE_TOKENS.ink2, marginTop: 18, lineHeight: 1.55 }}>
        Sedan 2006 driver vi projekt och evenemang i Sandared — bänkar i centrum, terrängbana,
        julbelysning, Sandaredsdagen och mer.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
        <a href="#medlem" className="btn btn-primary" style={{ justifyContent: 'center', padding: '16px 22px' }}>
          Bli medlem · 200 kr/år →
        </a>
        <a href="#anmal" className="btn" style={{
          justifyContent: 'center', padding: '16px 22px',
          background: SITE_TOKENS.coral, color: '#fff',
        }}>
          Anmäl er till event →
        </a>
        <a href="#projekt" className="btn btn-secondary" style={{ justifyContent: 'center', padding: '16px 22px' }}>
          Se våra projekt
        </a>
      </div>
      <div style={{ marginTop: 24, display: 'flex', justifyContent: 'center' }}>
        <HeroLandscape width={340} height={280}/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 22 }}>
        {STATS.map(s => (
          <div key={s.label} className="card" style={{ padding: 14 }}>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 26, fontWeight: 700, color: SITE_TOKENS.forest, lineHeight: 1 }}>{s.num}</div>
            <div style={{ fontSize: 11, color: SITE_TOKENS.muted, marginTop: 4 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MobileProjekt() {
  const [showModal, setShowModal] = React.useState(false);
  return (
    <section id="projekt" style={{ padding: '40px 22px', background: SITE_TOKENS.cream2 + '88' }}>
      {showModal && <ForeslaProjektModal onClose={() => setShowModal(false)}/>}
      <SectionHead
        eyebrow="Vad vi gör · Projekt"
        title={<>12 saker vi <span className="serif" style={{ color: SITE_TOKENS.coral }}>byggt</span> i Sandared.</>}
        subtitle="Allt från en bänk i centrum till hela Sandaredsdagen."
        titleSize={30}
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 22 }}>
        {PROJECTS.map(p => {
          const Illu = window[p.illu];
          return (
            <div key={p.id} className="card project-card" style={{ overflow: 'hidden' }}>
              <div style={{ background: p.tint, height: 100, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <Illu size={90}/>
              </div>
              <div style={{ padding: 12 }}>
                {p.year && (
                  <div style={{ fontSize: 9, fontWeight: 600, color: p.accent, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                    {p.year}
                  </div>
                )}
                <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 14, fontWeight: 600, marginTop: 4, lineHeight: 1.2 }}>
                  {p.title}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{
        marginTop: 18, padding: 18, borderRadius: 14,
        background: SITE_TOKENS.paper, boxShadow: `inset 0 0 0 1.5px ${SITE_TOKENS.line}`,
      }}>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 15, fontWeight: 600 }}>Saknar du något?</div>
        <p style={{ fontSize: 12.5, color: SITE_TOKENS.ink2, marginTop: 4 }}>
          Föreslå ett projekt — vi tar upp det på nästa styrelsemöte.
        </p>
        <button className="btn btn-primary" onClick={() => setShowModal(true)} style={{
          width: '100%', justifyContent: 'center', marginTop: 12, padding: '12px 16px', fontSize: 13,
        }}>Föreslå ett projekt →</button>
      </div>
    </section>
  );
}

function MobileKalender() {
  const [showSub, setShowSub] = React.useState(false);
  const [addEv, setAddEv] = React.useState(null);
  return (
    <section id="kalender" style={{ padding: '40px 22px' }}>
      {showSub && <CalSubscribeModal onClose={() => setShowSub(false)}/>}
      {addEv && <CalAddModal ev={addEv} onClose={() => setAddEv(null)}/>}
      <SectionHead
        eyebrow="Kalender 2026"
        title="Allt som händer i Sandared."
        subtitle="Spara datumen. Du behöver inte vara medlem."
        titleSize={30}
      />
      <div className="card" style={{ marginTop: 22, padding: '4px 18px' }}>
        {EVENTS.slice(0, 6).map((event, i) => (
          <div key={event.date} className="event-row" style={{
            display: 'grid', gridTemplateColumns: '54px 1fr auto', gap: 12, padding: '14px 0',
            borderTop: i === 0 ? 'none' : `1px solid ${SITE_TOKENS.line}`, alignItems: 'center',
          }}>
            <div className="event-badge" style={{ textAlign: 'center', padding: '8px 0', background: event.accent + '22', borderRadius: 10 }}>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 20, fontWeight: 700, color: event.accent, lineHeight: 1 }}>{event.day}</div>
              <div style={{ fontSize: 9, color: event.accent, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{event.month}</div>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 15, fontWeight: 600, lineHeight: 1.2 }}>{event.title}</div>
              <div style={{ fontSize: 12, color: SITE_TOKENS.muted, marginTop: 2 }}>{event.time} · {event.place}</div>
            </div>
            <button onClick={() => setAddEv(event)} title="Lägg till i kalender" style={{ width: 38, height: 38, borderRadius: 10, background: SITE_TOKENS.cream2, border: `1px solid ${SITE_TOKENS.line}`, color: event.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9 H21 M8 3 V7 M16 3 V7 M12 13 V17 M10 15 H14"/></svg>
            </button>
          </div>
        ))}
      </div>
      <a href={CalendarUtils.feedUrl()} onClick={e => { e.preventDefault(); setShowSub(true); }} className="btn" style={{ width: '100%', justifyContent: 'center', marginTop: 14, display: 'flex', gap: 9, background: SITE_TOKENS.forest, color: SITE_TOKENS.cream, padding: '15px 18px', fontSize: 15, boxShadow: '0 8px 20px rgba(45,95,78,0.28)' }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9 H21 M8 3 V7 M16 3 V7"/></svg>
        Prenumerera i din kalender →
      </a>
    </section>
  );
}

function MobileBliMedlem() {
  const T = SITE_TOKENS;
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const handlePrivSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    const fd = new FormData(e.target);
    setError('');
    setSubmitting(true);
    try {
      await API.post('members', {
        type: 'person',
        namn: fd.get('namn') || '',
        email: fd.get('epost') || '',
        adress: fd.get('adress') || '',
        ort: fd.get('postnummer_ort') || '',
      });
      setSent(true);
    } catch (err) {
      setError('Något gick fel när anmälan skulle skickas. Kontrollera uppgifterna och försök igen.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="medlem" style={{ padding: '40px 22px', background: T.forest, color: T.cream, position: 'relative', overflow: 'hidden' }}>
      <div className="eyebrow" style={{ color: T.sun, marginBottom: 12 }}>Bli medlem</div>
      <h2 style={{ fontSize: 36, color: T.cream, letterSpacing: '-0.02em' }}>
        Tre minuter.<br/>Du är <span className="serif" style={{ color: T.sun }}>med</span>.
      </h2>
      <p style={{ marginTop: 14, fontSize: 14, color: T.cream + 'cc', lineHeight: 1.5 }}>
        200 kr/år för hela hushållet. Pengarna går till lokala projekt i Sandared.
      </p>

      {sent ? (
      <div style={{ background: T.cream, color: T.ink, borderRadius: 20, padding: 24, marginTop: 22, boxShadow: '0 16px 40px rgba(0,0,0,0.18)', textAlign: 'center' }}>
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: T.forest, margin: '0 auto 14px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="26" height="26" 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: 19 }}>Tack för din anmälan!</h3>
        <p style={{ fontSize: 13.5, color: T.ink2, marginTop: 10, lineHeight: 1.6 }}>
          Glöm inte att betala <strong>200 kr</strong> via Swish <strong>123-022 36 28</strong> (ange namn &amp; adress).
        </p>
      </div>
      ) : (
      <form onSubmit={handlePrivSubmit} style={{
        background: T.cream, color: T.ink,
        borderRadius: 20, padding: 22, marginTop: 22,
        boxShadow: '0 16px 40px rgba(0,0,0,0.18)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <h3 style={{ fontSize: 18 }}>Anmälan</h3>
          <span style={{ fontSize: 11, color: T.muted }}>Bli medlem</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            ['Namn',             'Anna Andersson',   'namn',           'text'],
            ['E-post',           'anna@exempel.se',  'epost',          'email'],
            ['Gatuadress',       'Bosgårdsvägen 12', 'adress',         'text'],
            ['Postnummer & ort', '518 30 Sandared',  'postnummer_ort', 'text'],
          ].map(([l, p, n, t]) => (
            <div key={l}>
              <label style={{ fontSize: 10, fontWeight: 600, color: T.ink2, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l} <span style={{ color: T.coral }}>*</span></label>
              <input name={n} type={t} placeholder={p} required style={{
                width: '100%', padding: '12px 14px', borderRadius: 10, marginTop: 5,
                border: `1.5px solid ${T.line}`, background: T.paper,
                fontSize: 14, fontFamily: 'inherit', outline: 'none',
              }}/>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 16, padding: 14, borderRadius: 12, background: T.ink, color: T.cream,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <img src="swish-qr.png" alt="Swish QR-kod" style={{ width: 52, height: 52, borderRadius: 8, display: 'block', flexShrink: 0 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.sun }}>Betala via Swish</div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 15, fontWeight: 600 }}>123-022 36 28</div>
            <a href={swishUrl(200, 'Ange namn och adress här')} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, padding: '7px 14px', borderRadius: 999, background: '#E6007E', color: '#fff', fontWeight: 700, fontSize: 12, textDecoration: 'none' }}>Öppna Swish →</a>
          </div>
        </div>

        <div style={{
          marginTop: 10, padding: 12, borderRadius: 12,
          background: T.cream2, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={T.forest} strokeWidth="2" strokeLinecap="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg>
          </div>
          <div>
            <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.muted, marginBottom: 1 }}>Alternativ: Bankgiro</div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 14, fontWeight: 600, color: T.ink }}>5819-6536</div>
            <div style={{ fontSize: 10, color: T.muted, marginTop: 1 }}>Ange namn och adress i meddelandet.</div>
          </div>
        </div>

        {error && (
          <div style={{ marginTop: 14, padding: '11px 14px', borderRadius: 12, background: '#FDE8E8', color: '#CC3333', fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 9 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            {error}
          </div>
        )}
        <button type="submit" disabled={submitting} className="btn btn-primary" style={{
          width: '100%', justifyContent: 'center', marginTop: 14,
          background: T.coral, padding: '15px 20px', fontSize: 15,
          opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer',
        }}>{submitting ? 'Skickar…' : 'Skicka in →'}</button>
      </form>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
        {[
          ['Bjuds in till årsmötet', T.sun],
          ['Påverka projekten vi driver', T.coral],
          ['Utskick via e-post', T.sky],
        ].map(([t, c]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 18, height: 18, borderRadius: '50%', background: c, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="10" height="10" viewBox="0 0 12 12">
                <path d="M2 6 L5 9 L10 3" stroke={T.forest} strokeWidth="2" fill="none" strokeLinecap="round"/>
              </svg>
            </div>
            <span style={{ fontSize: 13, color: T.cream }}>{t}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function MobileBliForetagsmedlem() {
  const T = SITE_TOKENS;
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const handleForetagSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    const fd = new FormData(e.target);
    setError('');
    setSubmitting(true);
    try {
      await API.post('members', {
        type: 'company',
        namn: fd.get('foretagsnamn') || '',
        orgnr: fd.get('orgnr') || '',
        kontaktperson: fd.get('kontaktperson') || '',
        email: fd.get('epost') || '',
        telefon: fd.get('telefon') || '',
      });
      setSent(true);
    } catch (err) {
      setError('Något gick fel när anmälan skulle skickas. Kontrollera uppgifterna och försök igen.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="bli-foretag" style={{ marginTop: 36, padding: '36px 22px', background: T.ink, color: T.cream, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: -80, right: -80, width: 220, height: 220, borderRadius: '50%',
        background: T.coral, opacity: 0.15,
      }}/>
      <div className="eyebrow" style={{ color: T.sun, marginBottom: 12, position: 'relative' }}>Bli företagsmedlem</div>
      <h3 style={{ fontSize: 28, color: T.cream, letterSpacing: '-0.025em', position: 'relative' }}>
        Driver du ett företag<br/>i Sandared?
      </h3>
      <p style={{ fontSize: 14, color: T.cream + 'cc', marginTop: 12, position: 'relative' }}>
        Anmäl ert företag direkt så hör vi av oss med avtal och faktura.
      </p>

      {sent ? (
      <div style={{ background: T.cream, color: T.ink, borderRadius: 18, padding: 24, marginTop: 22, position: 'relative', boxShadow: '0 16px 40px rgba(0,0,0,0.3)', textAlign: 'center' }}>
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: T.forest, margin: '0 auto 14px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="26" height="26" 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: 19, color: T.ink }}>Tack — vi har tagit emot er anmälan!</h3>
        <p style={{ fontSize: 13.5, color: T.ink2, marginTop: 10, lineHeight: 1.6 }}>
          Vi hör av oss inom kort med bekräftelse och anvisningar om hur ni betalar er medlemsavgift.
        </p>
      </div>
      ) : (
      <form onSubmit={handleForetagSubmit} style={{
        background: T.cream, color: T.ink,
        borderRadius: 18, padding: 20, marginTop: 22, position: 'relative',
        boxShadow: '0 16px 40px rgba(0,0,0,0.3)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ['Företagsnamn', 'Sandareds Bygg AB', 'foretagsnamn',  'text',  true],
            ['Org.nr',       '556xxx-xxxx',        'orgnr',         'text',  true],
            ['Kontaktperson','Anders Sundberg',     'kontaktperson', 'text',  true],
            ['E-post',       'anders@exempel.se',   'epost',         'email', true],
            ['Telefon',      '070-123 45 67',       'telefon',       'tel',   false],
          ].map(([l, p, n, t, req]) => (
            <div key={l}>
              <label style={{ fontSize: 10, fontWeight: 600, color: T.ink2, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l}{req && <span style={{ color: T.coral }}> *</span>}</label>
              <input name={n} type={t} placeholder={p} required={req} style={{
                width: '100%', padding: '11px 13px', borderRadius: 10, marginTop: 5,
                border: `1.5px solid ${T.line}`, background: T.paper,
                fontSize: 13.5, fontFamily: 'inherit', outline: 'none',
              }}/>
            </div>
          ))}
        </div>
        {error && (
          <div style={{ marginTop: 14, padding: '11px 14px', borderRadius: 12, background: '#FDE8E8', color: '#CC3333', fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 9 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            {error}
          </div>
        )}
        <button type="submit" disabled={submitting} className="btn btn-primary" style={{
          width: '100%', justifyContent: 'center', marginTop: 16,
          background: T.coral, padding: '14px 20px', fontSize: 14,
          opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer',
        }}>{submitting ? 'Skickar…' : 'Anmäl vårt företag →'}</button>

        <div style={{ marginTop: 14, padding: 14, borderRadius: 12, background: T.cream2 }}>
          <div style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: T.muted, marginBottom: 8 }}>Årsavgift</div>
          {[['Medlemsavgift', '200 kr'], ['Serviceavgift', '500 kr']].map(([label, amount], i) => (
            <div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: i === 0 ? 0 : 5 }}>
              <span style={{ fontSize: 12.5, color: T.ink2 }}>
                {label}{label === 'Serviceavgift' && <span style={{ fontSize: 10, color: T.muted }}> · avdragsgill</span>}
              </span>
              <span style={{ fontWeight: 600, fontSize: 13 }}>{amount}</span>
            </div>
          ))}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 8, paddingTop: 8, borderTop: `1px solid ${T.line}` }}>
            <span style={{ fontWeight: 700, fontSize: 13 }}>Totalt per år</span>
            <span style={{ fontFamily: 'Bricolage Grotesque', fontSize: 17, fontWeight: 700, color: T.forest }}>700 kr</span>
          </div>
        </div>

        <div style={{ marginTop: 10, padding: 12, borderRadius: 12, background: T.ink, color: T.cream, display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="swish-qr.png" alt="Swish QR-kod" style={{ width: 52, height: 52, borderRadius: 8, display: 'block', flexShrink: 0 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.sun, marginBottom: 2 }}>Betala via Swish</div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 14, fontWeight: 600 }}>123-022 36 28</div>
            <div style={{ fontSize: 10, color: T.cream + 'aa', marginTop: 2 }}>Ange företagsnamn i meddelandet.</div>
            <a href={swishUrl(700, 'Ange företagsnamn och adress här')} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, padding: '7px 14px', borderRadius: 999, background: '#E6007E', color: '#fff', fontWeight: 700, fontSize: 12, textDecoration: 'none' }}>Öppna Swish →</a>
          </div>
        </div>

        <div style={{ marginTop: 8, padding: 12, borderRadius: 12, background: T.cream2, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={T.forest} strokeWidth="2" strokeLinecap="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg>
          </div>
          <div>
            <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.muted, marginBottom: 1 }}>Alternativ: Bankgiro</div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 14, fontWeight: 600, color: T.ink }}>5819-6536</div>
            <div style={{ fontSize: 10, color: T.muted, marginTop: 1 }}>Ange företagsnamn och adress.</div>
          </div>
        </div>
      </form>
      )}

      <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${T.cream}22`, position: 'relative' }}>
        <div style={{ fontSize: 12, color: T.cream + 'aa' }}>Hellre prata direkt?</div>
        <div style={{ fontSize: 14, marginTop: 4 }}>
          Skicka ett mail till <strong>info@sandared.se</strong>
        </div>
      </div>
    </section>
  );
}

function MobileForetag() {
  const marqueeItems = [...PARTNERS, ...PARTNERS];
  return (
    <section id="foretag" style={{ padding: '40px 0 0', background: SITE_TOKENS.cream }}>
      <div style={{ padding: '0 22px' }}>
        <SectionHead
          eyebrow="Företagsmedlemmar"
          title={<>De som <span className="serif" style={{ color: SITE_TOKENS.coral }}>gör Sandared starkare</span>.</>}
          subtitle="Handla lokalt och stötta tillbaka."
          titleSize={28}
        />
      </div>

      <div className="marquee-mask" style={{
        marginTop: 22, padding: '12px 0',
        background: SITE_TOKENS.cream2 + '88',
        borderTop: `1px solid ${SITE_TOKENS.line}`,
        borderBottom: `1px solid ${SITE_TOKENS.line}`,
      }}>
        <div className="marquee-track" style={{ gap: 28 }}>
          {marqueeItems.map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: SITE_TOKENS.coral }}/>
              <span style={{ fontFamily: 'Bricolage Grotesque', fontSize: 18, fontWeight: 600, color: SITE_TOKENS.ink, letterSpacing: '-0.015em' }}>
                {p.name}
              </span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        {(() => {
          const dotColors = [SITE_TOKENS.coral, SITE_TOKENS.forest, SITE_TOKENS.sun, SITE_TOKENS.sky];
          return (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {PARTNERS.map((p, i) => (
                <div key={p.name} className="card partner-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: dotColors[i % dotColors.length], flexShrink: 0 }}/>
                  <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.2 }}>{p.name}</div>
                </div>
              ))}
            </div>
          );
        })()}
      </div>

      <MobileBliForetagsmedlem/>
    </section>
  );
}

function MobileOmOss() {
  const T = SITE_TOKENS;
  const MAvatar = window.MemberAvatar;
  return (
    <section id="om-oss" style={{ padding: '40px 22px', background: T.cream2 + '55' }}>
      <SectionHead
        eyebrow="Om oss · Styrelsen 2026"
        title={<>Drivna av <span className="serif" style={{ color: T.coral }}>kärlek till Sandared.</span></>}
        subtitle="Styrelsen väljs varje år och arbetar ideellt — grannar, föräldrar, eldsjälar."
        titleSize={28}
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 24 }}>
        {BOARD.map(member => (
          <div key={member.name} className="card" style={{ padding: '20px 14px', textAlign: 'center' }}>
            <MAvatar color={member.color} size={60}/>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 14, fontWeight: 600, marginTop: 12, lineHeight: 1.25 }}>{member.name}</div>
            <div style={{ fontSize: 11, color: T.muted, marginTop: 4 }}>{member.role}</div>
          </div>
        ))}
      </div>
      <a href={STADGAR_URL} download="stadgar.pdf" className="btn btn-secondary" style={{ width: '100%', justifyContent: 'center', marginTop: 18, display: 'flex', gap: 8, fontSize: 13 }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Ladda ned stadgar (PDF)
      </a>
    </section>
  );
}

function MobileFooter() {
  return (
    <footer id="kontakt" style={{ background: SITE_TOKENS.forestDk, color: SITE_TOKENS.cream, padding: '32px 22px 90px' }}>
      <Wordmark size={36} dark/>
      <p style={{ marginTop: 14, fontSize: 12, color: SITE_TOKENS.cream + 'aa', lineHeight: 1.6 }}>
        Ideell förening grundad 2006.<br/>
        <a href="mailto:info@sandared.se" style={{ color: SITE_TOKENS.cream + 'aa' }}>info@sandared.se</a>
      </p>
      <div style={{ marginTop: 18 }}>
        <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Få information om event &amp; nyheter</div>
        <InfoSignup dark/>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
        {[['Facebook','https://www.facebook.com/groups/SandaredsIntresseforening']].map(([s, href]) => (
          <a key={s} href={href} className="chip" style={{
            background: 'transparent', color: SITE_TOKENS.cream,
            boxShadow: `inset 0 0 0 1px ${SITE_TOKENS.cream}33`,
          }}>{s}</a>
        ))}
      </div>
      <div style={{ marginTop: 18, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <a onClick={openPolicy} style={{ cursor: 'pointer', fontSize: 12, color: SITE_TOKENS.cream + 'aa' }}>Integritetspolicy</a>
        <a onClick={openPolicy} style={{ cursor: 'pointer', fontSize: 12, color: SITE_TOKENS.cream + 'aa' }}>Cookies</a>
      </div>
      <div style={{ marginTop: 14, fontSize: 11, color: SITE_TOKENS.cream + '77' }}>
        © 2026 · Skapad med kärlek i Sandared
      </div>
    </footer>
  );
}

function MobileSite() {
  return (
    <div style={{ width: '100%', background: SITE_TOKENS.cream }}>
      <MobileTopBar/>
      <MobileHero/>
      <MobileProjekt/>
      <MobileKalender/>
      <MobileAnmal/>
      <MobileBliMedlem/>
      <MobileForetag/>
      <MobileOmOss/>
      <MobileFooter/>
    </div>
  );
}

Object.assign(window, { MobileSite });