// Blocks 2, 3, 4 — What You'll Do, Who Should Come, Social Proof

function SectionWrap({ t, children, bg, padding = '56px 24px' }) {
  return (
    <section style={{
      background: bg || t.bg, padding,
      borderBottom: `1px solid ${t.line}`,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function BlockHeader({ label, title, t }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{
        fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 11,
        color: t.brass, letterSpacing: '0.35em', marginBottom: 10,
      }}>{label}</div>
      <h2 style={{
        fontFamily: 'Bebas Neue, sans-serif', fontWeight: 400,
        fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1,
        color: t.fg, margin: 0, letterSpacing: '0.02em',
      }}>{title}</h2>
    </div>
  );
}

function EventWhatYoullDo({ event, t }) {
  return (
    <SectionWrap t={t} bg={t.cellBg}>
      <BlockHeader label="// BLOCK 02" title="WHAT YOU'LL DO" t={t} />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 18, marginBottom: 32,
      }}>
        {event.activities.map((a, i) => (
          <div key={i} style={{
            padding: '22px 22px 22px 56px', position: 'relative',
            background: t.bg, border: `1px solid ${t.line}`,
            fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 15,
            color: t.fg, lineHeight: 1.5,
          }}>
            <div style={{
              position: 'absolute', left: 16, top: 22,
              fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 13,
              color: t.brass, letterSpacing: '0.1em',
            }}>0{i + 1}</div>
            {a}
          </div>
        ))}
      </div>
      <div style={{
        padding: '16px 20px', background: t.bg, border: `1px solid ${t.brass}`,
        borderLeftWidth: 3, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 10,
          color: t.brass, letterSpacing: '0.3em',
        }}>OPERATOR CREDENTIALS</div>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 14,
          color: t.fg,
        }}>{event.operatorCreds}</div>
      </div>
    </SectionWrap>
  );
}

function EventWhoShouldCome({ event, t }) {
  const e = event.eligibility;
  return (
    <SectionWrap t={t}>
      <BlockHeader label="// BLOCK 03" title="WHO SHOULD COME" t={t} />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 24, marginBottom: 32,
      }}>
        <InfoCard t={t} label="ELIGIBILITY" items={[
          { k: 'WHO', v: e.who },
          { k: 'AGE', v: e.age },
          { k: 'FITNESS', v: e.fitness },
          { k: 'CITIZENSHIP', v: e.citizenship },
        ]} />
        <InfoCard t={t} label="WHAT TO BRING" listItems={event.requirements} />
      </div>
      <div style={{
        padding: '20px 24px', background: t.cellBg, border: `1px solid ${t.line}`,
      }}>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 10,
          color: t.brass, letterSpacing: '0.3em', marginBottom: 8,
        }}>WHAT TO EXPECT ON ARRIVAL</div>
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 14,
          color: t.fg, lineHeight: 1.55,
        }}>{event.whatToExpect}</div>
      </div>
    </SectionWrap>
  );
}

function InfoCard({ t, label, items, listItems }) {
  return (
    <div style={{
      padding: '22px 24px', background: t.cellBg, border: `1px solid ${t.line}`,
    }}>
      <div style={{
        fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 10,
        color: t.brass, letterSpacing: '0.3em', marginBottom: 16,
        paddingBottom: 12, borderBottom: `1px solid ${t.line}`,
      }}>{label}</div>
      {items && items.map((it, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '90px 1fr', gap: 14,
          padding: '8px 0', borderBottom: i < items.length - 1 ? `1px dashed ${t.line}` : 'none',
        }}>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 10,
            color: t.dim, letterSpacing: '0.2em', paddingTop: 2,
          }}>{it.k}</div>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 13,
            color: t.fg, lineHeight: 1.4,
          }}>{it.v}</div>
        </div>
      ))}
      {listItems && (
        <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
          {listItems.map((r, i) => (
            <li key={i} style={{
              padding: '8px 0 8px 20px', position: 'relative',
              borderBottom: i < listItems.length - 1 ? `1px dashed ${t.line}` : 'none',
              fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 13,
              color: t.fg, lineHeight: 1.4,
            }}>
              <span style={{
                position: 'absolute', left: 0, top: 8,
                color: t.brass, fontWeight: 700,
              }}>▸</span>
              {r}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function EventSocialProof({ event, t }) {
  return (
    <SectionWrap t={t} bg={t.cellBg}>
      <BlockHeader label="// BLOCK 04" title="COMMUNITY" t={t} />
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
        gap: 2, marginBottom: 24, background: t.line,
        border: `1px solid ${t.line}`,
      }}>
        {[1, 2, 3, 4].map(i => (
          <div key={i} style={{
            aspectRatio: '1 / 1', background: t.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: t.dim, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: `repeating-linear-gradient(45deg, transparent 0 8px, ${t.line} 8px 9px)`,
              opacity: 0.35,
            }} />
            <div style={{
              fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 10,
              letterSpacing: '0.3em', color: t.dim, position: 'relative',
              padding: '6px 10px', border: `1px solid ${t.line}`, background: t.bg,
            }}>PAST EVENT · {i}</div>
          </div>
        ))}
      </div>
      <a href="https://instagram.com/pacific.afsws" target="_blank" rel="noreferrer" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, padding: '22px 24px', background: t.bg,
        border: `1px solid ${t.brass}`, textDecoration: 'none', color: t.fg,
        flexWrap: 'wrap',
      }}>
        <div>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 10,
            color: t.brass, letterSpacing: '0.3em', marginBottom: 6,
          }}>FOLLOW ALONG</div>
          <div style={{
            fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 22,
            color: t.fg, letterSpacing: '0.04em',
          }}>@PACIFIC.AFSWS</div>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 12,
            color: t.dim, letterSpacing: '0.1em', marginTop: 4,
          }}>Event photos, updates, and raw footage from the field.</div>
        </div>
        <div style={{
          fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 12,
          color: t.brass, letterSpacing: '0.25em',
        }}>OPEN INSTAGRAM →</div>
      </a>
    </SectionWrap>
  );
}

window.EventWhatYoullDo = EventWhatYoullDo;
window.EventWhoShouldCome = EventWhoShouldCome;
window.EventSocialProof = EventSocialProof;