// Services + Special Projects page

function ServicesPage({ setRoute, openLightbox }) {
  return (
    <main data-screen-label="04 Services">
      {/* Header */}
      <section className="relative bg-wafer-20 overflow-hidden">
        <div className="absolute inset-0 paw-pattern opacity-50" />
        <div className="relative max-w-[1280px] mx-auto px-6 py-20 md:py-24 text-center">
          <window.Eyebrow className="justify-center">What we offer</window.Eyebrow>
          <h1 className="mt-6 font-display text-6xl md:text-8xl text-steel-blue leading-[0.9]">
            <window.ScriptAccent angle={-4} color="#779A93" className="text-7xl md:text-9xl">
              Services.
            </window.ScriptAccent>
          </h1>
          <p className="mt-5 font-serif text-xl text-charcoal/75 max-w-2xl mx-auto leading-relaxed">
            Photography, paintings, greeting cards, and special projects close to my heart.
          </p>
        </div>
      </section>

      {/* Big service tiles */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-20">
          <div className="space-y-6">
            {window.SERVICES.map((s, i) => (
              <div
                key={s.slug}
                className={`grid lg:grid-cols-12 gap-8 lg:gap-12 items-center ${i % 2 === 1 ? "lg:[direction:rtl]" : ""}`}
              >
                <div className="lg:col-span-7 lg:[direction:ltr]">
                  <div className="aspect-[16/10] overflow-hidden frame-border">
                    <img src={s.image} alt={s.title} className="w-full h-full object-cover" />
                  </div>
                </div>
                <div className="lg:col-span-5 lg:[direction:ltr]">
                  <window.Eyebrow>0{i + 1} · Service</window.Eyebrow>
                  <h3 className="mt-4 font-display text-4xl md:text-5xl text-steel-blue leading-tight">{s.title}</h3>
                  <p className="mt-5 font-serif text-lg text-charcoal/75 leading-relaxed">{s.description}</p>

                  {s.slug === "pet-photography" && (
                    <ul className="mt-6 grid grid-cols-2 gap-x-4 gap-y-2 text-sm text-charcoal/80 font-serif">
                      {["Cat photography", "Dog photography", "Horse photography", "Long horn photography", "Studio sessions", "On-location"].map((it) => (
                        <li key={it} className="flex items-center gap-2">
                          <window.Icon.Check className="w-3.5 h-3.5 text-juniper" />
                          {it}
                        </li>
                      ))}
                    </ul>
                  )}
                  {s.slug === "portfolios" && (
                    <p className="mt-4 text-sm text-charcoal/65 font-serif italic">
                      Pets from across the nation — get inspired for your own session.
                    </p>
                  )}
                  {s.slug === "special-projects" && (
                    <ul className="mt-6 grid grid-cols-2 gap-x-4 gap-y-2 text-sm text-charcoal/80 font-serif">
                      {window.SPECIAL_PROJECTS.map((sp) => (
                        <li key={sp.slug} className="flex items-center gap-2">
                          <window.Icon.Paw className="w-3.5 h-3.5 text-juniper" />
                          {sp.title}
                        </li>
                      ))}
                    </ul>
                  )}

                  <div className="mt-7 flex flex-wrap gap-3">
                    <window.Button onClick={() => setRoute("contact")} size="md">
                      Inquire <window.Icon.ArrowRight className="w-3.5 h-3.5" />
                    </window.Button>
                    <window.Button onClick={() => setRoute("portfolio")} variant="ghost" size="md">
                      See examples
                    </window.Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="bg-bark-beige-20">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="How it works"
            title="A session,"
            script="step by step."
          />
          <div className="mt-14 grid md:grid-cols-4 gap-5">
            {[
              { n: "01", title: "Book", blurb: "Reach out by phone or contact form. We'll find a time." },
              { n: "02", title: "Plan", blurb: "Discuss pose, location, and the vibe you imagine." },
              { n: "03", title: "Shoot", blurb: "Studio or on-location — wherever your pet feels most themselves." },
              { n: "04", title: "Receive", blurb: "Edited, high-quality images, prints, or a custom painting." },
            ].map((s) => (
              <div key={s.n} className="bg-white p-7 frame-border">
                <div className="font-display text-5xl text-juniper leading-none">{s.n}</div>
                <div className="mt-5 font-display text-2xl text-steel-blue leading-tight">{s.title}</div>
                <div className="mt-2 font-serif text-sm text-charcoal/70 leading-relaxed">{s.blurb}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Special Projects deep section */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="The give-back"
            title="Special"
            script="projects."
            sub="Here you can find the stories that pull at my heartstrings."
          />
          <div className="mt-14 grid md:grid-cols-2 gap-6">
            {window.SPECIAL_PROJECTS.map((p, i) => (
              <div key={p.slug} className="group relative aspect-[16/10] overflow-hidden frame-border">
                <img src={window.PORTFOLIO[[18, 8, 21, 24][i] || 0].src} alt={p.title} className="absolute inset-0 w-full h-full object-cover transition duration-700 group-hover:scale-105" />
                <div className="absolute inset-0 bg-gradient-to-t from-steel-blue/95 via-steel-blue/55 to-transparent" />
                <div className="relative h-full p-8 flex flex-col justify-end text-white">
                  <div className="eyebrow text-wafer-40">Project · 0{i + 1}</div>
                  <div className="mt-2 font-display text-3xl leading-tight">{p.title}</div>
                  <div className="mt-2 font-serif text-[15px] text-white/85 max-w-md">{p.blurb}</div>
                  <button onClick={() => setRoute("services")} className="mt-4 inline-flex items-center gap-2 text-wafer hover:text-white text-sm uppercase tracking-wider self-start">
                    Read story <window.Icon.ArrowRight className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Saving Hope */}
          <div className="mt-16 bg-juniper text-white p-10 md:p-12 frame-border-dark flex flex-col md:flex-row md:items-center gap-8 relative overflow-hidden">
            <div className="absolute inset-0 paw-pattern-light" />
            <div className="relative w-20 h-20 rounded-full bg-white text-juniper grid place-items-center flex-shrink-0">
              <window.Icon.Heart className="w-9 h-9" />
            </div>
            <div className="relative flex-1">
              <window.Eyebrow color="rgba(255,255,255,0.8)">Animal rescue</window.Eyebrow>
              <div className="mt-2 font-display text-3xl md:text-4xl leading-tight">
                Active board member at <window.ScriptAccent angle={-3} color="#fff" className="text-5xl">Saving Hope.</window.ScriptAccent>
              </div>
              <p className="mt-3 font-serif text-white/85 leading-relaxed">
                Saving Hope rescues, rehabilitates, and rehomes animals across North Texas. Kari serves on the board
                and donates portrait sessions to support adoptions.
              </p>
            </div>
            <a href="https://saving-hope.org/" target="_blank" rel="noreferrer" className="relative inline-flex items-center gap-2 px-6 py-3 bg-white text-juniper text-xs uppercase tracking-wider rounded-[3px] hover:bg-wafer transition">
              Visit Saving Hope <window.Icon.ArrowRight className="w-3.5 h-3.5" />
            </a>
          </div>
        </div>
      </section>

      <window.SisterSiteStrip />
    </main>
  );
}

window.ServicesPage = ServicesPage;