// Attractions page with detail modal. window.CJAttractions
function CJAttractions() {
  const D = window.CJDS;
  const { SectionHeading, AttractionCard, Tabs, Badge, Button } = D;
  const Icon = window.CJIcon;
  const data = window.CJ_DATA;
  const [filter, setFilter] = React.useState('all');
  const [active, setActive] = React.useState(null);

  const filtered = data.attractions.filter((a) => {
    if (filter === 'all') return true;
    if (filter === 'little') return /2|4|5/.test(a.ageRange);
    if (filter === 'big') return /6|8/.test(a.ageRange);
    return true;
  });

  return (
    <div style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 32px 90px' }}>
      <SectionHeading eyebrow="Play Zones" title="Explore every attraction" subtitle="Tap any zone for age, height and safety rules before you visit." />
      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
        <Tabs value={filter} onChange={setFilter} tabs={[
          { value: 'all', label: 'All Zones' },
          { value: 'little', label: 'Little Ones' },
          { value: 'big', label: 'Big Kids' },
        ]} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 40, justifyItems: 'center' }}>
        {filtered.map((a) => (
          <AttractionCard key={a.name} {...a} media={<image-slot id={a.slot} src={a.src} shape="rect" placeholder={`Drop a ${a.name} photo`} style={{ width: '100%', height: '100%' }}></image-slot>} onClick={() => setActive(a)} style={{ width: '100%' }} />
        ))}
      </div>

      {active && (
        <div onClick={() => setActive(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(16,70,111,0.45)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, zIndex: 50 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: 480, maxWidth: '100%', background: 'var(--surface-card)', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-xl)', animation: 'cjPop var(--dur-slow) var(--ease-spring)' }}>
            <div style={{ height: 160, background: ({ azure: 'linear-gradient(135deg,#6FC8FF,#0B7FD4)', sunset: 'linear-gradient(135deg,#FF9C6B,#E24A05)', sunny: 'linear-gradient(135deg,#FFD766,#F5A300)', mint: 'linear-gradient(135deg,#6FE3B8,#0B875F)' })[active.theme], display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
              <image-slot id={active.slot} src={active.src} shape="rect" placeholder={`Drop a ${active.name} photo`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
              <button onClick={() => setActive(null)} style={{ position: 'absolute', top: 14, right: 14, width: 36, height: 36, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.9)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2 }}>
                <Icon name="x" size={18} color="var(--text-body)" />
              </button>
            </div>
            <div style={{ padding: 28 }}>
              <h2 style={{ margin: '0 0 6px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, color: 'var(--text-strong)' }}>{active.name}</h2>
              <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                <Badge tone="brand">{active.ageRange}</Badge>
                <Badge tone="neutral">Height: {active.heightReq}</Badge>
              </div>
              <p style={{ margin: '0 0 20px', fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)' }}>{active.description}</p>
              <h4 style={{ margin: '0 0 10px', fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Safety rules</h4>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {active.rules.map((r) => (
                  <li key={r} style={{ display: 'flex', gap: 10, alignItems: 'center', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-body)' }}>
                    <Icon name="shield-check" size={18} color="var(--mint-500)" /> {r}
                  </li>
                ))}
              </ul>
              <Button variant="primary" fullWidth style={{ marginTop: 24 }} onClick={() => setActive(null)}>Got it — let's jump!</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
window.CJAttractions = CJAttractions;