// Home page

const HomePage = ({ onNav, heroVariant }) => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const renderHero = () => {
    if (heroVariant === 'overlay') {
      return (
        <section className="hero-home variant-overlay">
          <div className="rendering-full">
            <img src="assets/rendering.jpg" alt="Soul Center rendering" />
            <div className="overlay-content">
              <div className="container">
                <h1>Transforming lives through <em>opportunity &amp; inclusion.</em></h1>
                <p className="lead">
                  The Soul Center will house innovative programs for adults with special needs —
                  creative expression, vocational training, community service, and meaningful employment.
                </p>
                <div className="ctas">
                  <Button variant="primary" size="lg" icon="heart" onClick={() => onNav('dedications')}>Dedicate a space</Button>
                  <Button variant="secondary" size="lg" onClick={() => onNav('vision')}>The vision</Button>
                </div>
              </div>
            </div>
          </div>
        </section>
      );
    }
    if (heroVariant === 'split') {
      return (
        <section className="hero-home variant-split">
          <div className="split-grid">
            <div className="split-content">
              <h1>Transforming lives through <em>opportunity &amp; inclusion.</em></h1>
              <p className="lead">
                The Soul Center will house innovative programs for adults with special needs —
                creative expression, vocational training, community service, and meaningful employment.
              </p>
              <div className="ctas" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 32 }}>
                <Button variant="primary" size="lg" icon="heart" onClick={() => onNav('dedications')}>Dedicate a space</Button>
                <Button variant="ghost" size="lg" onClick={() => onNav('vision')}>The vision</Button>
              </div>
            </div>
            <div className="split-img">
              <img src="assets/rendering.jpg" alt="Soul Center rendering" />
            </div>
          </div>
        </section>
      );
    }
    // default: stacked
    return (
      <section className="hero-home">
        <div className="container">
          <h1>Transforming lives through <em>opportunity &amp; inclusion.</em></h1>
          <p className="lead">
            The Soul Center will house innovative programs for adults with special needs —
            creative expression, vocational training, community service, and meaningful employment
            in a nurturing, inclusive environment.
          </p>
          <div className="ctas">
            <Button variant="primary" size="lg" icon="heart" onClick={() => onNav('dedications')}>Dedicate a space</Button>
            <Button variant="ghost" size="lg" onClick={() => onNav('vision')}>The vision</Button>
          </div>
          <div className="rendering-wrap">
            <img src="assets/rendering.jpg" alt="Soul Center rendering" />
            <div className="rendering-caption">Architectural rendering · 16 Microlab Road, Livingston NJ</div>
          </div>
        </div>
      </section>
    );
  };

  return (
    <div className="page">
      {renderHero()}

      {/* Stats band */}
      <div className="container">
        <div className="stats-band">
          <div className="stats-band-grid">
            <div><div className="n">35,000+</div><div className="l">Annual participants at LifeTown</div></div>
            <div><div className="n">1,500</div><div className="l">Teen &amp; adult volunteers</div></div>
            <div><div className="n">6.5</div><div className="l">Acre unified campus</div></div>
            <div><div className="n">9</div><div className="l">New program spaces</div></div>
          </div>
        </div>
      </div>
      <section className="block bg-mist">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">The Vision</div>
            <h2>Why, what, and where.</h2>
            <p>
              The building next to LifeTown presents an extraordinary opportunity to seamlessly expand
              programs that change lives.
            </p>
          </div>
          <div className="wyz-grid">
            <div className="wyz-card">
              <div className="big">Why</div>
              <h3>Adults need us, too.</h3>
              <p>
                Many adults with special needs face challenges and isolation after youth programs end.
                Friendship Circle has responded with adult-focused initiatives met with overwhelming demand —
                underscoring the urgent need for expanded support.
              </p>
            </div>
            <div className="wyz-card">
              <div className="big">What</div>
              <h3>Innovative programs under one roof.</h3>
              <p>
                Soul Space, Soul Café, Soul Studio, Job Studio, and the Mitzvah Center — opportunities for
                creative expression, vocational training, community service, and meaningful employment.
              </p>
            </div>
            <div className="wyz-card">
              <div className="big">Where</div>
              <h3>Right next to LifeTown.</h3>
              <p>
                The building next to LifeTown creates a unified 6.5-acre campus dedicated to inclusion,
                opportunity, and community — ensuring ongoing support for individuals and families.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Spaces teaser */}
      <section className="block">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">Programs</div>
            <h2>A place for every soul.</h2>
            <p>Nine thoughtfully designed spaces, each built around purpose, dignity, and belonging.</p>
          </div>
          <div className="spaces-grid">
            {SC_SPACES.slice(0, 6).map((s, i) => (
              <div key={s.key} className={`space-card variant-${['a','b','c','a','b','c'][i]}`} onClick={() => onNav('spaces')}>
                <div className="img">
                  {s.photo ? <img src={s.photo} alt={s.name} /> : <div className="ph-label">[ {s.name} photo ]</div>}
                  <div className="icon-chip"><Icon name={s.icon} size={22} /></div>
                </div>
                <div className="content">
                  <div className="tag">{s.category}</div>
                  <h3>{s.name}</h3>
                  <p>{s.description}</p>
                  <a className="more">Learn more <Icon name="arrow-right" size={16} /></a>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 28 }}>
            <Button variant="ghost" onClick={() => onNav('spaces')} iconRight="arrow-right">See all spaces</Button>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="block tight bg-mist">
        <div className="container">
          <CTABand
            title="Your name, on a space that changes lives."
            body="Every room, every wall, every mezuzah tells a story. Choose yours from our dedication opportunities and help build the Soul Center from the ground up."
            primary={{ label: 'View dedication opportunities', to: 'dedications', icon: 'heart' }}
            secondary={{ label: 'Get in touch', to: 'contact' }}
            onNav={onNav}
          />
        </div>
      </section>
    </div>
  );
};

window.HomePage = HomePage;