// pw-home.jsx — Purna Web home page.
const H = window.PW_DATA.home, MENU = window.PW_MENU;
const A = (window.PW_ASSETS || {}).home || {};
const sec = (name) => H.sections.find(s => s.h.toLowerCase().startsWith(name)) || { paras: [], items: [], steps: [] };

function HomeHero() {
  return (
    <section className="hero pw-hero pw-hero-art">
      <img className="pw-hero-bg" src={A.hero} alt="" aria-hidden="true"/>
      <div className="hero-bg-overlay" aria-hidden="true"/>
      <div className="container">
        <div className="hero-grid pw-hero-solo">
          <div>
            <h1 className="h1" style={{ margin: "16px 0 24px" }}>{H.hero.h1}</h1>
            {H.hero.paras.map((p, i) => <p className="lead" key={i} style={{ marginBottom: 18, maxWidth: 760 }}>{p}</p>)}
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 10 }}>
              <a href={CTA_HREF} className="btn btn-primary btn-arr">{H.hero.cta || "Get Free Strategy Session"} <Arr/></a>
              <a href="#services" className="btn btn-ghost">See what we do</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeServices() {
  const s = sec("our products");
  return (
    <section className="sec" id="services">
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">Our Products &amp; <span className="accent">Services</span></h2>
          {s.paras.map((p, i) => <p className="lead" key={i}>{p}</p>)}
        </div>
        <div className="pw-svc-grid reveal">
          {MENU.services.map(x => {
            const slug = x.h.replace("pw-service-", "").replace(".html", "");
            return (
              <a className="pw-svc" href={x.h} key={x.h}>
                <div className="svc-icon"><PwIcon name={window.PW_SERVICE_ICONS[slug]} size={22}/></div>
                <h3>{x.l}</h3>
                <p>{x.d}</p>
                <span className="pw-svc-go">Explore <Arr/></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HomeWhy() {
  const s = sec("why choose");
  return (
    <section className="sec sec-navy pw-why-sec">
      <img className="pw-why-bg" src={A.whyChoose} alt="" aria-hidden="true" loading="lazy"/>
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">Why Choose <span className="accent">Purna Web</span></h2>
        </div>
        <div className="pw-why reveal">
          {s.items.map((it, i) => (
            <div className="pw-why-item" key={i}>
              <span className="pw-why-icon"><PwIcon name={(window.PW_VALUE_ICONS || [])[i]} size={26}/></span>
              <div>
                {it.t && <h3>{it.t}</h3>}
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeIndustries() {
  return (
    <section className="sec sec-grey">
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">Strategies Tailored to <span className="accent">Your Industry</span></h2>
          <p className="lead">A med spa, a manufacturer, and a SaaS company all grow differently. We build accordingly.</p>
        </div>
        <div className="pw-chips reveal">
          {MENU.industries.map(x => <a className="pw-chip" href={x.h} key={x.h}>{x.l}<Arr/></a>)}
        </div>
      </div>
    </section>
  );
}

function HomeProcess() {
  const s = sec("our process");
  return (
    <section className="sec">
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">Our <span className="accent">Process</span></h2>
        </div>
        <div className="pw-proc reveal">
          {s.steps.map((st, i) => (
            <div className="process-step" key={i}>
              <div className="pw-step-head">
                <div className="process-num">{i + 1}</div>
                <span className="pw-step-icon"><PwIcon name={(window.PW_PROCESS_ICONS || [])[i]} size={22}/></span>
              </div>
              <h4>{st.t}</h4>
              <p>{st.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Case studies, testimonials, reviews and the blog feed are marked in Home.docx
// as placeholders to be populated. They render as labelled empty states so the
// slots are visible in the layout rather than silently missing.
function Placeholder({ title, lead, note, cta, grey, img }) {
  return (
    <section className={grey ? "sec sec-grey" : "sec"}>
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">{title}</h2>
          {lead && <p className="lead">{lead}</p>}
        </div>
        {img && <div className="pw-slot-art reveal"><img src={img} alt="" loading="lazy"/></div>}
        <div className="pw-placeholder reveal">
          <PwIcon name="ui/check-circle" size={20}/>
          <span>{note}</span>
        </div>
        {cta && <div className="process-cta reveal"><a href={cta.h} className="btn btn-ghost">{cta.l}</a></div>}
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <PwNav active="home"/>
      <HomeHero/>
      <HomeServices/>
      <HomeWhy/>
      <HomeIndustries/>
      <HomeProcess/>
      <HomeCases/>
      <Placeholder img={A.testimonials} title="What Our Clients Say"
        lead="Don't just take our word for it; here's what our clients have to say about working with Purna Web."
        note="Testimonial slots — to be populated with client name, business, headshot/logo and quote for 3–4 featured testimonials."/>
      <Placeholder title="Reviews From Our Clients"
        note="Google Reviews widget — embed the live carousel from Purna Web's Google Business Profile here."
        cta={{ l: "See all our reviews on Google →", h: "https://www.google.com/search?q=Purna+Web+Agency+Orillia" }} grey/>
      <Placeholder img={A.insights} title="Latest Insights"
        lead="Stay ahead with our latest thinking on SEO, AI search, paid advertising, and digital growth strategy."
        note="Blog feed — auto-populates the 3–4 most recent articles with title, excerpt and thumbnail."
        cta={{ l: "Visit our blog →", h: "blog.html" }}/>
      <FinalCta img={A.finalCta}/>
      <PwFooter/>
    </>
  );
}

Object.assign(window, { HomePage });