const { COPY: COPY_W, IMAGES: IMG_W } = window.AF_DATA;
const { Link: LinkW } = ReactRouterDOM;

const W_LIST = [
  { title: "Shadow boxes", note: "Hole in one, military medals, memorabilia" },
  { title: "Sports jerseys", note: "Cowboys, college teams, signed gear" },
  { title: "Diplomas & certificates", note: "College, professional, family heirloom" },
  { title: "Vinyl records & signed memorabilia", note: "Signatures protected, sleeves visible" },
  { title: "Family photographs", note: "Restoration-quality preservation" },
  { title: "Original artwork", note: "Acid-free mats, conservation glass" },
  { title: "Mirrors", note: "Sized and stained to your room" },
  { title: "Business decor", note: "Lobbies, offices, restaurants, clinics" },
];

function WhatWeDo() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Custom Framing & More"
        title="What We Do"
        italicWord="What"
        lead={COPY_W.whatWeDo}
      />

      {/* HERO QUOTE */}
      <section className="bg-[#1F1A14] text-[#F8F4ED]">
        <div className="max-w-container mx-auto px-5 md:px-8 py-24 md:py-32 text-center">
          <Reveal>
            <div className="eyebrow !text-[#F8F4ED]/55 flex items-center justify-center gap-3">
              <span className="w-6 h-px bg-[#A0522D]"></span>
              The Whole Pitch
              <span className="w-6 h-px bg-[#A0522D]"></span>
            </div>
            <h2 className="font-display mt-8 text-[clamp(46px,8.4vw,108px)] leading-[1.0]" style={{ fontWeight: 500, letterSpacing: '-0.025em' }}>
              We do it all.<br/>
              And <em className="text-[#A0522D]" style={{ fontStyle:'italic'}}>it&apos;s all we do</em>.
            </h2>
            <p className="mt-10 max-w-[58ch] mx-auto text-[17px] text-[#F8F4ED]/75">
              {COPY_W.differentiatorLong}
            </p>
          </Reveal>
        </div>
      </section>

      {/* TWO AUDIENCES — expanded */}
      <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-2 gap-14 md:gap-20">
            <Reveal>
              <div>
                <div className="relative">
                  <div className="absolute -inset-3 bg-[#EFE5D0]" aria-hidden></div>
                  <img src={IMG_W.sushi} alt="Custom wall decor for a sushi restaurant" className="relative w-full" style={{ aspectRatio:'4/3', objectFit:'cover' }} />
                </div>
                <div className="mt-8">
                  <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">For Businesses</div>
                  <h3 className="font-display ink mt-3 text-[clamp(28px,3.8vw,42px)] leading-[1.05]" style={{ fontWeight: 500 }}>
                    Large volume orders.<br/>Unique, fun <em style={{ fontStyle:'italic' }}>pieces</em>.
                  </h3>
                  <p className="mt-5 body-ink text-[17px] max-w-[44ch]">{COPY_W.businesses}</p>
                  <LinkW to="/are-you-a-business" className="btn-ghost mt-7">Get a business quote →</LinkW>
                </div>
              </div>
            </Reveal>
            <Reveal delay={0.1}>
              <div>
                <div className="relative">
                  <div className="absolute -inset-3 bg-[#EFE5D0]" aria-hidden></div>
                  <img src={IMG_W.jersey} alt="Framed jersey of Emmitt Smith, former Dallas Cowboys" className="relative w-full" style={{ aspectRatio:'4/3', objectFit:'cover' }} />
                </div>
                <div className="mt-8">
                  <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">For Individuals</div>
                  <h3 className="font-display ink mt-3 text-[clamp(28px,3.8vw,42px)] leading-[1.05]" style={{ fontWeight: 500 }}>
                    Preservation, staining,<br/><em style={{ fontStyle:'italic' }}>visual aesthetics</em>.
                  </h3>
                  <p className="mt-5 body-ink text-[17px] max-w-[44ch]">{COPY_W.individuals}</p>
                  <LinkW to="/book" className="btn-ghost mt-7">Book consultation →</LinkW>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* WHAT WE FRAME — fuller */}
      <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>What We Frame</Eyebrow>
              <h2 className="font-display ink mt-5 text-[clamp(34px,4.6vw,52px)] leading-[1.04]" style={{ fontWeight: 500 }}>
                Sentimental,<br/>significant,<br/><em style={{ fontStyle:'italic' }}>strange.</em>
              </h2>
              <p className="mt-5 body-ink text-[16px] max-w-[34ch]">
                Thirty-one years in, very little surprises us. Here&apos;s a partial list.
              </p>
            </div>
            <div className="md:col-span-8">
              <ul className="grid sm:grid-cols-2 gap-px bg-[#E5DCC9] border hairline">
                {W_LIST.map((w, i) => (
                  <li key={w.title} className="bg-[#F8F4ED] p-6">
                    <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">{String(i+1).padStart(2,'0')}</div>
                    <div className="font-display ink mt-2 text-[22px]" style={{ fontWeight: 500 }}>{w.title}</div>
                    <div className="text-[14px] text-[#807466] mt-1.5">{w.note}</div>
                  </li>
                ))}
              </ul>
              <p className="mt-7 font-display ink text-[22px] md:text-[26px]" style={{ fontStyle: 'italic', fontWeight: 500 }}>
                And honestly, anything else &mdash; just ask.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section className="py-20 md:py-28">
        <div className="max-w-container mx-auto px-5 md:px-8 text-center">
          <Eyebrow className="justify-center">Next Step</Eyebrow>
          <h2 className="font-display ink mt-5 text-[clamp(34px,5.2vw,60px)] leading-[1.05]" style={{ fontWeight: 500 }}>
            Bring it in. Let&apos;s <em style={{ fontStyle:'italic' }} className="text-[#A0522D]">talk it through</em>.
          </h2>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <LinkW to="/book" className="btn-primary">Book a 30-minute consultation</LinkW>
            <a href={COPY_W.smsHref} className="btn-ghost">Text us: {COPY_W.phone}</a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.WhatWeDo = WhatWeDo;