// Home page
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH, useContext: useContextH } = React;

const HomePage = () => {
  const { go } = useContextH(RouterCtx);
  return (
    <>
      {/* HERO */}
      <section className="hero" id="home">
        <div className="container hero-inner">
          <Reveal className="hero-eyebrow-pill">AI and automation implementation</Reveal>
          <Reveal delay={1} as="h1">
            Your team works hard.<br/><span className="accent">Your systems should too.</span>
          </Reveal>
          <Reveal delay={2} as="p" className="lede">
            CoPowr builds the automation, integrations, and AI infrastructure that lets your operations team focus on high-value work, not manual coordination.
          </Reveal>
          <Reveal delay={3} className="hero-cta">
            <a onClick={(e)=>{e.preventDefault(); go("contact");}} href="#contact" className="btn btn-primary btn-lg">Book a discovery call <Icon name="arrow" size={15}/></a>
            <a onClick={(e)=>{e.preventDefault(); document.getElementById("process-preview")?.scrollIntoView({behavior:"smooth"});}} href="#process-preview" className="btn btn-ghost btn-lg">See how it works <Icon name="arrow" size={15}/></a>
          </Reveal>
        </div>
      </section>

      {/* PROBLEM */}
      <section className="section" id="problem">
        <div className="container">          <div className="home-what">
            <Reveal>
              <span className="eyebrow">The situation</span>
              <h2 className="home-what-title">
                You know where the friction is.<br/><em>You just need a way through it.</em>
              </h2>
            </Reveal>
            <Reveal delay={1}>
              <p className="home-what-p">
                Your team is spending hours on manual coordination, re-keying data, chasing approvals, stitching together tools that should already be connected. Leadership is asking about AI. You've seen projects get built and then quietly abandoned, because nobody on the team understood them well enough to use them.
              </p>
              <p className="home-what-p">
                The path forward is clear enough. What's missing is someone who will build it alongside you, with your team, in language your team actually speaks.
              </p>
              <ul className="home-what-list">
                {[
                  "Hours of manual work you can name by heart",
                  "Tools that each hold a piece of the truth",
                  "AI pressure, no clear implementation path",
                  "A history of projects that didn't get adopted",
                ].map(p => (
                  <li key={p}>{p}</li>
                ))}
              </ul>
            </Reveal>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section section-cream" id="services-preview">
        <div className="container">
          <Reveal className="section-head center">
            <span className="eyebrow">Services</span>
            <h2>Four ways we work with your team.</h2>
            <p>Most engagements start with Assess and grow from there. You don't need to pick today, we'll shape it together.</p>
          </Reveal>
          <div className="pillars">
            <Reveal delay={1} as="article" className="pillar">
              <span className="num">01</span>
              <span className="ic"><Icon name="flow"/></span>
              <h3>Assess</h3>
              <p>Map your workflows, systems, and pain points. Walk away with a prioritized roadmap.</p>
              <a onClick={(e)=>{e.preventDefault(); go("services");}} href="#services" style={{color:"var(--copowr-teal)",fontWeight:500,fontSize:14}}>Learn more <Icon name="arrow" size={12}/></a>
            </Reveal>
            <Reveal delay={2} as="article" className="pillar mint">
              <span className="num">02</span>
              <span className="ic"><Icon name="flow"/></span>
              <h3>Automate</h3>
              <p>Eliminate the manual, repetitive work your team runs by hand.</p>
              <a onClick={(e)=>{e.preventDefault(); go("services");}} href="#services" style={{color:"var(--copowr-teal)",fontWeight:500,fontSize:14}}>Learn more <Icon name="arrow" size={12}/></a>
            </Reveal>
            <Reveal delay={3} as="article" className="pillar blue">
              <span className="num">03</span>
              <span className="ic"><Icon name="plug"/></span>
              <h3>Integrate</h3>
              <p>Connect the tools your team already uses into a unified operating layer.</p>
              <a onClick={(e)=>{e.preventDefault(); go("services");}} href="#services" style={{color:"var(--copowr-teal)",fontWeight:500,fontSize:14}}>Learn more <Icon name="arrow" size={12}/></a>
            </Reveal>
            <Reveal delay={4} as="article" className="pillar deep">
              <span className="num">04</span>
              <span className="ic"><Icon name="spark"/></span>
              <h3>Activate</h3>
              <p>Bring AI into your team's work, in ways that stick.</p>
              <a onClick={(e)=>{e.preventDefault(); go("services");}} href="#services" style={{color:"var(--copowr-teal)",fontWeight:500,fontSize:14}}>Learn more <Icon name="arrow" size={12}/></a>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section" id="process-preview">
        <div className="container">
          <Reveal className="section-head center">
            <span className="eyebrow">How it works</span>
            <h2>Five stages. <em>Built alongside your team.</em></h2>
            <p>A predictable cadence, so you always know where we are and what's next.</p>
          </Reveal>
          <div className="process-steps" style={{marginTop:64}}>
            {[
              {n:"1",t:"Discovery",p:"We sit with your team and learn how the work actually flows."},
              {n:"2",t:"Design",p:"A plain-language plan, scoped and sequenced."},
              {n:"3",t:"Build",p:"Short iterations. You see progress weekly."},
              {n:"4",t:"Launch",p:"Training, documentation, and a real support window."},
              {n:"5",t:"Support",p:"Optional ongoing improvement, on your terms."},
            ].map((s, i) => (
              <Reveal key={s.n} delay={i+1} as="div" className="step">
                <div className="step-num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.p}</p>
              </Reveal>
            ))}
          </div>
          <div style={{textAlign:"center",marginTop:48}}>
            <a onClick={(e)=>{e.preventDefault(); go("process");}} href="#process" className="btn btn-outline">See the full process <Icon name="arrow" size={14}/></a>
          </div>
        </div>
      </section>

      {/* WHY COPOWR */}
      <section className="section section-cloud">
        <div className="container">
          <Reveal className="section-head center">
            <span className="eyebrow">Why CoPowr</span>
            <h2>Standards, not selling points.</h2>
            <p>These aren't features we're proud of. They're how we work, every engagement, by default.</p>
          </Reveal>
          <div className="values" style={{marginTop:56}}>
            <Reveal delay={1} as="div" className="value">
              <span className="value-num">01</span>
              <h3>Built with your team, not for them.</h3>
              <p>The people doing the work are part of the build from day one. We design with them, not around them. When we leave, your team understands every piece, because they helped shape it.</p>
            </Reveal>
            <Reveal delay={2} as="div" className="value">
              <span className="value-num">02</span>
              <h3>Adopted, not abandoned.</h3>
              <p>We measure success by use, not delivery. Training, documentation, and a real support window are baked into every engagement, so what we build is still running six months in, not sitting in a shared drive.</p>
            </Reveal>
            <Reveal delay={3} as="div" className="value">
              <span className="value-num">03</span>
              <h3>Simple by design.</h3>
              <p>AI should remove friction, not add it. We ship the smallest thing that solves the problem, and resist anything that makes your operations more complicated to run.</p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <CtaBand
        title="Ready to talk?"
        body="Book a discovery call. No pitch deck, no pressure."
      />
    </>
  );
};

Object.assign(window, { HomePage });