// Home page

const { useState: hUseState } = React;

function HomePage({ setRoute, openLightbox }) {
  // Hero portrait — first photography image looks most striking
  const heroImg = window.PORTFOLIO.find((p) => p.cat === "photography")?.src || window.PORTFOLIO[0].src;
  const preview = [
    window.PORTFOLIO[7], window.PORTFOLIO[10], window.PORTFOLIO[0],
    window.PORTFOLIO[18], window.PORTFOLIO[29], window.PORTFOLIO[14],
    window.PORTFOLIO[2], window.PORTFOLIO[33], window.PORTFOLIO[36],
  ];
  // a small image for the "purrfectly in love" sandwich
  const cuddleImg = window.PORTFOLIO[8].src;

  return (
    <main data-screen-label="01 Home">
      {/* ---------- HERO ---------- */}
      <section className="relative bg-wafer-20 overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{ background: "radial-gradient(circle at 20% 10%, rgba(255,255,255,.74), transparent 32rem), linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0))" }} />
        <div className="relative max-w-[1280px] mx-auto px-6 pt-16 md:pt-24 pb-20 md:pb-28 grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          <div className="lg:col-span-6 reveal">
            <window.Eyebrow>Fort Worth · Pet portrait studio</window.Eyebrow>
            <h1 className="mt-7 font-serif text-[48px] md:text-[78px] leading-[1.04] tracking-tight text-steel-blue max-w-2xl">
              Timeless pet portraits in Fort Worth.
            </h1>
            <p className="mt-7 font-serif text-xl md:text-[26px] text-charcoal/82 leading-snug max-w-xl">
              Elegant photography, paintings, and keepsakes for the animals who are family.
            </p>
            <p className="mt-5 font-serif text-lg text-charcoal/70 leading-relaxed max-w-xl">
              Kari creates calm, artful portrait sessions and heirloom pieces that preserve each pet’s personality with warmth and care.
            </p>
            <div className="mt-9 flex flex-wrap items-center gap-4">
              <window.Button onClick={() => setRoute("contact")} size="lg">
                <window.Icon.Camera className="w-4 h-4" /> Book a Session
              </window.Button>
              <window.Button onClick={() => setRoute("portfolio")} variant="ghost" size="lg">
                View Portfolio <window.Icon.ArrowRight className="w-3.5 h-3.5" />
              </window.Button>
            </div>
            <window.ProfessionalStats />
          </div>

          <div className="lg:col-span-6 relative" style={{ animationDelay: "0.15s" }}>
            <window.HyperFrameStage image={heroImg} />
          </div>
        </div>
      </section>

      {/* ---------- MEET KARI ---------- */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28 grid lg:grid-cols-12 gap-12 lg:gap-20 items-center">
          <div className="lg:col-span-5 relative">
            <img
              src={window.KARI_PORTRAIT}
              alt="Kari Breen"
              className="w-full aspect-[5/6] object-cover frame-border"
            />
            <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-juniper-40 -z-0" />
          </div>
          <div className="lg:col-span-7">
            <window.Eyebrow>Meet Kari</window.Eyebrow>
            <h2 className="mt-5 font-serif text-5xl md:text-6xl text-steel-blue leading-[1.05] tracking-tight">
              Hi, I'm{" "}
              <window.ScriptAccent angle={-4} color="#779A93" className="text-7xl md:text-8xl">
                Kari.
              </window.ScriptAccent>
            </h2>
            <p className="mt-6 font-serif text-[19px] leading-[1.6] text-charcoal/85">
              I found my love for pet photography as a young girl. At age 7, I took my first portrait
              session with a polaroid camera and{" "}
              <span className="italic text-steel-blue">Ginger</span>, the family Dachshund.
            </p>
            <p className="mt-4 font-serif text-[19px] leading-[1.6] text-charcoal/85">
              Twenty years later, I've studied art and photography in{" "}
              <span className="font-display text-steel-blue">Italy</span>,{" "}
              <span className="font-display text-steel-blue">Greece</span>,{" "}
              <span className="font-display text-steel-blue">Canada</span>, and across the United States.
              After settling in Fort Worth, I became the city's leading professional pet photographer.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-6">
              <button onClick={() => setRoute("about")} className="inline-flex items-center gap-2 text-juniper hover:text-steel-blue tracking-wide text-sm uppercase">
                Read my full story <window.Icon.ArrowRight className="w-4 h-4" />
              </button>
              <div className="hidden md:flex items-center gap-3 text-charcoal/60 text-sm">
                <span className="w-10 h-px bg-bark-beige" />
                <span className="font-serif italic">A small, female-led studio.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- SERVICES ---------- */}
      <section className="bg-bark-beige-20">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="What we do"
            title="Photography, paintings, and custom keepsakes."
            sub="Portrait sessions, commissioned artwork, greeting cards, and special projects rooted in Kari’s love for animals."
          />
          <div className="mt-10 md:mt-14 grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-7">
            {window.SERVICES.map((s, i) => (
              <button
                key={s.slug}
                onClick={() => setRoute("services")}
                className="group relative aspect-[3/4] md:aspect-[4/5] overflow-hidden frame-border text-left"
              >
                <img src={s.image} alt={s.title} className="absolute inset-0 w-full h-full object-cover transition duration-700 group-hover:scale-[1.06]" />
                <div className="absolute inset-0 bg-gradient-to-t from-steel-blue/95 via-steel-blue/55 to-steel-blue/20 group-hover:from-steel-blue/85 transition" />
                <div className="relative h-full p-4 sm:p-6 md:p-8 flex flex-col justify-end text-white">
                  <div className="eyebrow text-wafer-40 text-[9px] sm:text-[10px]">0{i + 1} · Service</div>
                  <div className="font-serif text-xl sm:text-2xl md:font-display md:text-4xl mt-1.5 md:mt-2 leading-tight">{s.title}</div>
                  <div className="hidden sm:block font-serif text-[15px] mt-3 text-white/85 leading-relaxed max-w-xs">{s.description}</div>
                  <div className="mt-3 md:mt-5 inline-flex items-center gap-1.5 md:gap-2 text-[10px] sm:text-xs md:text-sm uppercase tracking-wider text-wafer">
                    Learn more <window.Icon.ArrowRight className="w-3.5 h-3.5" />
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- GIFT CTA ---------- */}
      <section className="relative bg-juniper text-white overflow-hidden">
        <div className="absolute inset-0 opacity-15 paw-pattern-light" />
        <div className="relative max-w-[1180px] mx-auto px-6 py-18 md:py-24 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-5">
            <img src={cuddleImg} alt="Pet portrait gift" className="w-full max-h-[420px] object-cover frame-border-dark" />
          </div>
          <div className="lg:col-span-7 lg:pl-8">
            <window.Eyebrow color="rgba(255,255,255,0.78)">A meaningful gift</window.Eyebrow>
            <h3 className="mt-5 font-serif text-3xl md:text-5xl leading-tight text-white">
              A portrait they’ll treasure for years.
            </h3>
            <p className="mt-5 font-serif text-lg text-white/82 leading-relaxed max-w-2xl">
              Gift a custom pet portrait session for someone whose animal is part of the family.
            </p>
            <div className="mt-8">
              <window.Button onClick={() => setRoute("contact")} variant="tertiary" size="lg" className="!bg-wafer !text-juniper hover:!bg-white">
                Book a Gift Session <window.Icon.ArrowRight className="w-3.5 h-3.5" />
              </window.Button>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- PORTFOLIO PREVIEW ---------- */}
      <section className="bg-wafer-20">
        <div className="max-w-[1400px] mx-auto px-6 py-24 md:py-28">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
            <window.SectionHeader
              align="left"
              eyebrow="Our work"
              title="Recent"
              script="favorites."
              sub="A small glimpse of forty-plus portraits, paintings, and cards."
            />
            <button onClick={() => setRoute("portfolio")} className="inline-flex items-center gap-2 text-steel-blue hover:text-juniper tracking-wide text-sm uppercase whitespace-nowrap">
              View full portfolio · {window.PORTFOLIO.length}+ pieces <window.Icon.ArrowRight className="w-4 h-4" />
            </button>
          </div>

          <div className="masonry-3">
            {preview.map((img, i) => (
              <div className="masonry-item" key={img.id}>
                <window.PortfolioCard image={img} onClick={() => openLightbox(window.PORTFOLIO.findIndex((p) => p.id === img.id))} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- TESTIMONIALS ---------- */}
      <section className="bg-wafer">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="Kind Words"
            title="Customer"
            script="reviews."
            sub="From families (and their pets) across Fort Worth."
          />
          <div className="mt-10 md:mt-14 grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-8">
            {window.TESTIMONIALS.map((t) => (
              <div key={t.name} className="bg-white p-4 sm:p-5 md:p-8 frame-border flex flex-col">
                <div className="flex items-center gap-1 text-juniper">
                  {[0, 1, 2, 3, 4].map((i) => (
                    <window.Icon.Star key={i} className="w-3.5 h-3.5" />
                  ))}
                </div>
                <blockquote className="mt-4 md:mt-5 font-serif text-[14px] sm:text-[16px] md:text-[18px] italic text-charcoal/85 leading-[1.45] md:leading-[1.5] flex-1">
                  "{t.quote}"
                </blockquote>
                <div className="mt-5 md:mt-6 flex items-center gap-2 md:gap-3">
                  <img src={t.avatar} alt={t.name} className="w-9 h-9 md:w-12 md:h-12 rounded-full object-cover frame-border" />
                  <div>
                    <div className="font-serif md:font-display text-sm md:text-lg text-steel-blue leading-tight">{t.name}</div>
                    <div className="text-[10px] md:text-xs text-charcoal/55 tracking-wide">{t.relationship}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="mt-12 flex justify-center">
            <window.Button as="a" href={window.GOOGLE_REVIEW_LINK} variant="ghost" size="md">
              See more on Google <window.Icon.ArrowRight className="w-3.5 h-3.5" />
            </window.Button>
          </div>
        </div>
      </section>

      {/* ---------- SOUL CALLOUT ---------- */}
      <window.SoulCallout />

      {/* ---------- SPECIAL PROJECTS TEASER ---------- */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <div className="grid lg:grid-cols-12 gap-12">
            <div className="lg:col-span-5">
              <window.Eyebrow>The give-back</window.Eyebrow>
              <h2 className="mt-5 font-serif text-4xl md:text-5xl leading-tight tracking-tight text-steel-blue">
                Special projects and rescue partnerships.
              </h2>
              <p className="mt-6 font-serif text-lg text-charcoal/75 leading-relaxed">
                Beyond the studio, Kari supports local animal rescue and wildlife conservation — including
                a board seat at <strong className="text-steel-blue">Saving Hope</strong>.
              </p>
              <div className="mt-8">
                <window.Button onClick={() => setRoute("services")} variant="ghost" size="md">
                  Explore special projects <window.Icon.ArrowRight className="w-3.5 h-3.5" />
                </window.Button>
              </div>
            </div>
            <div className="lg:col-span-7 grid grid-cols-2 gap-3 sm:gap-4">
              {window.SPECIAL_PROJECTS.map((p, i) => (
                <button
                  key={p.slug}
                  onClick={() => setRoute("services")}
                  className="text-left group bg-wafer-20 p-4 sm:p-5 md:p-6 frame-border hover:bg-bark-beige-20 transition"
                >
                  <div className="flex items-center justify-between">
                    <div className="text-juniper">
                      {i === 0 && <window.Icon.Shield className="w-6 h-6" />}
                      {i === 1 && <window.Icon.Heart className="w-6 h-6" />}
                      {i === 2 && <window.Icon.Paw className="w-6 h-6" />}
                      {i === 3 && <window.Icon.Sparkles className="w-6 h-6" />}
                    </div>
                    <div className="eyebrow text-charcoal/40">0{i + 1}</div>
                  </div>
                  <div className="mt-4 md:mt-6 font-serif md:font-display text-lg md:text-2xl text-steel-blue leading-tight">{p.title}</div>
                  <div className="hidden sm:block mt-2 font-serif text-sm text-charcoal/70 leading-relaxed">{p.blurb}</div>
                  <div className="mt-4 md:mt-5 text-juniper inline-flex items-center gap-1.5 text-[10px] md:text-xs tracking-wider uppercase opacity-100 md:opacity-0 group-hover:opacity-100 transition">
                    Read story <window.Icon.ArrowRight className="w-3 h-3" />
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ---------- SISTER SITE STRIP ---------- */}
      <window.SisterSiteStrip />
    </main>
  );
}

window.HomePage = HomePage;