// Services, Process, About, Contact pages
const { useState: useStateP, useEffect: useEffectP, useContext: useCtxP } = React;

/* ============================ SERVICES ============================ */
const SERVICES = [
  {
    variant: "",
    num: "01 / Assess",
    title: "Map your workflows, systems, and pain points.",
    icon: "flow",
    body: [
      "Before we build anything, we spend time inside your operations. We talk to the people doing the work, watch how information actually moves, and look at where tools and handoffs break down.",
      "You walk away with a prioritized roadmap, ranked by what's painful, what's fixable, and what's worth doing first.",
    ],
    forWho: "Operations teams who know something isn't working, but want an outside read before spending on a build.",
    includes: ["Stakeholder interviews","Workflow mapping","Systems and tooling review","Prioritized opportunity list","Written recommendation with scope and sequence"],
    notIncluded: ["Build or implementation work (separate engagement)","Vendor selection on our behalf"],
    timeline: "2–3 weeks",
    pricing: "from $3,000",
  },
  {
    variant: "mint",
    num: "02 / Automate",
    title: "Eliminate the manual, repetitive work your team runs by hand.",
    icon: "flow",
    body: [
      "We take the workflows your team runs over and over, intake, approvals, onboarding checklists, routing rules, handoffs, data sync, and rebuild them so they run reliably with less manual coordination.",
      "People stay in the loop where judgement matters. The repetitive steps between stop living in inboxes and spreadsheets.",
    ],
    forWho: "Teams who can name three or four specific processes that are eating hours every week.",
    includes: ["Workflow design with your team","Configured automations","Run-history visibility","Plain-language documentation","Live training for each workflow"],
    notIncluded: ["Net-new tool purchases without cause","Work that should be a conversation, not a workflow"],
    timeline: "3–6 weeks per workflow set",
    pricing: "from $6,000",
  },
  {
    variant: "blue",
    num: "03 / Integrate",
    title: "Connect the tools your team already uses.",
    icon: "plug",
    body: [
      "Most operations pain isn't a missing tool, it's tools that don't talk. We build reliable connections between Microsoft 365, CRMs, spreadsheets, ticketing systems, and the custom systems behind them, so data lives in one place and shows up where people need it.",
      "When integration is done well, you stop noticing it. The seams disappear.",
    ],
    forWho: "Teams re-keying data across two or more systems, or running reports that are always out of date.",
    includes: ["Integration architecture","Tested data sync","Monitoring and alerts","Ownership and runbook documentation","Handoff training"],
    notIncluded: ["Rebuilding systems that work","Replacing tools your team already likes"],
    timeline: "3–8 weeks",
    pricing: "from $6,000",
  },
  {
    variant: "deep",
    num: "04 / Activate",
    title: "Bring AI into your team's work, in ways that stick.",
    icon: "spark",
    body: [
      "AI is most useful when it disappears into work people already do, drafting a reply, classifying an intake, summarizing a long thread, flagging something for human review. We help you find the two or three places AI actually fits, and build it into the tools your team already opens.",
      "No chatbots bolted on your homepage. No models making decisions you can't audit.",
    ],
    forWho: "Teams under pressure to 'do something with AI' who want a practical, working path rather than a pilot that fizzles.",
    includes: ["Use-case assessment","AI built into existing tools","Human-in-the-loop safeguards","Prompt and policy documentation","Quality baselines"],
    notIncluded: ["Model training from scratch","Decisions we can't show our work on"],
    timeline: "4–8 weeks",
    pricing: "from $8,000",
  },
];

