// site/home.jsx — Home page
const HOME_VALUE_PHOTOS = {
  ethics:    "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80&auto=format&fit=crop",
  expertise: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=80&auto=format&fit=crop",
  excellence:"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=900&q=80&auto=format&fit=crop",
};

function HomePage({ onNavigate }) {
  const valuesRef    = useReveal();
  const narrativeRef = useReveal();
  const ctaRef       = useReveal();
  return (
    <div data-screen-label="01 Home">
      {/* Hero */}
      <section className="home-hero" data-comment-anchor="home-hero">
        <div className="container">
          <h1>Rai Wealth Management</h1>
          <span className="hero-divider" aria-hidden="true"></span>
          <div className="hero-tagline">
            Ethics <span className="pipe">|</span> Expertise <span className="pipe">|</span> Excellence
          </div>
        </div>
      </section>

      {/* Our Values */}
      <section className="section-navy values" data-comment-anchor="home-values">
        <div className="container">
          <NavySectionHead
            eyebrow="What we stand for"
            title="Our Values"
            lede="Three principles, kept rigorously, across every client engagement."
          />
          <div ref={valuesRef} className="values-grid stagger-grid">
            <div className="value-card">
              <h3>Ethics</h3>
              <div className="v-rule" aria-hidden="true"></div>
              <p>We ensure that every financial decision aligns with our clients' values and long-term financial well-being.</p>
              <EditorialPhoto src={HOME_VALUE_PHOTOS.ethics} alt="Ethics" ratio="4 / 3" />
            </div>
            <div className="value-card">
              <h3>Expertise</h3>
              <div className="v-rule" aria-hidden="true"></div>
              <p>With years of experience and a deep understanding of financial markets, our team brings a high level of expertise to wealth planning, guiding clients through complex financial landscapes with confidence and precision.</p>
              <EditorialPhoto src={HOME_VALUE_PHOTOS.expertise} alt="Expertise" ratio="4 / 3" />
            </div>
            <div className="value-card">
              <h3>Excellence</h3>
              <div className="v-rule" aria-hidden="true"></div>
              <p>We strive for unparalleled quality in financial strategies and customer service to help clients achieve their financial goals.</p>
              <EditorialPhoto src={HOME_VALUE_PHOTOS.excellence} alt="Excellence" ratio="4 / 3" />
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section className="section-navy about-band" data-comment-anchor="home-about">
        <div className="container">
          <NavySectionHead
            eyebrow="Who we are"
            title="About Rai Wealth Management"
          />
          <div ref={narrativeRef} className="narrative reveal">
            <p>
              At Rai Wealth Management, we combine our market expertise and professional experience to ensure a secure future for you. We provide ethical services tailored to your personal and professional needs in your journey towards achieving your life's goals.
            </p>
          </div>
        </div>
      </section>

      {/* Let's Work Together */}
      <section className="work-together" data-comment-anchor="home-cta">
        <div ref={ctaRef} className="container reveal">
          <h2>Let's Work Together</h2>
          <span className="wt-rule" aria-hidden="true"></span>
          <p>A conversation today can shape the decades ahead.</p>
          <a
            href="#/contact"
            className="btn-gold-solid"
            onClick={(e) => { e.preventDefault(); onNavigate("/contact"); }}
          >
            Get in touch
          </a>
        </div>
      </section>
    </div>
  );
}

window.HomePage = HomePage;