// Home page content. window.CJHome
function CJHome({ go }) {
  const D = window.CJDS;
  const { Button, SectionHeading, AttractionCard, ReviewCard, Card } = D;
  const Icon = window.CJIcon;
  const data = window.CJ_DATA;
  return (
    <div>
      {/* Hero */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, #EAF6FF 0%, #F7FAFD 60%)' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgCiAgPGcgZmlsbD0iIzFDQTBGMiIgZmlsbC1vcGFjaXR5PSIwLjEwIj4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjQiIHI9IjUiPjwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iOTIiIGN5PSI4OCIgcj0iNSI+PC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI2MCIgY3k9IjU4IiByPSIzLjUiPjwvY2lyY2xlPgogIDwvZz4KICA8ZyBmaWxsPSIjRkI2MDE1IiBmaWxsLW9wYWNpdHk9IjAuMTAiPgogICAgPHBhdGggZD0iTTk2IDIybDEuNiAzLjYgMy42IDEuNi0zLjYgMS42LTEuNiAzLjYtMS42LTMuNi0zLjYtMS42IDMuNi0xLjYgMS42LTMuNloiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0yOCA5MmwxLjYgMy42IDMuNiAxLjYtMy42IDEuNi0xLjYgMy42LTEuNi0zLjYtMy42LTEuNiAzLjYtMS42IDEuNi0zLjZaIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=)', opacity: 0.7 }} />
        <div style={{ position: 'relative', maxWidth: 1120, margin: '0 auto', padding: '80px 32px 90px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 40, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <span style={{ alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 16px', borderRadius: 'var(--radius-pill)', background: '#fff', boxShadow: 'var(--shadow-sm)', fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 13, color: 'var(--sunset-600)' }}>
              <Icon name="sparkles" size={16} color="var(--sunny-500)" /> Now open in Riverside!
            </span>
            <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(40px, 5.5vw, 68px)', lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--text-strong)' }}>
              Where little ones<br /><span style={{ color: 'var(--brand)' }}>jump for joy</span>
            </h1>
            <p style={{ margin: 0, maxWidth: 460, fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.6, color: 'var(--text-body)' }}>
              A spotless, super-safe indoor playground with six play zones, birthday parties, and a 60-second digital waiver.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 6 }}>
              <Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={20} color="#fff" />} onClick={() => go('Parties')}>Book a Party</Button>
              <Button variant="secondary" size="lg" iconLeft={<Icon name="pen-line" size={19} color="var(--brand)" />} onClick={() => go('Waiver')}>Sign Waiver</Button>
            </div>
            <div style={{ display: 'flex', gap: 26, marginTop: 12 }}>
              {[['4.9★', '2,100+ reviews'], ['6', 'play zones'], ['60s', 'digital waiver']].map(([n, l]) => (
                <div key={l}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, color: 'var(--text-strong)' }}>{n}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{l}</div></div>
              ))}
            </div>
          </div>
          {/* Hero collage */}
          <div style={{ position: 'relative', height: 420 }}>
            <image-slot id={data.hero.main.slot} src={data.hero.main.src} shape="rounded" radius="32" placeholder="Drop a hero photo"
              style={{ position: 'absolute', top: 20, left: 30, width: 240, height: 300, boxShadow: 'var(--shadow-xl)' }}></image-slot>
            <image-slot id={data.hero.a.slot} src={data.hero.a.src} shape="rounded" radius="32" placeholder="Trampolines"
              style={{ position: 'absolute', bottom: 10, right: 20, width: 200, height: 200, boxShadow: 'var(--shadow-lg)', border: '4px solid #fff' }}></image-slot>
            <image-slot id={data.hero.b.slot} src={data.hero.b.src} shape="rounded" radius="22" placeholder="Slides"
              style={{ position: 'absolute', top: 0, right: 60, width: 110, height: 110, boxShadow: 'var(--shadow-md)', transform: 'rotate(-6deg)', border: '4px solid #fff' }}></image-slot>
            <div style={{ position: 'absolute', bottom: 30, left: 0, display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: '#fff', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-lg)', zIndex: 3 }}>
              <Icon name="star" size={18} color="var(--sunny-500)" />
              <span style={{ fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 14, color: 'var(--text-strong)' }}>4.9 rating</span>
            </div>
          </div>
        </div>
      </section>

      {/* Attractions preview */}
      <section style={{ maxWidth: 1120, margin: '0 auto', padding: '84px 32px' }}>
        <SectionHeading eyebrow="Our Attractions" title="Six ways to bounce" subtitle="From padded toddler soft-play to a timed Ninja warrior course — there's a zone for every age." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 44, justifyItems: 'center' }}>
          {data.attractions.slice(0, 3).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={() => go('Attractions')} style={{ width: '100%' }} />
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <Button variant="ghost" iconRight={<Icon name="arrow-right" size={18} color="var(--text-body)" />} onClick={() => go('Attractions')}>See all six zones</Button>
        </div>
      </section>

      {/* Why choose us */}
      <section style={{ background: 'var(--brand)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgCiAgPGcgZmlsbD0iIzFDQTBGMiIgZmlsbC1vcGFjaXR5PSIwLjEwIj4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjQiIHI9IjUiPjwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iOTIiIGN5PSI4OCIgcj0iNSI+PC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI2MCIgY3k9IjU4IiByPSIzLjUiPjwvY2lyY2xlPgogIDwvZz4KICA8ZyBmaWxsPSIjRkI2MDE1IiBmaWxsLW9wYWNpdHk9IjAuMTAiPgogICAgPHBhdGggZD0iTTk2IDIybDEuNiAzLjYgMy42IDEuNi0zLjYgMS42LTEuNiAzLjYtMS42LTMuNi0zLjYtMS42IDMuNi0xLjYgMS42LTMuNloiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0yOCA5MmwxLjYgMy42IDMuNiAxLjYtMy42IDEuNi0xLjYgMy42LTEuNi0zLjYtMy42LTEuNiAzLjYtMS42IDEuNi0zLjZaIj48L3BhdGg+CiAgPC9nPgo8L3N2Zz4=)', opacity: 0.25, filter: 'brightness(3)' }} />
        <div style={{ position: 'relative', maxWidth: 1120, margin: '0 auto', padding: '80px 32px' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <span style={{ fontFamily: 'var(--font-rounded)', fontWeight: 800, fontSize: 12.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)' }}>Why parents choose us</span>
            <h2 style={{ margin: '12px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,4vw,40px)', color: '#fff' }}>Safe, spotless, stress-free</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {data.reasons.map((r) => (
              <Card key={r.title} padding={28} elevation="lg" style={{ borderRadius: 'var(--radius-2xl)' }}>
                <div style={{ width: 56, height: 56, borderRadius: 'var(--radius-lg)', background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={r.icon} size={30} color="var(--brand)" />
                </div>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 21, color: 'var(--text-strong)' }}>{r.title}</h3>
                <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>{r.text}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Reviews */}
      <section style={{ maxWidth: 1120, margin: '0 auto', padding: '84px 32px' }}>
        <SectionHeading eyebrow="Recent Reviews" title="Loved by 2,100+ families" eyebrowTone="brand" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, marginTop: 44, justifyItems: 'center' }}>
          {data.reviews.map((r) => (
            <ReviewCard key={r.author} author={r.author} rating={r.rating} style={{ width: '100%' }}>{r.text}</ReviewCard>
          ))}
        </div>
      </section>

      {/* CTA band */}
      <section style={{ maxWidth: 1120, margin: '0 auto 90px', padding: '0 32px' }}>
        <div style={{ borderRadius: 'var(--radius-2xl)', background: 'linear-gradient(135deg, var(--sunset-400), var(--sunset-600))', padding: '56px 48px', textAlign: 'center', boxShadow: 'var(--shadow-accent)', position: 'relative', overflow: 'hidden' }}>
          <h2 style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,4vw,40px)', color: '#fff' }}>Ready to let them fly?</h2>
          <p style={{ margin: '0 auto 26px', maxWidth: 460, fontFamily: 'var(--font-body)', fontSize: 17, color: 'rgba(255,255,255,0.92)' }}>Grab open-play tickets or lock in a birthday date — spots fill fast on weekends.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="sunny" size="lg" onClick={() => go('Booking')}>Buy Tickets</Button>
            <Button size="lg" style={{ background: '#fff', color: 'var(--sunset-600)', boxShadow: 'var(--shadow-md)' }} onClick={() => go('Parties')}>See Party Packages</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.CJHome = CJHome;