/* Sweep Geophysical — Home page */
const { Button: SButton, Eyebrow: SEyebrow, SectionHeading: SHeading, ServiceCard: SServiceCard,
        StatCounter: SStat, Card: SCard, ZoomImage: SZoom, Badge: SBadge } = window.SweepGeophysicalDesignSystem_5187bc;

function Hero({ navigate }) {
  const I = window.Icons;
  return (
    <section className="hero">
      <div className="hero__bg" />
      <div className="hero__contours"><img src="./assets/contours.svg" alt="" /></div>
      <div className="wrap wrap--wide hero__grid">
        <div className="hero__copy">
          <SEyebrow>Geophysical Surveying &amp; Subsurface Investigation</SEyebrow>
          <h1>Precision geophysical surveys for <span className="acc">smarter decisions</span></h1>
          <p className="hero__lead">We image what lies beneath the surface — mapping utilities, geology, voids and hazards with non-invasive radar, electromagnetic and seismic methods, so your team builds on certainty.</p>
          <div className="hero__cta">
            <SButton variant="primary" size="lg" iconRight={<I.arrowRight size={20} />} onClick={() => navigate('contact')}>Get a Consultation</SButton>
            <SButton variant="outline" size="lg" onClick={() => navigate('services')}>View Services</SButton>
          </div>
          <div className="hero__stats">
            <div className="hero__stat"><b>1,200+</b><span>Projects Completed</span></div>
            <div className="hero__stat"><b>16 yrs</b><span>Field Experience</span></div>
            <div className="hero__stat"><b>QL-A/B</b><span>Utility Accuracy</span></div>
          </div>
        </div>
        <div className="hero__visual">
          <div className="hero__img"><img src="./assets/images/hero.jpg" alt="Field geophysical survey" /></div>
          <div className="hero__chip">
            <span className="ic"><I.radar size={22} /></span>
            <div><b>Live GPR acquisition</b><span>Grid RES-02 · 1.6 GHz</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <section className="section--tight section--alt">
      <div className="wrap wrap--wide">
        <div className="trust">
          <span className="trust__label">Trusted by engineering &amp; environmental teams</span>
          {window.TRUST.map((t) => <span key={t} className="trust__logo">{t}</span>)}
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  const I = window.Icons;
  return (
    <section className="section">
      <div className="wrap wrap--wide">
        <SHeading align="center" eyebrow="Why Sweep" title="Built for engineers who can't afford surprises"
          subtitle="Four reasons infrastructure and environmental teams make Sweep their default geophysics partner." />
        <div className="grid-why" style={{ marginTop: 'var(--space-12)' }}>
          {window.WHY.map((w) => {
            const Ic = I[w.icon];
            return (
              <SCard key={w.title} interactive pad="lg">
                <div className="feature">
                  <span className="feature__ic"><Ic size={26} /></span>
                  <h3>{w.title}</h3>
                  <p>{w.text}</p>
                </div>
              </SCard>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServicesPreview({ navigate }) {
  const I = window.Icons;
  const rows = window.SERVICES.slice(0, 3);
  return (
    <section className="section section--alt">
      <div className="wrap wrap--wide">
        <SHeading eyebrow="What We Do" title="Survey methods matched to your question"
          subtitle="Every site is different. We select and combine methods to answer exactly what your project needs to know." />
        <div style={{ marginTop: 'var(--space-16)' }}>
          {rows.map((s, i) => {
            const Ic = I[s.icon];
            const rev = i % 2 === 1;
            return (
              <div className={'altrow' + (rev ? ' altrow--rev' : '')} key={s.id}>
                <div className="altrow__copy">
                  <SBadge variant="accent">{('0' + (i + 1)).slice(-2)} · {s.title}</SBadge>
                  <h3>{s.title}</h3>
                  <p>{s.short}</p>
                  <ul className="benefits">
                    {s.benefits.map((b) => (
                      <li key={b}><span className="bi"><I.check size={14} /></span>{b}</li>
                    ))}
                  </ul>
                  <div>
                    <SButton variant="ghost" iconRight={<I.arrowRight size={18} />} onClick={() => navigate('services')}>Learn more</SButton>
                  </div>
                </div>
                <SZoom className="altrow__media" src={s.img} alt={s.title} caption={s.title} />
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'var(--space-16)' }}>
          <SButton variant="secondary" size="lg" iconRight={<I.arrowRight size={20} />} onClick={() => navigate('services')}>Explore all services</SButton>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  return (
    <section className="section">
      <div className="wrap wrap--wide">
        <div className="statband">
          {window.STATS.map((s) => (
            <div className="statband__item" key={s.label}>
              <SStat value={s.value} suffix={s.suffix} label={s.label} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const I = window.Icons;
  return (
    <section className="section section--alt">
      <div className="wrap wrap--wide">
        <SHeading align="center" eyebrow="Client Voices" title="Results our clients stake their projects on" />
        <div className="tgrid" style={{ marginTop: 'var(--space-12)' }}>
          {window.TESTIMONIALS.map((t) => (
            <SCard key={t.name} pad="lg">
              <div className="tcard">
                <div className="tcard__stars">{Array.from({ length: t.stars }).map((_, i) => <I.star key={i} size={16} />)}</div>
                <p className="tcard__quote">“{t.quote}”</p>
                <div className="tcard__who">
                  <span className="tcard__av">{t.name.split(' ').map((n) => n[0]).join('')}</span>
                  <div><b>{t.name}</b><span>{t.role}</span></div>
                </div>
              </div>
            </SCard>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBanner({ navigate }) {
  const I = window.Icons;
  return (
    <section className="section">
      <div className="wrap wrap--wide">
        <div className="ctaband">
          <div className="ctaband__contours"><img src="./assets/contours.svg" alt="" /></div>
          <div className="ctaband__inner">
            <h2>Ready to understand what's beneath the surface?</h2>
            <p>Tell us about your site and timeline. We'll respond within one business day with a clear scope and pricing.</p>
            <div className="ctaband__btns">
              <SButton className="btn-onorange" size="lg" iconRight={<I.arrowRight size={20} />} onClick={() => navigate('contact')}>Request Quote</SButton>
              <SButton className="btn-onorange-2" variant="outline" size="lg" onClick={() => navigate('contact')}>Contact Us</SButton>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ navigate }) {
  return (
    <React.Fragment>
      <Hero navigate={navigate} />
      <TrustStrip />
      <WhyUs />
      <ServicesPreview navigate={navigate} />
      <StatsBand />
      <Testimonials />
      <CtaBanner navigate={navigate} />
    </React.Fragment>
  );
}

window.HomePage = HomePage;