// desktop.jsx — Alla desktop-sektioner för Sandareds Intresseförening

function FormField({ label, placeholder, type = 'text', span = 1, hint, name, required }) {
  const T = SITE_TOKENS;
  return (
    <div style={{ gridColumn: `span ${span}` }}>
      <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: T.ink2, marginBottom: 8, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{label}{required && <span style={{ color: T.coral }}> *</span>}</label>
      <input name={name} required={required} type={type} placeholder={placeholder} style={{ width: '100%', padding: '16px 18px', borderRadius: 12, border: `1.5px solid ${T.line}`, background: T.paper, fontSize: 15, fontFamily: 'inherit', color: T.ink, outline: 'none', transition: 'border-color .15s, box-shadow .15s' }}
        onFocus={e => { e.target.style.borderColor = T.forest; e.target.style.boxShadow = `0 0 0 4px ${T.forest}20`; }}
        onBlur={e => { e.target.style.borderColor = T.line; e.target.style.boxShadow = 'none'; }}/>
      {hint && <div style={{ fontSize: 12, color: T.muted, marginTop: 6 }}>{hint}</div>}
    </div>
  );
}

function MemberAvatar({ color, size = 80 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: color + '18', border: `2.5px solid ${color}33`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
      <svg viewBox="0 0 48 48" width={size * 0.58} height={size * 0.58} fill="none">
        <circle cx="24" cy="15" r="10" fill={color} opacity="0.85"/>
        <path d="M5 46 C5 34 12 28 24 28 C36 28 43 34 43 46" fill={color} opacity="0.65"/>
      </svg>
    </div>
  );
}

function StepBadge({ n, label, active }) {
  const T = SITE_TOKENS;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: active ? 1 : 0.45 }}>
      <div style={{ width: 28, height: 28, borderRadius: '50%', background: active ? T.coral : T.line, color: active ? '#fff' : T.muted, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>{n}</div>
      <span style={{ fontSize: 13, fontWeight: 500 }}>{label}</span>
    </div>
  );
}

function PartnerLogoMark({ name, color }) {
  const T = SITE_TOKENS;
  const initials = name.split(' ').map(w => w[0]).slice(0,2).join('');
  return (
    <div style={{ width: 56, height: 56, borderRadius: 14, background: color || T.cream2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 19, color: T.ink, flexShrink: 0 }}>{initials}</div>
  );
}

