const { COPY: COPY_A } = window.AF_DATA;
const { Link: LinkA } = ReactRouterDOM;

function AboutUs() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Since 1994 · McKinney"
        title="About Us"
        italicWord="About"
        lead={null}
      />

      {/* HERITAGE NARRATIVE */}
      <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-12 md:gap-16">
            <aside className="md:col-span-4">
              <div className="md:sticky md:top-24">
                <Eyebrow>Our story</Eyebrow>
                <h2 className="font-display ink mt-5 text-[clamp(30px,3.8vw,44px)] leading-[1.06]" style={{ fontWeight: 500 }}>
                  Thirty-one years<br/>of <em style={{ fontStyle:'italic' }}>one craft</em>.
                </h2>
                <div className="mt-7 pt-6 border-t hairline">
                  <ImagePlaceholder label="Owner portrait" note="Get from client — owner at the shop" aspect="4/5" />
                </div>
              </div>
            </aside>
            <div className="md:col-span-8">
              <div className="prose-body body-ink text-[18px] max-w-[58ch]">
                {COPY_A.about.map((p, i) => (
                  <p key={i} className={i === COPY_A.about.length - 1 ? 'font-display ink text-[28px] md:text-[34px] mt-10 italic' : ''} style={i === COPY_A.about.length - 1 ? { fontWeight: 500, fontStyle: 'italic' } : null}>
                    {p}
                  </p>
                ))}
              </div>
              <div className="mt-12">
                <LinkA to="/location" className="btn-primary">Come by and say hello →</LinkA>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2016 MOVE CALLOUT */}
      <section className="bg-[#EFE5D0]/40 border-y hairline">
        <div className="max-w-container mx-auto px-5 md:px-8 py-16 md:py-20">
          <div className="grid md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-3">
              <div className="font-display ink text-[68px] md:text-[88px] leading-none" style={{ fontWeight: 500, letterSpacing:'-0.02em' }}>2016</div>
              <div className="font-mono text-[11px] uppercase tracking-widest text-[#A0522D] mt-2">Moved central</div>
            </div>
            <div className="md:col-span-9">
              <p className="font-display ink text-[22px] md:text-[26px] leading-[1.4]" style={{ fontWeight: 500 }}>
                In January 2016, we moved to a more central location in McKinney <em style={{ fontStyle:'italic' }} className="text-[#A0522D]">to better serve the community</em>.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* NOTABLE CLIENTS */}
      <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">
            <div className="md:col-span-4">
              <Eyebrow>Notable Clients</Eyebrow>
              <p className="mt-6 body-ink text-[17px] max-w-[34ch]">
                We&apos;ve been fortunate to work with these McKinney and Dallas-area neighbors.
              </p>
            </div>
            <div className="md:col-span-8">
              <ClientListBlock title="Trusted by" showCategories />
            </div>
          </div>
        </div>
      </section>

      {/* STATS STRIP */}
      <section className="bg-[#1F1A14] text-[#F8F4ED]">
        <div className="max-w-container mx-auto px-5 md:px-8 py-16 md:py-20">
          <div className="grid grid-cols-3 gap-6 md:gap-12">
            {[
              { num: '1994', label: 'Year established' },
              { num: '31+', label: 'Years serving McKinney' },
              { num: '20+', label: 'Years of framing craft' },
            ].map((s) => (
              <div key={s.label} className="text-center md:text-left">
                <div className="font-display text-[clamp(44px,6.5vw,86px)] leading-none" style={{ fontWeight: 500, letterSpacing:'-0.02em' }}>
                  {s.num}
                </div>
                <div className="font-mono text-[10px] md:text-[11px] uppercase tracking-widest text-[#F8F4ED]/55 mt-3">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 md:py-28 text-center">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <h2 className="font-display ink text-[clamp(34px,5.4vw,64px)] leading-[1.05]" style={{ fontWeight: 500 }}>
            Come by and <em className="text-[#A0522D]" style={{ fontStyle:'italic' }}>say hello</em>.
          </h2>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <LinkA to="/location" className="btn-primary">Find the shop →</LinkA>
            <LinkA to="/book" className="btn-ghost">Book a consultation</LinkA>
          </div>
        </div>
      </section>
    </div>
  );
}

window.AboutUs = AboutUs;