const { COPY: COPY_H, IMAGES: IMG_H, WHAT_WE_FRAME: WWF_H } = window.AF_DATA;
const { Link: LinkH } = ReactRouterDOM;

function Home() {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="relative">
        <div className="max-w-container mx-auto px-5 md:px-8 pt-12 md:pt-20 pb-16 md:pb-24">
          <div className="grid md:grid-cols-12 gap-10 md:gap-14 items-start">
            <div className="md:col-span-6 md:pt-6">
              <Eyebrow>McKinney · Since 1994 · 31 Years</Eyebrow>
              <h1 className="font-display ink mt-6 text-[clamp(46px,7.4vw,92px)] leading-[1.0]" style={{ fontWeight: 500, letterSpacing: '-0.025em' }}>
                <em className="text-[#A0522D]" style={{ fontStyle: 'italic' }}>Custom framing</em>
                <br/>for the memories<br/>that matter.
              </h1>
              <p className="mt-7 body-ink max-w-[52ch] text-[17px] md:text-[18px]">
                Shadow-boxing a hole in one. Framing a signed vinyl record. Preserving a college diploma. We&apos;ve been doing it since 1994 &mdash; and it&apos;s all we do.
              </p>
              <div className="mt-9 flex flex-wrap items-center gap-3">
                <LinkH to="/book" className="btn-primary">
                  Book a Consultation
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </LinkH>
                <LinkH to="/what-we-do" className="btn-ghost">What We Do</LinkH>
              </div>
              <div className="mt-10 pt-6 border-t hairline grid grid-cols-3 gap-6 max-w-md">
                <div>
                  <div className="font-display ink text-[28px]" style={{ fontWeight: 500 }}>1994</div>
                  <div className="text-[11px] uppercase tracking-wider text-[#807466] mt-1">Founded</div>
                </div>
                <div>
                  <div className="font-display ink text-[28px]" style={{ fontWeight: 500 }}>31<span className="text-[18px] text-[#A0522D]">+</span></div>
                  <div className="text-[11px] uppercase tracking-wider text-[#807466] mt-1">Years in McKinney</div>
                </div>
                <div>
                  <div className="font-display ink text-[28px]" style={{ fontWeight: 500 }}>1<span className="text-[18px] text-[#A0522D]">&nbsp;</span></div>
                  <div className="text-[11px] uppercase tracking-wider text-[#807466] mt-1">Craft, mastered</div>
                </div>
              </div>
            </div>
            <div className="md:col-span-6">
              <div className="relative">
                {/* mat board */}
                <div className="absolute -inset-3 md:-inset-5 bg-[#EFE5D0]" aria-hidden></div>
                <div className="relative">
                  <img src={IMG_H.hero} alt="Inside Art & Frame + Signs, McKinney" className="w-full h-auto object-cover" style={{ aspectRatio: '4/5' }} />
                </div>
                <div className="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 bg-[#1F1A14] text-[#F8F4ED] px-5 py-4 max-w-[220px]">
                  <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">Inside the shop</div>
                  <div className="font-display text-[16px] mt-1 leading-snug" style={{ fontStyle: 'italic' }}>McKinney, Texas</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DIFFERENTIATOR STRIP */}
      <section className="bg-[#1F1A14] text-[#F8F4ED]">
        <div className="max-w-container mx-auto px-5 md:px-8 py-20 md:py-28">
          <Reveal>
            <div className="eyebrow !text-[#F8F4ED]/60 flex items-center gap-3">
              <span className="w-6 h-px bg-[#A0522D]"></span>
              We do it all · And it&apos;s all we do
            </div>
            <h2 className="font-display mt-6 text-[clamp(34px,5.4vw,68px)] leading-[1.04] max-w-[18ch]" style={{ fontWeight: 500, letterSpacing: '-0.02em' }}>
              &ldquo;We do it all. And <em className="text-[#A0522D]" style={{ fontStyle:'italic'}}>it&apos;s all we do</em>.&rdquo;
            </h2>
            <p className="mt-6 max-w-[60ch] text-[17px] text-[#F8F4ED]/75">
              Unlike big-box competitors who have started offering custom framing, our 20+ years of experience learning this craft ensure every frame is made by people who actually know it.
            </p>
          </Reveal>
        </div>
      </section>

      {/* TWO AUDIENCES */}
      <section className="py-20 md:py-28">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="flex items-end justify-between gap-6 mb-12">
            <div>
              <Eyebrow>Who we frame for</Eyebrow>
              <h2 className="font-display ink mt-4 text-[clamp(34px,4.6vw,52px)] leading-[1.05]" style={{ fontWeight: 500 }}>
                Two kinds of customers,<br/><em className="text-[#A0522D]" style={{ fontStyle:'italic'}}>same standard of care</em>.
              </h2>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-8 md:gap-10">
            <Reveal>
              <article className="card-lift border hairline bg-white/60 p-6 md:p-8 h-full flex flex-col">
                <FramedImage src={IMG_H.jersey} alt="Framed jersey of former Dallas Cowboys, Emmitt Smith" aspect="5/4" />
                <div className="mt-5 font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">For Individuals</div>
                <h3 className="font-display ink mt-2 text-[28px] md:text-[32px]" style={{ fontWeight: 500 }}>
                  <em style={{ fontStyle: 'italic' }}>Preservation</em>, staining, visual aesthetics.
                </h3>
                <p className="mt-3 body-ink text-[16px]">{COPY_H.individuals}</p>
                <div className="mt-auto pt-6">
                  <LinkH to="/what-we-do" className="inline-flex items-center gap-2 text-[14px] text-[#A0522D] underline-link">
                    Framing my piece
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </LinkH>
                </div>
              </article>
            </Reveal>
            <Reveal delay={0.1}>
              <article className="card-lift border hairline bg-white/60 p-6 md:p-8 h-full flex flex-col">
                <FramedImage src={IMG_H.sushi} alt="Custom wall decor for a sushi restaurant" aspect="5/4" />
                <div className="mt-5 font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">For Businesses</div>
                <h3 className="font-display ink mt-2 text-[28px] md:text-[32px]" style={{ fontWeight: 500 }}>
                  Large volume, <em style={{ fontStyle: 'italic' }}>unique pieces</em>.
                </h3>
                <p className="mt-3 body-ink text-[16px]">{COPY_H.businesses}</p>
                <div className="mt-auto pt-6">
                  <LinkH to="/are-you-a-business" className="inline-flex items-center gap-2 text-[14px] text-[#A0522D] underline-link">
                    Business framing
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </LinkH>
                </div>
              </article>
            </Reveal>
          </div>
        </div>
      </section>

      {/* NOTABLE CLIENTS */}
      <section className="bg-[#EFE5D0]/40 border-y hairline">
        <div className="max-w-container mx-auto px-5 md:px-8 py-20 md:py-28">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-4">
              <Eyebrow>Trusted by</Eyebrow>
              <p className="mt-6 body-ink text-[17px] max-w-[36ch]">
                Over thirty-one years, we&apos;ve had the privilege of framing for some remarkable McKinney neighbors.
              </p>
              <div className="mt-6 font-mono text-[11px] text-[#807466] uppercase tracking-wider">
                Healthcare · Hospitality<br/>Education · Government
              </div>
            </div>
            <div className="md:col-span-8">
              <ClientListBlock title="Notable Clients" showCategories />
            </div>
          </div>
        </div>
      </section>

      {/* WHAT WE FRAME */}
      <section className="py-20 md:py-28">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10 md:gap-12">
            <div className="md:col-span-4">
              <Eyebrow>What we frame</Eyebrow>
              <h2 className="font-display ink mt-5 text-[clamp(34px,4.6vw,52px)] leading-[1.05]" style={{ fontWeight: 500 }}>
                <em style={{ fontStyle: 'italic' }}>Almost anything</em><br/>you can hang.
              </h2>
              <p className="mt-5 body-ink text-[16px] max-w-[34ch]">From the small and sentimental to the large and brand-shaping.</p>
            </div>
            <div className="md:col-span-8">
              <ul className="grid grid-cols-1 sm:grid-cols-2 divide-y hairline border-t border-b hairline">
                {WWF_H.map((w, i) => (
                  <li key={w} className={`flex items-baseline gap-4 py-4 ${i % 2 === 0 ? 'sm:border-r hairline sm:pr-6' : 'sm:pl-6'}`}>
                    <span className="font-mono text-[11px] text-[#807466] w-8">{String(i+1).padStart(2,'0')}</span>
                    <span className="font-display ink text-[22px] md:text-[24px]" style={{ fontWeight: 500 }}>{w}</span>
                  </li>
                ))}
              </ul>
              <p className="mt-6 font-display ink text-[20px] md:text-[22px]" style={{ fontStyle: 'italic', fontWeight: 500 }}>
                &mdash; and honestly, anything else. Just ask.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* BOOK CTA STRIP */}
      <section className="relative overflow-hidden">
        <div className="bg-[#A0522D] text-[#F8F4ED]">
          <div className="max-w-container mx-auto px-5 md:px-8 py-20 md:py-28">
            <div className="grid md:grid-cols-12 gap-10 items-end">
              <div className="md:col-span-7">
                <div className="eyebrow !text-[#F8F4ED]/75 flex items-center gap-3">
                  <span className="w-6 h-px bg-[#F8F4ED]/60"></span>
                  30-minute consultation
                </div>
                <h2 className="font-display mt-5 text-[clamp(36px,5.6vw,72px)] leading-[1.04]" style={{ fontWeight: 500, letterSpacing: '-0.02em' }}>
                  Book your <em style={{ fontStyle:'italic'}}>free</em><br/>in-store consultation.
                </h2>
                <p className="mt-5 text-[17px] text-[#F8F4ED]/85 max-w-[52ch]">
                  Bring your piece (or a photo). We&apos;ll talk through mats, moulding, and how best to preserve it.
                </p>
              </div>
              <div className="md:col-span-5 flex flex-col gap-3">
                <LinkH to="/book" className="bg-[#F8F4ED] text-[#1F1A14] hover:bg-white inline-flex items-center justify-between px-6 py-5 transition-colors">
                  <div>
                    <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">Book Online</div>
                    <div className="font-display text-[20px] mt-1" style={{ fontWeight: 500 }}>Open the calendar</div>
                  </div>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </LinkH>
                <a href={COPY_H.smsHref} className="border border-[#F8F4ED]/40 hover:border-[#F8F4ED] inline-flex items-center justify-between px-6 py-5 transition-colors">
                  <div>
                    <div className="font-mono text-[10px] uppercase tracking-widest text-[#F8F4ED]/70">Or text us</div>
                    <div className="font-display text-[20px] mt-1" style={{ fontWeight: 500 }}>{COPY_H.phone}</div>
                  </div>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                </a>
                <div className="text-[13px] text-[#F8F4ED]/70 mt-1">Or drop in any time Monday – Saturday.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LOCATION STRIP */}
      <section className="py-20 md:py-24">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-5">
              <Eyebrow>Visit Us</Eyebrow>
              <h2 className="font-display ink mt-5 text-[clamp(32px,4.4vw,48px)] leading-[1.06]" style={{ fontWeight: 500 }}>
                In a small shop in downtown <em style={{ fontStyle:'italic'}}>McKinney</em>.
              </h2>
              <p className="mt-5 body-ink text-[16px] max-w-[40ch]">
                We moved to a more central location in January 2016 to better serve the community. Come by and say hello.
              </p>
              <div className="mt-7">
                <ClosureNotice />
              </div>
              <div className="mt-7">
                <LinkH to="/location" className="btn-ghost">Visit Us &mdash; Directions</LinkH>
              </div>
            </div>
            <div className="md:col-span-7">
              <div className="border hairline overflow-hidden bg-white">
                <iframe
                  title="Map of McKinney, TX"
                  src="https://www.openstreetmap.org/export/embed.html?bbox=-96.6450%2C33.1755%2C-96.5950%2C33.2155&amp;layer=mapnik&amp;marker=33.1955%2C-96.6200"
                  className="w-full"
                  style={{ height: 360, border: 0, filter: 'sepia(0.18) saturate(0.85)' }}
                  loading="lazy"
                ></iframe>
                <div className="px-6 py-5 border-t hairline flex items-center justify-between">
                  <div>
                    <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">Shop</div>
                    <div className="font-display ink text-[18px] mt-1" style={{ fontWeight: 500 }}>McKinney, TX <span className="text-[#807466] text-[14px]">{/* TODO: Confirm street address */}— address tba</span></div>
                  </div>
                  <a href="https://maps.google.com/?q=Art+%26+Frame+%2B+Signs+McKinney+TX" target="_blank" rel="noopener" className="text-[13px] text-[#A0522D] underline-link">Get Directions →</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Home = Home;