// ─── Nav ──────────────────────────────────────────────────────────────
function DesktopNav() {
  const T = SITE_TOKENS;
  const NAV_ITEMS = [
    { label: 'Våra projekt',         href: '#projekt'    },
    { label: 'Kalender',             href: '#kalender'   },
    { label: 'Anmäl er',             href: '#anmal'      },
    { label: 'Bli medlem',           href: '#medlem'     },
    { label: 'Företagsmedlemmar',    href: '#foretag'    },
    { label: 'Bli företagsmedlem',   href: '#bli-foretag'},
    { label: 'Om oss',               href: '#om-oss'     },
  ];
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 64px', borderBottom: `1px solid ${T.line}`, background: T.cream + 'EE', backdropFilter: 'blur(8px)', position: 'sticky', top: 0, zIndex: 50 }}>
      <a href="#toppen" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        <Wordmark size={38}/>
      </a>
      <nav style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
        {NAV_ITEMS.map(item => (
          <a key={item.label} href={item.href} style={{ fontSize: 13, fontWeight: 500, color: T.ink2, transition: 'color .15s', whiteSpace: 'nowrap' }}
            onMouseEnter={e => e.target.style.color = T.ink}
            onMouseLeave={e => e.target.style.color = T.ink2}>
            {item.label}
          </a>
        ))}
      </nav>
      <div style={{ display: 'flex', gap: 10 }}>
        <button className="btn btn-secondary" onClick={() => window.dispatchEvent(new CustomEvent('openAdmin'))} style={{ padding: '10px 16px', fontSize: 14, display: 'flex', alignItems: 'center', gap: 7 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
          Logga in
        </button>
        <a href="#medlem" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }}>Bli medlem</a>
      </div>
    </div>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────
function DesktopHero() {
  const T = SITE_TOKENS;
  return (
    <section style={{ position: 'relative', padding: '80px 64px 90px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -120, right: -120, width: 480, height: 480, borderRadius: '50%', background: `radial-gradient(circle at 30% 30%, ${T.sun}55, transparent 70%)` }}/>
      <div style={{ position: 'absolute', bottom: -160, left: -80, width: 360, height: 360, borderRadius: '50%', background: `radial-gradient(circle at 30% 30%, ${T.sky}44, transparent 70%)` }}/>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 60, alignItems: 'center', position: 'relative' }}>
        <div>
          <div className="chip" style={{ marginBottom: 22 }}>
            <span className="chip-dot" style={{ background: T.coral }}/>
            Vi som bor i Sandared, för Sandared
          </div>
          <h1 style={{ fontSize: 88, lineHeight: 0.95, fontWeight: 700, letterSpacing: '-0.035em' }}>
            Tillsammans gör vi <span style={{ position: 'relative', display: 'inline-block' }}>
              Sandared
              <span style={{ position: 'absolute', left: -4, bottom: -10 }}><Squiggle color={T.coral} width={310}/></span>
            </span><br/>
            till en ännu finare<br/>
            plats att bo på.
          </h1>
          <p style={{ fontSize: 20, color: T.ink2, marginTop: 30, maxWidth: 540, lineHeight: 1.5, textWrap: 'pretty' }}>
            Sedan 2006 driver vi projekt och evenemang i Sandared — bänkar i centrum, terrängbana, julbelysning, Sandaredsdagen och mycket mer.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 38, flexWrap: 'wrap' }}>
            <a href="#medlem" className="btn btn-primary" style={{ padding: '18px 28px', fontSize: 16 }}>Bli medlem för 200 kr/år <span style={{ fontSize: 18 }}>→</span></a>
            <a href="#anmal" className="btn" style={{ padding: '18px 28px', fontSize: 16, background: T.coral, color: '#fff' }}>Anmäl er till event <span style={{ fontSize: 18 }}>→</span></a>
            <a href="#projekt" className="btn btn-secondary" style={{ padding: '18px 28px', fontSize: 16 }}>Se våra projekt</a>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 50 }}>
            {STATS.map(s => (
              <div key={s.label}>
                <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 36, fontWeight: 700, color: T.forest, letterSpacing: '-0.02em' }}>{s.num}</div>
                <div style={{ fontSize: 13, color: T.muted, marginTop: 2 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <HeroLandscape width={560} height={460}/>
        </div>
      </div>
    </section>
  );
}

// ─── Projekt ──────────────────────────────────────────────────────────
function ProjectCard({ project }) {
  const T = SITE_TOKENS;
  const Illu = window[project.illu];
  return (
    <div className="project-card" style={{ background: T.paper, borderRadius: 20, padding: 0, boxShadow: `0 1px 0 ${T.line}, 0 12px 32px rgba(31,42,36,0.04)`, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ background: project.tint, height: 170, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
        <Illu size={150}/>
        {project.year && (
          <div className="chip" style={{ position: 'absolute', top: 12, left: 12, background: T.paper, boxShadow: 'none', padding: '5px 10px', fontSize: 10 }}>
            <span className="chip-dot" style={{ background: project.accent }}/>{project.year}
          </div>
        )}
      </div>
      <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: project.accent, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{project.kategori}</div>
        <h3 style={{ fontSize: 19, lineHeight: 1.2 }}>{project.title}</h3>
        <p style={{ fontSize: 13.5, color: T.ink2, lineHeight: 1.5 }}>{project.desc}</p>
      </div>
    </div>
  );
}

function DesktopProjekt() {
  const [showModal, setShowModal] = React.useState(false);
  const T = SITE_TOKENS;
  return (
    <section id="projekt" style={{ padding: '110px 64px', background: T.cream2 + '88' }}>
      {showModal && <ForeslaProjektModal onClose={() => setShowModal(false)}/>}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
        <SectionHead
          eyebrow="Vad vi gör · Projekt"
          title={<>12 saker vi <span className="serif" style={{ color: T.coral }}>byggt och driver</span> i Sandared.</>}
          subtitle="Från en bänk i centrum till hela Sandaredsdagen — det här är konkreta resultat av medlemspengar och människor som lägger en helg."
          maxWidth={720}
        />
        <div style={{ textAlign: 'right' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Sedan 2018</div>
          <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 48, fontWeight: 700, color: T.forest, letterSpacing: '-0.02em', lineHeight: 1 }}>12 / 12</div>
          <div style={{ fontSize: 13, color: T.muted, marginTop: 4 }}>projekt levererade</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
        {PROJECTS.map(p => <ProjectCard key={p.id} project={p}/>)}
      </div>
      <div style={{ marginTop: 40, padding: '28px 36px', borderRadius: 20, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
        <div>
          <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 22, fontWeight: 600 }}>Saknar du något i Sandared?</div>
          <p style={{ fontSize: 14, color: T.ink2, marginTop: 6 }}>Skicka in din idé — vi tar upp den på nästa styrelsemöte.</p>
        </div>
        <button className="btn btn-primary" onClick={() => setShowModal(true)}>Föreslå ett projekt →</button>
      </div>
    </section>
  );
}

// ─── Kalender ─────────────────────────────────────────────────────────
function EventRow({ event, idx, onAdd }) {
  const T = SITE_TOKENS;
  return (
    <div className="event-row" style={{ display: 'grid', gridTemplateColumns: '110px 1fr auto', gap: 32, alignItems: 'center', padding: '22px 0', borderTop: idx === 0 ? 'none' : `1px solid ${T.line}` }}>
      <div className="event-badge" style={{ textAlign: 'center', padding: '12px 0', background: event.accent + '22', borderRadius: 14, width: 96 }}>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 38, fontWeight: 700, color: event.accent, lineHeight: 1 }}>{event.day}</div>
        <div style={{ fontSize: 11, color: event.accent, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 2 }}>{event.month}</div>
      </div>
      <div>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 24, fontWeight: 600, color: T.ink }}>{event.title}</div>
        <div style={{ fontSize: 14, color: T.muted, marginTop: 4 }}>{event.time} · {event.place}</div>
      </div>
      <button onClick={() => onAdd(event)} className="btn btn-secondary" style={{ padding: '10px 18px', fontSize: 13 }}>Lägg till →</button>
    </div>
  );
}

