// About page — polished w/ animated counters, reveals, trust strip.

const { SectionEyebrow: SE_A, CTAStrip: CTA_A } = window.AMSChrome;
const { Reveal: RevA, Counter: CountA } = window.AMSPrim;
const D3 = window.AMS_DATA;

function AboutPage() {
  return (
    <main className="ams-about">
      <section className="ams-page-hero ams-about-page-hero">
        <div className="ams-container ams-page-hero-grid ams-about-hero">
          <div>
            <RevA as="p" className="ams-eyebrow"><span className="ams-eyebrow-rule" />About AMS</RevA>
            <RevA as="h1" className="ams-page-title" delay={80}>
              Family-owned solar — <span className="ams-orange">{D3.business.sinceCopy.toLowerCase()}.</span>
            </RevA>
            <RevA as="p" className="ams-page-lede" delay={160}>
              {D3.business.decadeCopy}. Every job runs through {D3.business.owner} — no call
              centers, no sub-tier installers. Just a small crew who answers the phone.
            </RevA>
            <RevA className="ams-about-stats" delay={240}>
              <div><strong><CountA to={5} decimals={1} suffix="★" /></strong><span>Rated on Yelp</span></div>
              <div><strong><CountA to={10} suffix="-min" /></strong><span>response time</span></div>
              <div><strong><CountA to={100} suffix="%" /></strong><span>response rate</span></div>
            </RevA>
          </div>
          <RevA delay={120}>
            <figure className="ams-owner-portrait">
              <img src="assets/owner/salvador-portrait-2026.jpg" alt="Salvador Magallon, owner of AMS Energy Solutions" />
              <figcaption>
                <strong>{D3.business.owner}</strong>
                <span>Owner</span>
              </figcaption>
            </figure>
          </RevA>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="ams-trust-strip">
        <div className="ams-container ams-trust-strip-inner">
          <RevA><div><strong>{D3.business.sinceCopy}</strong><span>family-owned</span></div></RevA>
          <RevA delay={80}><div><strong>{D3.business.rating}★</strong><span>Rated on Yelp</span></div></RevA>
          <RevA delay={160}><div><strong>Licensed</strong><span>& insured</span></div></RevA>
          <RevA delay={240}><div><strong>San Jose</strong><span>· Bay Area · Central Valley</span></div></RevA>
          <RevA delay={320}><div><strong></strong><span></span></div></RevA>
        </div>
      </section>

      <section className="ams-section">
        <div className="ams-container ams-prose-grid">
          <RevA>
            <SE_A>The story</SE_A>
            <h2 className="ams-h2">Solar installers since 2014 — and we still answer the phone.</h2>
          </RevA>
          <RevA delay={120} className="ams-prose">
            <p>
              AMS Energy Solutions is a family-owned solar installer based in San Jose.
              {" "}{D3.business.sinceCopy}, we've designed and installed systems for homes
              across the Bay Area and Central Valley — sized to actual PG&amp;E usage,
              built on the right roof, walked through PG&amp;E PTO. The day-one job is
              putting the right system on your house.
            </p>
            <p>
              We install on tile, clay tile, flat roofs, ground mounts, and standard
              composite. We're certified on Tesla, Eg4 (with Grid Boss), Enphase, and
              IQ Battery — and we'll happily service legacy SunPower customers who've
              been left without support.
            </p>
            <p>
              Once your system is producing, we stay close: solar cleaning to keep panels
              at full output, battery additions when you're ready, post-outage diagnostics,
              and re-roofing underneath when the existing roof won't outlast the array.
              Those side services exist to protect the install — not the other way around.
            </p>
            <p>
              When you call, you'll talk to {D3.business.ownerShort}. When the crew shows up,
              that's the same crew that finished the last job — not whoever a dispatcher
              could find.
            </p>
          </RevA>
        </div>
      </section>

      <section className="ams-section ams-section-soft">
        <div className="ams-container">
          <RevA className="ams-section-head">
            <SE_A>Service area</SE_A>
            <h2 className="ams-h2">{D3.business.serviceArea}</h2>
          </RevA>
          <div className="ams-area-grid">
            <RevA><div className="ams-area-card">
              <h3>San Jose & South Bay</h3>
              <p>San Jose · Los Gatos · Los Altos · Mountain View · Sunnyvale · Cupertino · Gilroy</p>
            </div></RevA>
            <RevA delay={100}><div className="ams-area-card">
              <h3>Greater Bay Area</h3>
              <p>San Francisco · Carmel Valley · East Bay · Peninsula</p>
            </div></RevA>
            <RevA delay={200}><div className="ams-area-card">
              <h3>San Joaquin Valley</h3>
              <p>Stockton · Manteca · Tracy · Modesto · Merced</p>
            </div></RevA>
          </div>
        </div>
      </section>

      <section className="ams-section">
        <div className="ams-container ams-prose-grid">
          <RevA>
            <SE_A>What we work with</SE_A>
            <h2 className="ams-h2">Every battery brand. Every roof type.</h2>
            <p className="ams-section-lede">
              We're certified across the major battery platforms and trained on every roof
              substrate common to Bay Area and Central Valley homes — so we can quote a
              real install instead of forcing your house onto a one-size kit.
            </p>
          </RevA>
          <RevA delay={120}>
            <div className="ams-capability-grid">
              <div className="ams-capability">
                <span className="ams-capability-eyebrow">Battery brands</span>
                <ul className="ams-capability-list">
                  {D3.business.batteryBrands.map((b) => <li key={b}>{b}</li>)}
                </ul>
              </div>
              <div className="ams-capability">
                <span className="ams-capability-eyebrow">Roof types</span>
                <ul className="ams-capability-list">
                  {D3.business.roofTypes.map((b) => <li key={b}>{b}</li>)}
                </ul>
              </div>
            </div>
          </RevA>
        </div>
      </section>

      {/* Working with us — operational facts on a separate strip */}
      <section className="ams-workstrip">
        <div className="ams-container ams-workstrip-inner">
          <RevA className="ams-workstrip-cell">
            <span className="ams-workstrip-eyebrow">Hours</span>
            <strong className="ams-workstrip-value">{D3.business.hours}</strong>
          </RevA>
          <span className="ams-workstrip-sep" aria-hidden="true" />
          <RevA className="ams-workstrip-cell" delay={80}>
            <span className="ams-workstrip-eyebrow">Response</span>
            <strong className="ams-workstrip-value">{D3.business.response}</strong>
          </RevA>
          <span className="ams-workstrip-sep" aria-hidden="true" />
          <RevA className="ams-workstrip-cell" delay={160}>
            <span className="ams-workstrip-eyebrow">Payments</span>
            <strong className="ams-workstrip-value">{D3.business.payments.join(" · ")}</strong>
          </RevA>
        </div>
      </section>

      <CTA_A
        heading="Want a free walk-through?"
        sub={"Call " + D3.business.ownerShort + " directly. Mon–Sat, 9 AM – 8 PM."} />
      
    </main>);

}

window.AboutPage = AboutPage;