// About page

function AboutPage({ setRoute }) {
  return (
    <main data-screen-label="02 About">
      {/* Page 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-28 text-center">
          <window.Eyebrow className="justify-center">Meet Kari</window.Eyebrow>
          <h1 className="mt-6 font-display text-6xl md:text-8xl text-steel-blue leading-[0.9]">
            About{" "}
            <window.ScriptAccent angle={-5} color="#779A93" className="text-8xl md:text-[140px]">
              Me.
            </window.ScriptAccent>
          </h1>
          <p className="mt-6 font-serif text-xl text-charcoal/75 max-w-2xl mx-auto leading-relaxed">
            Twenty years of photographing the soul of every furry, feathered, four-legged friend in Fort Worth and beyond.
          </p>
        </div>
      </section>

      {/* Origin story */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28 grid lg:grid-cols-12 gap-14 items-center">
          <div className="lg:col-span-5 relative">
            <img src={window.KARI_PORTRAIT_2} alt="Kari with a cat" className="w-full aspect-[4/5] object-cover frame-border" />
            <div className="absolute -top-6 -left-6 w-32 h-32 bg-bark-beige-40 -z-0" />
            <div className="absolute bottom-6 -right-4 md:-right-10 bg-white p-4 frame-border w-[80%] max-w-[300px]">
              <div className="eyebrow text-juniper">est. 1991</div>
              <div className="font-script text-3xl text-steel-blue mt-1 leading-none">A polaroid &amp; Ginger.</div>
              <div className="font-serif text-xs text-charcoal/60 mt-2">Kari's first portrait — age 7.</div>
            </div>
          </div>
          <div className="lg:col-span-7">
            <window.Eyebrow>The origin</window.Eyebrow>
            <h2 className="mt-5 font-display text-4xl md:text-5xl text-steel-blue leading-tight">
              It started with a Dachshund named{" "}
              <window.ScriptAccent angle={-4} color="#779A93" className="text-6xl md:text-7xl">
                Ginger.
              </window.ScriptAccent>
            </h2>
            <p className="mt-7 font-serif text-[19px] leading-[1.7] text-charcoal/85">
              Kari Breen has established herself as the leading pet photographer in Fort Worth, Texas. Kari found
              her love for pet photography as a young girl. At age <strong className="text-steel-blue">7</strong>,
              she took her first portrait session with a polaroid camera and Ginger, the family Dachshund. As an
              adult, she pursued her dream of working with animals.
            </p>
            <p className="mt-5 font-serif text-[19px] leading-[1.7] text-charcoal/85">
              For the past 20 years, Kari has studied art and photography in{" "}
              <strong className="text-steel-blue">Italy, Greece, Canada,</strong> and across the United States.
              After settling down in Fort Worth, she quickly became the city's leading professional pet photographer.
            </p>

            {/* Travels */}
            <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-3">
              {[
                { c: "Italy", note: "Renaissance painting" },
                { c: "Greece", note: "Classical form" },
                { c: "Canada", note: "Wildlife photography" },
                { c: "United States", note: "Studio practice" },
              ].map((t) => (
                <div key={t.c} className="bg-wafer-40 p-4 frame-border">
                  <div className="font-display text-steel-blue text-lg leading-tight">{t.c}</div>
                  <div className="text-xs text-charcoal/60 mt-1 font-serif">{t.note}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Soul Statement — full bleed juniper */}
      <section className="relative bg-juniper text-white overflow-hidden">
        <div className="absolute inset-0 paw-pattern-light" />
        <div className="relative max-w-[1100px] mx-auto px-6 py-24 md:py-32 text-center">
          <div className="font-display text-[80px] md:text-[140px] leading-[0.86] italic text-white" style={{ fontVariationSettings: '"opsz" 144,"SOFT" 100,"WONK" 1', fontWeight: 600 }}>
            capturing
          </div>
          <div className="font-display text-[80px] md:text-[140px] leading-[0.86] italic text-wafer" style={{ fontVariationSettings: '"opsz" 144,"SOFT" 100,"WONK" 1', fontWeight: 600 }}>
            the soul
          </div>
          <div className="font-display text-[80px] md:text-[140px] leading-[0.86] italic text-white" style={{ fontVariationSettings: '"opsz" 144,"SOFT" 100,"WONK" 1', fontWeight: 600 }}>
            of the animal.
          </div>
          <p className="mt-12 font-serif text-lg md:text-xl text-white/90 max-w-2xl mx-auto leading-relaxed">
            "Kari knows her ability to capture the soul of the animal in a photo is special to many pet owners,
            and her love for animals is immediately clear. Kari is committed to using her business resources to
            support local charitable causes for animals in Fort Worth."
          </p>
        </div>
      </section>

      {/* Core values */}
      <section className="bg-white">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="What we stand on"
            title="Core"
            script="values."
            sub="Kari Breen Inc. was founded on the core values of dependability, reliability, open-mindedness, and passionate creativity."
          />
          <div className="mt-14 grid md:grid-cols-4 gap-5">
            {[
              { name: "Dependability", icon: window.Icon.Shield, blurb: "Show up. Every time." },
              { name: "Reliability", icon: window.Icon.Check, blurb: "Deliver the work, on time." },
              { name: "Open-mindedness", icon: window.Icon.Eye, blurb: "Every pet, every person, every story." },
              { name: "Passionate Creativity", icon: window.Icon.Heart, blurb: "Art over routine. Always." },
            ].map((v) => (
              <div key={v.name} className="relative bg-wafer-20 p-7 frame-border">
                <div className="w-12 h-12 rounded-full bg-juniper text-white grid place-items-center">
                  <v.icon className="w-5 h-5" />
                </div>
                <div className="font-display text-2xl text-steel-blue mt-5 leading-tight">{v.name}</div>
                <div className="mt-2 text-sm font-serif text-charcoal/70 leading-relaxed">{v.blurb}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Three callings */}
      <section className="bg-bark-beige-20">
        <div className="max-w-[1280px] mx-auto px-6 py-24 md:py-28">
          <window.SectionHeader
            eyebrow="Beyond the studio"
            title="One artist,"
            script="three callings."
          />
          <div className="mt-14 grid md:grid-cols-3 gap-6">
            {[
              {
                title: "Pet Portraits",
                blurb: "Photography & paintings — studio or on-location.",
                img: window.PORTFOLIO[8].src,
              },
              {
                title: "Greeting Card Line",
                blurb: "A signature collection: animal greetings & conservation cards.",
                img: window.PORTFOLIO[0].src,
              },
              {
                title: "Saving Hope · Board",
                blurb: "Active board member advocating for animal rescue in Fort Worth.",
                img: window.PORTFOLIO[18].src,
              },
            ].map((c) => (
              <div key={c.title} className="bg-white frame-border overflow-hidden">
                <div className="aspect-[5/4] overflow-hidden">
                  <img src={c.img} alt={c.title} className="w-full h-full object-cover" />
                </div>
                <div className="p-7">
                  <div className="font-display text-2xl text-steel-blue leading-tight">{c.title}</div>
                  <div className="mt-2 font-serif text-sm text-charcoal/70 leading-relaxed">{c.blurb}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Marty & Pat's */}
      <section className="bg-bark-beige relative overflow-hidden">
        <div className="absolute inset-0 paw-pattern opacity-30" />
        <div className="relative max-w-[1280px] mx-auto px-6 py-20 grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-7">
            <window.Eyebrow color="#4C6883">Sister studio</window.Eyebrow>
            <h2 className="mt-5 font-display text-4xl md:text-5xl text-steel-blue leading-tight">
              Marty &amp; Pat's{" "}
              <window.ScriptAccent angle={-4} color="#fff" className="text-6xl">
                Frame Shoppe
              </window.ScriptAccent>
              <br />
              <span className="font-serif italic text-3xl md:text-4xl text-steel-blue/80">&amp; Art Gallery</span>
            </h2>
            <p className="mt-7 font-serif text-lg text-charcoal/85 leading-relaxed max-w-2xl">
              For faster replies Kari also owns Marty &amp; Pat's Frame Shoppe &amp; Art Gallery — for custom framing
              of your pet portraits and fine art. Reach the framing shop directly at{" "}
              <a href={window.PHONE_MARTY_TEL} className="font-medium text-steel-blue underline-offset-4 hover:underline">
                {window.PHONE_MARTY}
              </a>
              .
            </p>
            <div className="mt-7">
              <window.Button as="a" href="#" variant="primary" size="md">
                Visit Marty &amp; Pat's <window.Icon.ArrowRight className="w-3.5 h-3.5" />
              </window.Button>
            </div>
          </div>
          <div className="lg:col-span-5 grid grid-cols-2 gap-3">
            <div className="aspect-square bg-wafer-40 frame-border grid place-items-center">
              <div className="text-center px-3">
                <window.Icon.Sparkles className="w-7 h-7 text-juniper mx-auto" />
                <div className="font-display text-steel-blue mt-3 text-lg leading-tight">Custom Framing</div>
              </div>
            </div>
            <div className="aspect-square overflow-hidden frame-border">
              <img src={window.PORTFOLIO[17].src} alt="Frame" className="w-full h-full object-cover" />
            </div>
            <div className="aspect-square overflow-hidden frame-border">
              <img src={window.PORTFOLIO[12].src} alt="Frame" className="w-full h-full object-cover" />
            </div>
            <div className="aspect-square bg-steel-blue frame-border grid place-items-center text-center px-4">
              <div>
                <div className="font-script text-white text-3xl leading-none">Two studios.</div>
                <div className="font-script text-wafer text-3xl leading-none mt-1">One owner.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-white">
        <div className="max-w-[900px] mx-auto px-6 py-24 text-center">
          <h3 className="font-display text-4xl md:text-5xl text-steel-blue leading-tight">
            Let's plan your pet's{" "}
            <window.ScriptAccent angle={-4} color="#779A93" className="text-6xl">
              portrait.
            </window.ScriptAccent>
          </h3>
          <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
            <window.Button onClick={() => setRoute("contact")} size="lg">
              Book a Session <window.Icon.ArrowRight className="w-3.5 h-3.5" />
            </window.Button>
            <window.Button onClick={() => setRoute("portfolio")} variant="ghost" size="lg">
              View Portfolio
            </window.Button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.AboutPage = AboutPage;