const ServicesPage = () => {
  const { go } = useCtxP(RouterCtx);
  return (
    <>
      <section className="subhero">
        <div className="container subhero-inner">
          <Reveal as="span" className="eyebrow">Services</Reveal>
          <Reveal delay={1} as="h1">Automation, integrations, and AI <em>your team actually uses.</em></Reveal>
          <Reveal delay={2} as="p" className="lede">
            CoPowr builds practical operations infrastructure for mid-market teams, scoped around real problems, delivered alongside the people doing the work.
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {SERVICES.map(s => (
            <ServiceDetail key={s.num} {...s}/>
          ))}
        </div>
      </section>

      <section className="section section-cream" id="support-addon">
        <div className="container-narrow">
          <Reveal className="section-head center">
            <span className="eyebrow">Support add-on</span>
            <h2>After launch, we stay in reach.</h2>
            <p>Every engagement ends with a built-in 30/60/90 support window. Beyond that, ongoing support is shaped around what your team actually needs, not what fits in a pricing tier. Some clients want a light retainer. Some call us back a year later. Some are set. We'll figure out what's useful once you've lived with the system a while.</p>
          </Reveal>
          <div style={{textAlign:"center",marginTop:36}}>
            <a onClick={(e)=>{e.preventDefault(); go("contact");}} href="#contact" className="btn btn-outline">Ask about support <Icon name="arrow" size={14}/></a>
          </div>
        </div>
      </section>

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

const ServiceDetail = ({ variant, num, title, icon, body, forWho, includes, notIncluded, timeline, pricing }) => {
  const [open, setOpen] = useStateP(false);
  // Track whether mobile toggle is active (matches CSS breakpoint)
  const [isMobile, setIsMobile] = useStateP(() => typeof window !== "undefined" && window.matchMedia("(max-width: 720px)").matches);
  useEffectP(() => {
    const mq = window.matchMedia("(max-width: 720px)");
    const on = () => setIsMobile(mq.matches);
    on();
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => {
      mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on);
    };
  }, []);
  const toggle = () => { if (isMobile) setOpen(v => !v); };
  return (
    <Reveal as="div" className={`service-detail ${variant}`} data-open={open ? "true" : "false"}>
      <div className="service-detail-head" onClick={toggle} role={isMobile ? "button" : undefined} aria-expanded={isMobile ? open : undefined} tabIndex={isMobile ? 0 : undefined} onKeyDown={isMobile ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } } : undefined}>
        <div className="service-head">
          <div className="pillar-icon ic" style={{width:48,height:48,borderRadius:12,display:"inline-flex",alignItems:"center",justifyContent:"center",flex:"none",
            background: variant === "mint" ? "var(--mint-50)" : variant === "blue" ? "var(--blue-50)" : variant === "deep" ? "var(--ink-100)" : "var(--teal-50)",
            color: variant === "mint" ? "#2a7a43" : variant === "blue" ? "var(--copowr-blue)" : variant === "deep" ? "var(--ink-900)" : "var(--copowr-teal)"
          }}>
            <Icon name={icon} size={22}/>
          </div>
          <div className="badge" style={{margin:0}}><span className="badge-dot"/>{num}</div>
          <span className="service-chevron" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </div>
        <h2 style={{marginTop:22}}>{title}</h2>
      </div>
      <div className="body-col service-detail-body">
        {body.map((p, i) => <p key={i}>{p}</p>)}
        <h4>Who it's for</h4>
        <p style={{margin:"0 0 12px"}}>{forWho}</p>
        <h4>What's included</h4>
        <ul>{includes.map(p => <li key={p}>{p}</li>)}</ul>
        <h4>What it's not</h4>
        <ul>{notIncluded.map(d => <li key={d}>{d}</li>)}</ul>
      </div>
    </Reveal>
  );
};