function DesktopKalender() {
  const T = SITE_TOKENS;
  const [showSub, setShowSub] = React.useState(false);
  const [addEv, setAddEv] = React.useState(null);
  return (
    <section id="kalender" style={{ padding: '110px 64px' }}>
      {showSub && <CalSubscribeModal onClose={() => setShowSub(false)}/>}
      {addEv && <CalAddModal ev={addEv} onClose={() => setAddEv(null)}/>}
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <SectionHead
            eyebrow="Kalender 2026"
            title={<>Allt som händer<br/>i Sandared.</>}
            subtitle="Spara datumen, ta med en granne, eller bara dyk upp. Du behöver inte vara medlem."
            titleSize={48} maxWidth={340}
          />
          <a href={CalendarUtils.feedUrl()} onClick={e => { e.preventDefault(); setShowSub(true); }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 16px 34px rgba(45,95,78,0.34)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 10px 24px rgba(45,95,78,0.26)'; }}
            style={{ marginTop: 32, padding: 18, borderRadius: 16, background: T.forest, display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: T.cream, cursor: 'pointer', boxShadow: '0 10px 24px rgba(45,95,78,0.26)', transition: 'transform .15s, box-shadow .15s' }}>
            <div style={{ width: 46, height: 46, borderRadius: 12, background: T.coral, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg viewBox="0 0 24 24" width="23" fill="none" stroke="#fff" 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>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Prenumerera i din kalender</div>
              <div style={{ fontSize: 12.5, color: T.cream + 'cc', marginTop: 2 }}>Få alla event automatiskt i Google / Apple / iCal</div>
            </div>
            <span style={{ fontSize: 22, color: T.cream, flexShrink: 0 }}>→</span>
          </a>
        </div>
        <div className="card" style={{ padding: '8px 32px' }}>
          {EVENTS.map((e, i) => <EventRow key={e.date} event={e} idx={i} onAdd={setAddEv}/>)}
        </div>
      </div>
    </section>
  );
}

// ─── Bli Medlem ───────────────────────────────────────────────────────
function DesktopBliMedlem() {
  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('fornamn') || '') + ' ' + (fd.get('efternamn') || '')).trim(),
        email: fd.get('epost') || '',
        telefon: fd.get('telefon') || '',
        adress: fd.get('adress') || '',
        postnummer: fd.get('postnummer') || '',
        ort: fd.get('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: '110px 64px', background: T.forest, color: T.cream, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, right: -100, width: 360, height: 360, borderRadius: '50%', background: T.forestDk, opacity: 0.6 }}/>
      <svg viewBox="0 0 200 200" width="220" style={{ position: 'absolute', bottom: -40, left: -40, opacity: 0.18 }}>
        <path d="M100 20 Q60 50 50 100 Q40 150 100 180 Q160 150 150 100 Q140 50 100 20 Z" fill={T.sun}/>
        <line x1="100" y1="20" x2="100" y2="180" stroke={T.forest} strokeWidth="2"/>
      </svg>
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'start' }}>
        <div>
          <div className="eyebrow" style={{ color: T.sun, marginBottom: 14 }}>Bli medlem</div>
          <h2 style={{ fontSize: 64, color: T.cream, textWrap: 'balance' }}>
            Tre minuter.<br/>Och du är <span className="serif" style={{ color: T.sun }}>med</span>.
          </h2>
          <p style={{ fontSize: 18, color: T.cream + 'cc', marginTop: 22, maxWidth: 480, lineHeight: 1.55 }}>
            Medlemskap kostar 200 kr per hushåll och år. Pengarna går oavkortat till lokala projekt — bänkarna, blommorna, belysningen, allt sånt.
          </p>
          <div style={{ display: 'flex', gap: 22, marginTop: 36, flexWrap: 'wrap' }}>
            <StepBadge n="1" label="Dina uppgifter" active/>
            <StepBadge n="2" label="Swish-betalning" active/>
            <StepBadge n="3" label="Välkommen!" active/>
          </div>
          <div style={{ marginTop: 44, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['Bjuds in till årsmötet', T.sun],['Påverka vilka projekt vi driver', T.coral],['Utskick via e-post', T.cream2]].map(([t, c]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: c, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="12" height="12" 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: 15, color: T.cream }}>{t}</span>
              </div>
            ))}
          </div>
        </div>

        {sent ? (
        <div style={{ background: T.cream, borderRadius: 24, padding: 40, color: T.ink, boxShadow: '0 24px 60px rgba(0,0,0,0.18)', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: T.forest, margin: '0 auto 20px', 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: 26 }}>Tack för din anmälan!</h3>
          <p style={{ fontSize: 15, color: T.ink2, marginTop: 14, lineHeight: 1.6 }}>
            Vi har tagit emot din medlemsanmälan. Glöm inte att betala årsavgiften <strong>200 kr</strong> via Swish <strong>123-022 36 28</strong> eller bankgiro <strong>5819-6536</strong> — ange ditt namn och adress i meddelandet.
          </p>
        </div>
        ) : (
        <form onSubmit={handlePrivSubmit} style={{ background: T.cream, borderRadius: 24, padding: 36, color: T.ink, boxShadow: '0 24px 60px rgba(0,0,0,0.18)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
            <h3 style={{ fontSize: 26 }}>Anmälan</h3>
            <span style={{ fontSize: 13, color: T.muted }}>Bli medlem</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FormField label="Förnamn"           placeholder="Anna"             name="fornamn"   required/>
            <FormField label="Efternamn"          placeholder="Andersson"        name="efternamn" required/>
            <FormField label="E-post"             placeholder="anna@exempel.se"  name="epost"      type="email" span={2} required/>
            <FormField label="Gatuadress"         placeholder="Stora vägen 12"   name="adress"     span={2} required/>
            <FormField label="Postnummer"         placeholder="518 30"           name="postnummer" required/>
            <FormField label="Ort"                placeholder="Sandared"         name="ort"        required/>
            <FormField label="Telefon (frivilligt)" placeholder="070-123 45 67" name="telefon"    type="tel" span={2} hint="Endast för utskick om akuta saker (t.ex. inställt arrangemang)."/>
          </div>
          <div style={{ marginTop: 22, padding: 22, borderRadius: 16, background: T.ink, color: T.cream, display: 'flex', alignItems: 'center', gap: 20 }}>
            <img src="swish-qr.png" alt="Swish QR-kod" style={{ width: 80, height: 80, borderRadius: 10, display: 'block', flexShrink: 0 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: T.sun, marginBottom: 4 }}>Betala via Swish</div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 22, fontWeight: 600 }}>123-022 36 28</div>
              <div style={{ fontSize: 13, color: T.cream + 'aa', marginTop: 4 }}>Skriv ditt namn & adress i meddelandet.</div>
              <a href={swishUrl(200, 'Ange namn och adress här')} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 12, padding: '9px 16px', borderRadius: 999, background: '#E6007E', color: '#fff', fontWeight: 700, fontSize: 13, textDecoration: 'none' }}>Öppna Swish →</a>
            </div>
          </div>
          <div style={{ marginTop: 12, padding: 18, borderRadius: 14, background: T.cream2, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="18" height="18" 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: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.muted, marginBottom: 2 }}>Alternativ: Bankgiro</div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 18, fontWeight: 600, color: T.ink }}>5819-6536</div>
              <div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>Ange namn och adress i meddelandefältet.</div>
            </div>
          </div>
          {error && (
            <div style={{ marginTop: 14, padding: '12px 16px', borderRadius: 12, background: '#FDE8E8', color: '#CC3333', fontSize: 13.5, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <svg width="18" height="18" 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: 18, background: T.coral, padding: '18px 24px', fontSize: 16, opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
            {submitting ? 'Skickar…' : 'Skicka in →'}
          </button>
          <div style={{ fontSize: 12, color: T.muted, marginTop: 14, textAlign: 'center' }}>
            Vi delar aldrig dina uppgifter med tredje part. Läs vår <u style={{ cursor: 'pointer' }} onClick={openPolicy}>integritetspolicy</u>.
          </div>
        </form>
        )}
      </div>
    </section>
  );
}

