const { COPY: COPY_B, IMAGES: IMG_B, CLIENTS: CLI_B } = window.AF_DATA;
const { Link: LinkB } = ReactRouterDOM;

const B_CAPS = [
  { t: "Large volume orders",       d: "Multi-piece programs for offices, clinics, schools." },
  { t: "Unique pieces",              d: "One-of-a-kind decor — like our sushi restaurant project." },
  { t: "Brand-aligned framing",      d: "Frames and mats that match your space's aesthetic." },
  { t: "Installation coordination",  d: "We can help hang what we frame." },
];

const B_PROCESS = [
  { t: "Initial consultation",       d: "In-store or on-site at your space." },
  { t: "Sample review & quote",      d: "Moulding, mat, and glass samples — fixed price up front." },
  { t: "Production timeline",        d: "Confirmed in writing before we cut a single piece." },
  { t: "Coordinated delivery & install", d: "We deliver, we hang, we tidy up." },
];

function AreYouABusiness() {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="B2B Framing"
        title="For Businesses"
        italicWord="For Businesses"
        lead={COPY_B.businesses}
      />

      {/* HERO IMAGE BLOCK */}
      <section className="pt-12 md:pt-16">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="grid md:grid-cols-12 gap-10 items-start">
            <div className="md:col-span-8">
              <div className="relative">
                <div className="absolute -inset-3 md:-inset-4 bg-[#EFE5D0]" aria-hidden></div>
                <img src={IMG_B.sushi} alt="Custom wall decor for a sushi restaurant" className="relative w-full object-cover" style={{ aspectRatio:'16/10' }} />
                <div className="absolute bottom-4 left-4 md:bottom-6 md:left-6 bg-[#1F1A14] text-[#F8F4ED] px-5 py-3 max-w-[260px]">
                  <div className="font-mono text-[10px] uppercase tracking-widest text-[#A0522D]">Sushi restaurant</div>
                  <div className="font-display text-[15px] mt-1" style={{ fontStyle: 'italic' }}>Custom wall decor program</div>
                </div>
              </div>
            </div>
            <div className="md:col-span-4 md:pt-8">
              <Eyebrow>Why work with us</Eyebrow>
              <p className="mt-5 body-ink text-[17px]">
                You get a 31-year framing craft, not a corporate vendor. We answer the phone. We deliver on time. And we do good work.
              </p>
              <div className="mt-7">
                <LinkB to="/book" className="btn-primary">Request a quote →</LinkB>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* B2B CLIENTS */}
      <section className="py-20 md:py-28">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <Eyebrow>Notable B2B clients</Eyebrow>
          <h2 className="font-display ink mt-5 text-[clamp(34px,5.2vw,60px)] leading-[1.04]" style={{ fontWeight: 500 }}>
            We&apos;ve framed for these <em className="text-[#A0522D]" style={{ fontStyle:'italic' }}>neighbors</em>.
          </h2>
          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-px bg-[#E5DCC9] border hairline">
            {CLI_B.map((c, i) => (
              <div key={c.name} className="bg-[#F8F4ED] p-7">
                <div className="font-mono text-[10px] uppercase tracking-widest text-[#807466]">0{i+1}</div>
                <div className="font-display ink mt-3 text-[22px] md:text-[24px] leading-[1.15]" style={{ fontWeight: 500, fontStyle:'italic' }}>{c.name}</div>
                <div className="text-[12px] text-[#A0522D] mt-3 font-mono uppercase tracking-wider">{c.category}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="bg-[#1F1A14] 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">
            <div className="md:col-span-4">
              <div className="eyebrow !text-[#F8F4ED]/55 flex items-center gap-3">
                <span className="w-6 h-px bg-[#A0522D]"></span>Capabilities
              </div>
              <h2 className="font-display mt-5 text-[clamp(32px,4.4vw,52px)] leading-[1.04]" style={{ fontWeight: 500 }}>
                What we can <em style={{ fontStyle:'italic' }} className="text-[#A0522D]">do for you</em>.
              </h2>
            </div>
            <div className="md:col-span-8">
              <ul className="divide-y divide-white/10 border-y border-white/10">
                {B_CAPS.map((c, i) => (
                  <li key={c.t} className="py-7 grid grid-cols-[auto_1fr_auto] items-start gap-5">
                    <span className="font-mono text-[11px] text-[#F8F4ED]/45 pt-2 w-8">0{i+1}</span>
                    <div>
                      <div className="font-display text-[26px] md:text-[30px]" style={{ fontWeight: 500 }}>{c.t}</div>
                      <div className="text-[15px] text-[#F8F4ED]/70 mt-2 max-w-[44ch]">{c.d}</div>
                    </div>
                    <span className="text-[#A0522D] pt-3">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="py-20 md:py-28">
        <div className="max-w-container mx-auto px-5 md:px-8">
          <div className="text-center max-w-2xl mx-auto">
            <Eyebrow className="justify-center">Process</Eyebrow>
            <h2 className="font-display ink mt-5 text-[clamp(34px,5vw,58px)] leading-[1.04]" style={{ fontWeight: 500 }}>
              From <em style={{ fontStyle:'italic' }}>brief</em> to hung on the wall.
            </h2>
          </div>
          <div className="mt-12 grid md:grid-cols-4 gap-6">
            {B_PROCESS.map((p, i) => (
              <div key={p.t} className="relative border hairline bg-white/60 p-6">
                <div className="font-display text-[48px] leading-none text-[#A0522D]" style={{ fontWeight: 500 }}>{i+1}</div>
                <div className="font-display ink mt-4 text-[20px]" style={{ fontWeight: 500 }}>{p.t}</div>
                <div className="text-[14px] body-ink mt-2">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-[#A0522D] text-[#F8F4ED]">
        <div className="max-w-container mx-auto px-5 md:px-8 py-20 md:py-24">
          <div className="grid md:grid-cols-12 gap-10 items-end">
            <div className="md:col-span-8">
              <div className="eyebrow !text-[#F8F4ED]/75 flex items-center gap-3">
                <span className="w-6 h-px bg-[#F8F4ED]/60"></span>For your space
              </div>
              <h2 className="font-display mt-5 text-[clamp(34px,5.4vw,64px)] leading-[1.04]" style={{ fontWeight: 500 }}>
                Request a quote for <em style={{ fontStyle:'italic' }}>your business</em>.
              </h2>
              <p className="mt-5 text-[#F8F4ED]/85 max-w-[52ch]">
                Tell us about your space, your timeline, and what you have in mind. We&apos;ll come look or have you drop by.
              </p>
            </div>
            <div className="md:col-span-4 flex flex-col gap-3">
              <LinkB 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]">B2B Booking</div>
                  <div className="font-display text-[19px] mt-1" style={{ fontWeight: 500 }}>Request a quote</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>
              </LinkB>
              <a href={COPY_B.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</div>
                  <div className="font-display text-[19px] mt-1" style={{ fontWeight: 500 }}>{COPY_B.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>
          </div>
        </div>
      </section>
    </div>
  );
}

window.AreYouABusiness = AreYouABusiness;