// medlem.jsx — Bli medlem-sida (sandared.se/medlem)
// Fristående subsida för QR-koder och kampanjer. Återanvänder EventTopBar/
// EventFooter (event.jsx), FormField (desktop.jsx), swishUrl (tokens.jsx)
// samt PROJECTS (data.jsx) för att visa vad medlemsavgiften går till.

// ─── Medlemsformulär (privatperson) ─────────────────────────────────────
// Samma flöde som DesktopBliMedlem: POST /api/members (type: person).
// Definieras utanför MedlemPage så att komponent-typen är stabil.
function MedlemForm({ compact }) {
  const T = SITE_TOKENS;
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = 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);
      window.scrollTo(0, 0);
    } catch (err) {
      setError('Något gick fel när anmälan skulle skickas. Kontrollera uppgifterna och försök igen.');
    } finally {
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <div className="card" style={{ padding: compact ? 28 : 40, 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>
        <a href="/" className="btn btn-secondary" style={{ marginTop: 22 }}>Till sandared.se</a>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="card" style={{ padding: compact ? '24px 18px' : 36 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
        <h3 style={{ fontSize: 26 }}>Anmälan</h3>
        <span style={{ fontSize: 13, color: T.muted }}>Tar 3 minuter</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: compact ? 16 : 22, borderRadius: 16, background: T.ink, color: T.cream, display: 'flex', alignItems: 'center', gap: compact ? 14 : 20 }}>
        <img src="/swish-qr.png" alt="Swish QR-kod" style={{ width: compact ? 64 : 80, height: compact ? 64 : 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: compact ? 18 : 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, color: '#fff', opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
        {submitting ? 'Skickar…' : 'Bli medlem →'}
      </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>
  );
}

// ─── Hela medlemssidan ──────────────────────────────────────────────────
function MedlemPage({ isMobile }) {
  const T = SITE_TOKENS;
  const compact = isMobile;

  React.useEffect(() => {
    const prev = document.title;
    document.title = 'Bli medlem · Sandareds Intresseförening';
    return () => { document.title = prev; };
  }, []);

  // Vad avgiften går till — projekt + återkommande evenemang från PROJECTS
  const infoBlock = (
    <div>
      <div className="eyebrow" style={{ marginBottom: 10, color: T.coral }}>Vad går medlemsavgiften till?</div>
      <h2 style={{ fontSize: compact ? 24 : 30 }}>Varenda krona stannar i Sandared.</h2>
      <p style={{ fontSize: compact ? 14.5 : 15.5, color: T.ink2, marginTop: 12, lineHeight: 1.6 }}>
        Medlemsavgiften går oavkortat till våra projekt och evenemang — allt det som gör Sandared till en finare plats att bo på:
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 10, marginTop: 18 }}>
        {PROJECTS.map(p => {
          const Illu = window[p.illu];
          return (
            <div key={p.id} className="card" style={{ padding: '12px 10px', textAlign: 'center', boxShadow: `inset 0 0 0 1px ${T.line}` }}>
              <div style={{ width: 54, height: 54, borderRadius: '50%', background: p.tint, margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {Illu && <Illu size={40}/>}
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.3 }}>{p.title}</div>
              {p.kategori === 'Återkommande event' && (
                <div style={{ fontSize: 10, fontWeight: 700, color: p.accent, textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 3 }}>Evenemang</div>
              )}
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[['Bjuds in till årsmötet', T.sun], ['Påverka vilka projekt vi driver', T.coral], ['Utskick via e-post om allt som händer', T.sky]].map(([t, c]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" stroke={T.forestDk} strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
            </div>
            <span style={{ fontSize: 14.5, color: T.ink }}>{t}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 22, padding: '16px 18px', borderRadius: 14, background: T.forest, color: T.cream }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.sun, marginBottom: 6 }}>Driver du företag?</div>
        <div style={{ fontSize: 14, lineHeight: 1.55 }}>
          Företagsmedlemskap kostar 700 kr/år och ger synlighet hos 500+ medlemmar. <a href="/#bli-foretag" style={{ color: T.sun, fontWeight: 700 }}>Anmäl ert företag här →</a>
        </div>
      </div>
    </div>
  );

  return (
    <div style={{ background: T.cream, minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <EventTopBar compact={compact}/>
      <div style={{ flex: 1, width: '100%', maxWidth: 1100, margin: '0 auto', padding: compact ? '26px 20px 48px' : '48px 32px 72px' }}>

        {/* ── Hero ── */}
        <div style={{ textAlign: 'center', marginBottom: compact ? 26 : 40 }}>
          <div className="chip" style={{ marginBottom: 14 }}>
            <span className="chip-dot" style={{ background: T.coral }}/>
            Sandareds Intresseförening
          </div>
          <h1 style={{ fontSize: compact ? 36 : 56, lineHeight: 1.02, fontWeight: 700, letterSpacing: '-0.03em' }}>
            Bli medlem.<br/><span className="serif" style={{ color: T.coral }}>Gör Sandared bättre.</span>
          </h1>
          <p style={{ fontSize: compact ? 15 : 18, color: T.ink2, marginTop: 16, lineHeight: 1.55, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
            <strong style={{ color: T.ink }}>200 kr per hushåll och år.</strong> Pengarna går oavkortat till lokala projekt och evenemang — och du är med och bestämmer vilka.
          </p>
        </div>

        {/* ── Info + formulär ── */}
        <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1fr 1.05fr', gap: compact ? 26 : 44, alignItems: 'start' }}>
          {compact ? (
            <>
              <MedlemForm compact={compact}/>
              {infoBlock}
            </>
          ) : (
            <>
              {infoBlock}
              <MedlemForm compact={compact}/>
            </>
          )}
        </div>
      </div>
      <EventFooter compact={compact}/>
    </div>
  );
}

Object.assign(window, { MedlemPage });