/* ============================ PROCESS ============================ */
const PROCESS_STAGES = [
  {
    n: "1", t: "Discovery",
    what: "We sit with your team and listen. Before anything else, we want to understand how the work actually moves through your team, not how the org chart says it does. A few conversations, a little shadowing, and a close read on the tools and handoffs that matter.",
    see: "A short working session, honest questions, and a written read-out of what we found. No surprises, no sales deck.",
    we: "Notes from the people doing the work, a map of how the work actually flows, and a ranked list of what's worth fixing first.",
    you: "Access to the people who know. Thirty minutes on the calendar, two or three times.",
  },
  {
    n: "2", t: "Design",
    what: "We write the plan so leadership and your team both recognize it. A short, scoped document that says what we're going to build, how it fits the way your team already works, and what \"done\" looks like.",
    see: "A short design doc and a review call. You push back, we revise, we agree on scope before a single thing gets built.",
    we: "Workflow blueprints, the measures we'll use to know it's working, an adoption plan, and a scoped price.",
    you: "Review and sign-off. Flag anything that won't survive contact with your real team.",
  },
  {
    n: "3", t: "Build",
    what: "We build in iterations, so you see working pieces while they're still small enough to change. No big reveals or months of silence. Every week or two, you see a working version and have a real say in what comes next.",
    see: "A working version every 1–2 weeks, plus a weekly working session where the people doing the work shape what's next.",
    we: "Iterative implementation, internal testing, and plain-language notes on what changed and why.",
    you: "A real person inside your team for context. Weekly sync attendance. Async feedback between.",
  },
  {
    n: "4", t: "Launch",
    what: "We roll out in stages, with training that sticks instead of a PDF dump. Live sessions in small groups, docs people can actually read, and a fast channel for questions during the first weeks — a launch that respects your team's time.",
    see: "A rollout that matches your team's reality. Real training, not a recording. Answers to questions, same day.",
    we: "A staged rollout plan, live training sessions, plain-language user guides, and the internal how-to for whoever will own the system.",
    you: "Time from the people who'll actually use it. Someone to help us with internal communications during launch week.",
  },
  {
    n: "5", t: "Support",
    what: "We stay close for 30, 60, then 90 days, and after that the next step is yours. Keep us on a light retainer, switch to a la carte, or take it from there — we'll be glad either way. No lock-in, ever.",
    see: "Check-ins on real use. Small iterations as your team puts the system through actual work.",
    we: "Support, iteration on what you learn from real use, documentation updates, and a clean handoff the moment you're ready.",
    you: "Honest feedback. Questions when something doesn't feel right. A decision about what ongoing support should look like.",
  },
];