// ─── Företagspartners ────────────────────────────────────────────────
function DesktopForetag() {
  const T = SITE_TOKENS;
  const marqueeItems = [...PARTNERS, ...PARTNERS];
  const dotColors = [T.coral, T.forest, T.sun, T.sky];

  return (
    <section id="foretag" style={{ padding: '120px 0 0', background: T.cream }}>
      <div style={{ padding: '0 64px', marginBottom: 40 }}>
        <SectionHead
          eyebrow="Företagsmedlemmar"
          title={<>De lokala företag <span className="serif" style={{ color: T.coral }}>som gör Sandared starkare</span>.</>}
          subtitle="Företagsmedlemmar är en stor del av varför vi kan göra det vi gör — från Sandaredsdagen till bänkarna i centrum. När du handlar lokalt, stöttar du tillbaka."
          titleSize={64} maxWidth={780}
        />
      </div>

      <div className="marquee-mask" style={{ marginBottom: 70, padding: '14px 0', background: T.cream2 + '66', borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
        <div className="marquee-track">
          {marqueeItems.map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: dotColors[i % dotColors.length] }}/>
              <span style={{ fontFamily: 'Bricolage Grotesque', fontSize: 32, fontWeight: 600, color: T.ink, letterSpacing: '-0.015em' }}>{p.name}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 64px 100px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 0 }}>
          {PARTNERS.map((p, i) => (
            <div key={p.name} className="card partner-card" style={{ padding: 22, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: dotColors[i % dotColors.length], flexShrink: 0 }}/>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 15, lineHeight: 1.25 }}>{p.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <DesktopBliForetagsmedlem/>
    </section>
  );
}

// ─── Bli Företagsmedlem ───────────────────────────────────────────────
function DesktopBliForetagsmedlem() {
  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') || '',
        bransch: fd.get('bransch') || '',
        kontaktperson: fd.get('kontaktperson') || '',
        email: fd.get('epost') || '',
        telefon: fd.get('telefon') || '',
        adress: fd.get('faktadress') || '',
      });
      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={{ padding: '110px 64px', background: T.ink, color: T.cream, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, right: -100, width: 380, height: 380, borderRadius: '50%', background: T.coral, opacity: 0.15 }}/>
      <div style={{ position: 'absolute', bottom: -120, left: -120, width: 340, height: 340, borderRadius: '50%', background: T.forest, opacity: 0.4 }}/>
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'start' }}>
        <div>
          <div className="eyebrow" style={{ color: T.sun, marginBottom: 14 }}>Bli företagsmedlem</div>
          <h2 style={{ fontSize: 60, color: T.cream, textWrap: 'balance', letterSpacing: '-0.025em' }}>
            Driver du ett företag i Sandared?<br/>
            <span className="serif" style={{ color: T.coral }}>Vi vill bygga ihop med er.</span>
          </h2>
          <p style={{ fontSize: 17, color: T.cream + 'cc', marginTop: 22, maxWidth: 500, lineHeight: 1.55 }}>
            Som företagsmedlem syns ni hos våra 500+ medlemmar, på sajten och vid våra event — och era pengar går rakt in i lokala projekt.
          </p>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['Synlighet hos 500+ engagerade Sandaredsbor', T.sun],
              ['Gör reklam i vår Facebook grupp - nå ut till 3000+ medlemmar direkt!', T.coral],
              ['Medverkan i vårt julutskick till alla medlemmar', T.sky],
              ['Direktkanal till styrelsen vid projekt- och eventfrågor', '#FBF7F0']].map(([t, c]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" stroke={T.ink} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
                </div>
                <span style={{ fontSize: 15, color: T.cream, lineHeight: 1.5 }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40, paddingTop: 28, borderTop: `1px solid ${T.cream}22` }}>
            <div style={{ fontSize: 13, color: T.cream + 'aa' }}>Hellre prata direkt?</div>
            <div style={{ fontSize: 16, marginTop: 6 }}>Skicka ett mail till <strong>info@sandared.se</strong>.</div>
          </div>
        </div>

        {sent ? (
        <div style={{ background: T.cream, color: T.ink, borderRadius: 24, padding: 40, boxShadow: '0 24px 60px rgba(0,0,0,0.3)', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: T.forest, margin: '0 auto 20px', 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: 26 }}>Tack — vi har tagit emot er anmälan!</h3>
          <p style={{ fontSize: 15, color: T.ink2, marginTop: 14, lineHeight: 1.6 }}>
            Vi hör av oss inom kort för att bekräfta företagsmedlemskapet och ge er anvisningar om hur ni betalar er medlemsavgift.
          </p>
        </div>
        ) : (
        <form onSubmit={handleForetagSubmit} style={{ background: T.cream, color: T.ink, borderRadius: 24, padding: 36, boxShadow: '0 24px 60px rgba(0,0,0,0.3)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
            <h3 style={{ fontSize: 26 }}>Anmäl ert företag</h3>
            <span style={{ fontSize: 13, color: T.muted }}>Tar 3 min</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FormField label="Företagsnamn"     placeholder="Sandareds Bygg AB"                    name="foretagsnamn"  span={2} required/>
            <FormField label="Org.nr"            placeholder="556xxx-xxxx"                          name="orgnr"      required/>
            <FormField label="Bransch"           placeholder="Bygg & hantverk"                      name="bransch"/>
            <FormField label="Kontaktperson"     placeholder="Anders Sundberg"                      name="kontaktperson" span={2} required/>
            <FormField label="E-post"            placeholder="anders@sandaredsbygg.se" type="email" name="epost"     required/>
            <FormField label="Telefon"           placeholder="070-123 45 67"           type="tel"   name="telefon"/>
            <FormField label="Faktureringsadress" placeholder="Bosgårdsvägen 12, 518 30 Sandared"   name="faktadress"    span={2}/>
          </div>
          {error && (
            <div style={{ marginTop: 16, padding: '12px 16px', borderRadius: 12, background: '#FDE8E8', color: '#CC3333', fontSize: 13.5, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <svg width="18" height="18" 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: 22, background: T.coral, padding: '18px 24px', fontSize: 16, opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
            {submitting ? 'Skickar…' : 'Anmäl vårt företag →'}
          </button>

          <div style={{ marginTop: 18, padding: 18, borderRadius: 14, background: T.cream2 }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: T.muted, marginBottom: 10 }}>Å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 : 6 }}>
                <span style={{ fontSize: 14, color: T.ink2 }}>
                  {label}{label === 'Serviceavgift' && <span style={{ fontSize: 11, color: T.muted }}> · avdragsgill</span>}
                </span>
                <span style={{ fontWeight: 600 }}>{amount}</span>
              </div>
            ))}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 10, paddingTop: 10, borderTop: `1px solid ${T.line}` }}>
              <span style={{ fontWeight: 700 }}>Totalt per år</span>
              <span style={{ fontFamily: 'Bricolage Grotesque', fontSize: 20, fontWeight: 700, color: T.forest }}>700 kr</span>
            </div>
          </div>

          <div style={{ marginTop: 12, padding: 18, borderRadius: 14, background: T.ink, color: T.cream, display: 'flex', alignItems: 'center', gap: 16 }}>
            <img src="swish-qr.png" alt="Swish QR-kod" style={{ width: 70, height: 70, borderRadius: 8, display: 'block', flexShrink: 0 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: T.sun, marginBottom: 4 }}>Betala via Swish</div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 20, fontWeight: 600 }}>123-022 36 28</div>
              <div style={{ fontSize: 12, color: T.cream + 'aa', marginTop: 4 }}>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: 7, marginTop: 12, padding: '9px 16px', borderRadius: 999, background: '#E6007E', color: '#fff', fontWeight: 700, fontSize: 13, textDecoration: 'none' }}>Öppna Swish →</a>
            </div>
          </div>

          <div style={{ marginTop: 10, padding: 16, borderRadius: 12, background: T.cream2, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 34, height: 34, borderRadius: 10, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="17" height="17" 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: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.muted, marginBottom: 2 }}>Alternativ: Bankgiro</div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 17, fontWeight: 600, color: T.ink }}>5819-6536</div>
              <div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>Ange företagsnamn och adress i meddelandet.</div>
            </div>
          </div>

          <div style={{ fontSize: 12, color: T.muted, marginTop: 14, textAlign: 'center' }}>Vi hör av oss inom kort för att bekräfta er anmälan.</div>
        </form>
        )}
      </div>
    </section>
  );
}