const ProcessPage = () => (
  <>
    <section className="subhero">
      <div className="container subhero-inner">
        <Reveal as="span" className="eyebrow">Process</Reveal>
        <Reveal delay={1} as="h1">How we build <em>alongside your team.</em></Reveal>
        <Reveal delay={2} as="p" className="lede">
          Five stages, predictable rhythm. You'll always know where we are, what's next, and what we need from you.
        </Reveal>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="process-grid">
          {PROCESS_STAGES.map((s, i) => (
            <Reveal key={s.n} as="article" className={`stage-card ${["teal","mint","blue","deep","teal"][i]}`} delay={(i % 4) + 1}>
              <div className="stage-card-head">
                <span className="stage-num">{s.n.padStart(2,"0")}</span>
                <span className="stage-rule" aria-hidden="true"/>
                <span className="stage-kicker">Stage {s.n} of 5</span>
              </div>
              <h3 className="stage-title">{s.t}</h3>
              <p className="stage-body">{s.what}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    <section className="section section-cream">
      <div className="container">
        <div className="comms-layout">
          <Reveal className="comms-lede">
            <span className="eyebrow">How we stay in touch</span>
            <h2>Close, but not in the way.</h2>
            <p>We don't book a weekly meeting just to have one. We come back when there's something to look at, something to decide, or something you want to change. In between, the door is open.</p>
          </Reveal>

          <Reveal delay={1} className="comms-notes">
            <div className="comms-note">
              <span className="comms-mark">01</span>
              <div>
                <h4>We call when there's something to see</h4>
                <p>Working sessions happen when the build is at a point where your feedback moves it forward. You'll never sit through a status meeting that could've been an email.</p>
              </div>
            </div>
            <div className="comms-note">
              <span className="comms-mark">02</span>
              <div>
                <h4>Reach us between calls, same day</h4>
                <p>A question on Tuesday doesn't wait until the following Tuesday. Async comments, quick clarifications, small changes — we reply inside one business day, most of the time much faster.</p>
              </div>
            </div>
            <div className="comms-note">
              <span className="comms-mark">03</span>
              <div>
                <h4>You can see the work, always</h4>
                <p>Blueprints, docs, release notes, decisions. Open to your team from day one, in plain language. Nothing hidden in a vendor folder you can't get to later.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    <CtaBand title="Ready to talk?" body="Book a discovery call. We'll walk through the stages, scoped to your actual situation."/>
  </>
);

/* ============================ ABOUT ============================ */
const AboutPage = () => (
  <>
    <section className="subhero">
      <div className="container subhero-inner">
        <Reveal as="span" className="eyebrow">About</Reveal>
        <Reveal delay={1} as="h1">What CoPowr believes, <em>and why we exist.</em></Reveal>
        <Reveal delay={2} as="p" className="lede">
          AI and automation should remove friction, not add it. Most implementations add it. CoPowr was built to be the opposite of that.
        </Reveal>
      </div>
    </section>

    {/* BELIEVE */}
    <section className="section">
      <div className="container-narrow">
        <Reveal>
          <span className="eyebrow">What CoPowr believes</span>
          <h2 className="page-h2">
            AI should remove friction, not add it.
          </h2>
        </Reveal>
        <Reveal delay={1}>
          <p className="page-p">
            The promise of AI is simpler work. The lived reality, for most operations teams, has been the opposite: more tools, more complexity, more projects that sit on a shelf because nobody on the team understood them well enough to run them.
          </p>
          <p className="page-p">
            We think that's a choice, not a law of nature. Done right, AI and automation make operations simpler, not more complicated. They give time back. They make handoffs cleaner. They fade into the background of the work your team already knows how to do.
          </p>
          <p className="page-p">
            Everything about how we work follows from that belief.
          </p>
        </Reveal>
      </div>
    </section>

    {/* WHY EXISTS */}
    <section className="section section-cream">
      <div className="container-narrow">
        <Reveal>
          <span className="eyebrow">Why CoPowr exists</span>
          <h2 className="page-h2 page-h2-sm">
            The gap between what was promised and what teams actually got.
          </h2>
        </Reveal>
        <Reveal delay={1}>
          <p className="page-p">
            Operations leaders have watched the same cycle for years. A project gets scoped. A vendor or internal team builds it in a side room. A deliverable lands on someone's desk, followed by a 40-page document nobody reads. A few months later, the work it was supposed to replace is still being done by hand.
          </p>
          <p className="page-p">
            CoPowr exists to close that gap. We work directly with the people who'll use the system. We build in short iterations they can see and shape. We measure success by whether the system is still running in real hands six months in. If it's not being used, we didn't deliver.
          </p>
        </Reveal>
      </div>
    </section>

    {/* HOW WE WORK */}
    <section className="section">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow">How we work</span>
          <h2>Three standards baked into every engagement.</h2>
          <p>These aren't selling points. They're how every project runs, by default.</p>
        </Reveal>
        <div className="values" style={{marginTop:48}}>
          <Reveal delay={1} as="div" className="value">
            <span className="value-num">01</span>
            <h3>We build alongside your team.</h3>
            <p>The people closest to the work are in the room from Discovery forward. Design decisions happen with them, not in a vendor's office.</p>
          </Reveal>
          <Reveal delay={2} as="div" className="value">
            <span className="value-num">02</span>
            <h3>Plain language is non-negotiable.</h3>
            <p>Documentation written for the people running the system. Training that sticks. No jargon used to sound clever.</p>
          </Reveal>
          <Reveal delay={3} as="div" className="value">
            <span className="value-num">03</span>
            <h3>Adoption is the delivery standard.</h3>
            <p>We don't call it done until the system is being used by real people doing real work. Anything else is theater.</p>
          </Reveal>
        </div>
      </div>
    </section>

    {/* (Background & experience section removed) */}

    <CtaBand title="Ready to talk?" body="Book a discovery call. We'll listen first, then tell you honestly whether CoPowr is the right fit for where your team is."/>
  </>
);

/* ============================ CONTACT ============================ */
const ContactPage = () => {
  const [submitted, setSubmitted] = useStateP(false);
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  return (
    <>
      <section className="subhero">
        <div className="container subhero-inner">
          <Reveal as="span" className="eyebrow">Contact</Reveal>
          <Reveal delay={1} as="h1">Let's talk.</Reveal>
          <Reveal delay={2} as="p" className="lede">
            A real person reads every inquiry. We respond within one business day.
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <Reveal as="aside" className="contact-aside">
              <div className="contact-info-card">
                <h4>Email us directly</h4>
                <p>Prefer inbox over forms?</p>
                <a className="mailto" href="mailto:hi@copowr.com">hi@copowr.com</a>
              </div>
              <div className="contact-info-card">
                <h4>What happens next</h4>
                <div className="contact-next" style={{marginTop:12}}>
                  {[
                    ["1","Response within 1 business day","With a couple of clarifying questions."],
                    ["2","A first conversation","We listen first. Then sketch a path."],
                    ["3","Scoped recommendation","A clear write-up of what we'd do, or an honest referral if we're not the right fit."],
                  ].map(([n,t,d]) => (
                    <div key={n} className="contact-next-step">
                      <div className="idx">{n}</div>
                      <div><h5>{t}</h5><p>{d}</p></div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={1} as="div" className="contact-form-card">
              {submitted ? (
                <div style={{textAlign:"center",padding:"40px 20px"}}>
                  <div style={{width:64,height:64,borderRadius:999,background:"var(--mint-50)",color:"#2a7a43",display:"inline-flex",alignItems:"center",justifyContent:"center",marginBottom:20}}>
                    <Icon name="check" size={30}/>
                  </div>
                  <h3 style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:24,color:"var(--ink-900)",margin:"0 0 10px",letterSpacing:"-0.015em"}}>Thanks, we've got it.</h3>
                  <p style={{fontSize:16,color:"var(--fg-2)",margin:"0 auto",maxWidth:"40ch",lineHeight:1.55}}>
                    We'll respond within one business day. If it's urgent, reach us at <a href="mailto:hi@copowr.com" style={{color:"var(--copowr-teal)",fontWeight:500}}>hi@copowr.com</a>.
                  </p>
                </div>
              ) : (
                <>
                  <h3>Tell us what you're trying to solve.</h3>
                  <p className="hint-top">The more specific you can be, the more useful our first reply will be.</p>
                  <form onSubmit={onSubmit}>
                    <div className="form-grid">
                      <div className="form-field">
                        <label>Name *</label>
                        <input required placeholder="Jamie Rivera"/>
                      </div>
                      <div className="form-field">
                        <label>Work email *</label>
                        <input required type="email" placeholder="jamie@company.com"/>
                      </div>
                      <div className="form-field">
                        <label>Company *</label>
                        <input required placeholder="Your company"/>
                      </div>
                      <div className="form-field">
                        <label>Team size *</label>
                        <select required defaultValue="">
                          <option value="" disabled>Select a range</option>
                          <option>Under 20</option>
                          <option>20–100</option>
                          <option>100–500</option>
                          <option>500+</option>
                        </select>
                      </div>
                      <div className="form-field full">
                        <label>What are you trying to solve? *</label>
                        <textarea required placeholder="The more specific, the better. Example: 'Our operations team spends about 5 hours a week moving data between our CRM and our billing system, and we want to stop.' — Don't know yet? No worries. We can chat and figure it out together."/>
                      </div>
                    </div>
                    <div className="submit-row">
                      <span className="privacy">We'll only use your info to reply. No newsletters, no pressure.</span>
                      <button type="submit" className="btn btn-primary btn-lg">Send <Icon name="arrow" size={15}/></button>
                    </div>
                  </form>
                </>
              )}
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { ServicesPage, ProcessPage, AboutPage, ContactPage });