// ─── Om oss ───────────────────────────────────────────────────────────
function DesktopOmOss() {
  const T = SITE_TOKENS;
  return (
    <section id="om-oss" style={{ padding: '110px 64px', background: T.cream2 + '55' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64, alignItems: 'start' }}>

        {/* ── Vänster: sticky info + stadgar ── */}
        <div style={{ position: 'sticky', top: 100 }}>
          <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 på årsmötet och jobbar ideellt — grannar, föräldrar och lokala eldsjälar."
            maxWidth={340} titleSize={44}
          />
          <div style={{ marginTop: 32, padding: 22, borderRadius: 16, background: T.paper, boxShadow: `inset 0 0 0 1.5px ${T.line}` }}>
            <p style={{ fontSize: 13.5, color: T.ink2, lineHeight: 1.7, margin: 0 }}>
              Sandareds Intresseförening grundades <strong>2006</strong> och är öppen för alla som bor i eller har anknytning till Sandared. Föreningens stadgar reglerar hur vi arbetar.
            </p>
            <a href={STADGAR_URL} download="stadgar.pdf" className="btn btn-secondary" style={{ marginTop: 18, width: '100%', justifyContent: 'center', display: 'flex', gap: 9, fontSize: 14 }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><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>
          </div>
        </div>

        {/* ── Höger: styrelsekortet ── */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {BOARD.map(member => (
            <div key={member.name} className="card" style={{ padding: '28px 18px', textAlign: 'center' }}>
              <MemberAvatar color={member.color} size={72}/>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontSize: 16, fontWeight: 600, marginTop: 16, lineHeight: 1.2 }}>{member.name}</div>
              <div style={{ fontSize: 12, color: T.muted, marginTop: 5 }}>{member.role}</div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────
function DesktopFooter() {
  const T = SITE_TOKENS;
  const FOOTER_COLS = [
    {
      title: 'Snabblänkar',
      items: [
        { label: 'Våra projekt',        href: '#projekt'     },
        { label: 'Kalender',            href: '#kalender'    },
        { label: 'Anmäl er till event', href: '#anmal'       },
        { label: 'Bli medlem',          href: '#medlem'      },
        { label: 'Företagsmedlemmar',   href: '#foretag'     },
        { label: 'Bli företagsmedlem',  href: '#bli-foretag' },
        { label: 'Om oss',              href: '#om-oss'      },
      ],
    },
    {
      title: 'Föreningen',
      items: [
        { label: 'Om oss & styrelse', href: '#om-oss'      },
        { label: 'Stadgar (PDF)',      href: STADGAR_URL    },
        { label: 'Bli volontär',       href: 'mailto:info@sandared.se?subject=Volontär' },
      ],
    },
    {
      title: 'Kontakt',
      items: [
        { label: 'info@sandared.se',      href: 'mailto:info@sandared.se' },
        { label: 'Alingsåsvägen 1, 518 30 Sandared', href: 'https://maps.google.com/?q=Alingsåsvägen+1,+518+30+Sandared' },
        { label: 'Facebook',              href: 'https://www.facebook.com/groups/SandaredsIntresseforening' },
      ],
    },
  ];
  return (
    <footer id="kontakt" style={{ background: T.forestDk, color: T.cream, padding: '64px 64px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
        <div>
          <a href="#toppen" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            <Wordmark size={42} dark/>
          </a>
          <p style={{ marginTop: 18, fontSize: 14, color: T.cream + 'aa', maxWidth: 320, lineHeight: 1.6 }}>
            Sandareds Intresseförening är en ideell förening grundad 2006. Vi är granne, kompis, lagledare och eldsjäl.
          </p>
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Få information om event &amp; nyheter</div>
            <InfoSignup dark/>
          </div>
        </div>
        {FOOTER_COLS.map(col => (
          <div key={col.title}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 14 }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.items.map(it => (
                <a key={it.label} href={it.href} style={{ fontSize: 13, color: T.cream + 'aa', transition: 'color .15s' }}
                  onMouseEnter={e => e.target.style.color = T.cream}
                  onMouseLeave={e => e.target.style.color = T.cream + 'aa'}>
                  {it.label}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 24, borderTop: `1px solid ${T.cream}22`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14, fontSize: 12, color: T.cream + '88' }}>
        <span>© 2026 Sandareds Intresseförening · Org.nr 802431-1857</span>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
          <a onClick={openPolicy} style={{ cursor: 'pointer', color: T.cream + 'aa' }}>Integritetspolicy</a>
          <a onClick={openPolicy} style={{ cursor: 'pointer', color: T.cream + 'aa' }}>Cookies</a>
          <span>Skapad med kärlek i Sandared 🌿</span>
        </div>
      </div>
    </footer>
  );
}

// ─── Assembly ─────────────────────────────────────────────────────────
function DesktopSite() {
  return (
    <div>
      <DesktopNav/>
      <DesktopHero/>
      <DesktopProjekt/>
      <DesktopKalender/>
      <DesktopAnmal/>
      <DesktopBliMedlem/>
      <DesktopForetag/>
      <DesktopOmOss/>
      <DesktopFooter/>
    </div>
  );
}

Object.assign(window, { DesktopSite, MemberAvatar });