// ════════════════════════════════════════════════════════════════════
// OUR CRAFT
// ════════════════════════════════════════════════════════════════════
const CategorySection = ({ cat, index }) => {
  const reversed = index % 2 === 1;
  const { open, node } = useLightbox(cat.images);
  const hasImages = cat.images.length > 0;
  return (
    <section id={cat.slug} className="scroll-mt-28">
      <div className="border-t border-hairline" />
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-32">
        <div className={`grid lg:grid-cols-12 gap-10 md:gap-16 ${reversed ? "lg:[direction:rtl]" : ""}`}>
          <Reveal className={`lg:col-span-5 ${reversed ? "lg:[direction:ltr]" : ""}`}>
            <div className="sticky top-32">
              <div className="flex items-center gap-4 mb-6">
                <span className="font-mono text-sm text-sand">0{index + 1} / 0{FRAMING_CATEGORIES.length}</span>
                <span className="w-8 h-px bg-hairline" />
                <Eyebrow className="text-muted">{cat.eyebrow}</Eyebrow>
              </div>
              <h2 className="font-display italic text-ink text-5xl md:text-7xl leading-[0.95]" style={{ fontWeight: 500, textWrap: "balance" }}>
                {cat.title}
              </h2>
              <p className="mt-8 text-body text-[17px] leading-[1.75]">{cat.description}</p>
              <div className="mt-8">
                <div className="eyebrow text-muted mb-3">We frame</div>
                <div className="flex flex-wrap gap-2">
                  {cat.subcategories.map((s) => (
                    <span key={s} className="border border-hairline px-3 py-1.5 text-[12px] tracking-[0.06em] uppercase text-navy bg-bg">
                      {s}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
          <div className={`lg:col-span-7 ${reversed ? "lg:[direction:ltr]" : ""}`}>
            {hasImages ? (
              <Reveal delay={100}>
                <PortfolioGrid images={cat.images} onOpen={open} columns={cat.images.length >= 4 ? 2 : 2} gap="gap-3 md:gap-4" />
              </Reveal>
            ) : (
              <Reveal delay={100}>
                <div className="border border-dashed border-muted/40 bg-sand-l/30 aspect-[4/3] grid place-items-center p-10 text-center">
                  <div>
                    <div className="font-mono text-sm text-muted mb-3">{/* TODO */}</div>
                    <div className="font-display italic text-2xl md:text-3xl text-navy leading-tight">
                      {cat.title} samples<br/>coming soon
                    </div>
                    <p className="mt-5 text-muted text-sm max-w-sm mx-auto">
                      Bring us your piece — or follow{" "}
                      <a href={BIZ.instagram} target="_blank" rel="noreferrer" className="underline">@chriscraftframing</a>{" "}
                      to see what's currently on the bench.
                    </p>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
      {node}
    </section>
  );
};

const InstagramCTA = () => (
  <section className="bg-sand-l/40 border-y border-hairline">
    <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-28">
      <div className="flex flex-col md:flex-row items-center justify-between gap-10 text-center md:text-left">
        <Reveal>
          <Eyebrow>See what's on the bench</Eyebrow>
          <h2 className="font-display text-ink mt-3 text-4xl md:text-5xl" style={{ fontWeight: 400 }}>
            <span className="italic" style={{ fontWeight: 500 }}>Want</span> to see more?
          </h2>
          <p className="mt-5 text-body max-w-md">
            Follow us on Instagram to see some of our latest, coolest projects fresh off the framing bench.
          </p>
        </Reveal>
        <Reveal delay={150}>
          <a href={BIZ.instagram} target="_blank" rel="noreferrer" className="inline-flex items-center gap-4 group">
            <span className="h-16 w-16 grid place-items-center border border-navy text-navy group-hover:bg-navy group-hover:text-bg transition-colors">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
            </span>
            <span>
              <div className="font-display italic text-navy text-2xl">@chriscraftframing</div>
              <div className="eyebrow text-muted mt-1">Follow on Instagram</div>
            </span>
          </a>
        </Reveal>
      </div>
    </div>
  </section>
);

const OurCraft = () => (
  <main data-screen-label="02 Our Craft">
    <PageHeader
      eyebrow="What we frame"
      italicLead="Our"
      rest="Craft"
      sub="At Chris' Craft, we take pride in offering a robust collection of framing options, from classic to modern designs, all backed by premium archival materials that protect and preserve your pieces for years to come. Our in-house team specializes in custom canvas stretching, and we use museum-quality supplies to ensure your art, photography, memorabilia, and more are beautifully transformed into stunning displays."
    />
    <div className="max-w-wide mx-auto px-5 lg:px-10 pb-12 md:pb-20">
      <Reveal>
        <p className="text-body text-[17px] leading-[1.75] max-w-[65ch] border-l-2 border-sand pl-6 italic font-display text-xl md:text-2xl text-ink">
          Whether your style is traditional or contemporary, we're 100% committed to working around your vision, vibe, and budget. Bring in your piece and meet our fun, proficient design and framing team today!
        </p>
      </Reveal>
    </div>

    {/* Category jump nav */}
    <div className="border-y border-hairline bg-surface sticky top-[110px] z-30 hidden lg:block">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-3 flex items-center gap-1 overflow-x-auto">
        <span className="eyebrow text-muted mr-4 shrink-0">Jump to:</span>
        {FRAMING_CATEGORIES.map((c, i) => (
          <button
            key={c.slug}
            onClick={() => {
              const el = document.getElementById(c.slug);
              if (!el) return;
              const y = window.scrollY + el.getBoundingClientRect().top - 170;
              window.scrollTo({ top: y, behavior: "smooth" });
            }}
            className="px-3 py-1.5 text-[12px] tracking-[0.06em] uppercase text-body hover:text-navy hover:bg-bg whitespace-nowrap"
          >
            0{i+1} {c.title}
          </button>
        ))}
      </div>
    </div>

    {FRAMING_CATEGORIES.map((cat, i) => (
      <CategorySection key={cat.slug} cat={cat} index={i} />
    ))}

    <InstagramCTA />

    {/* Private Consultation form */}
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <div className="grid md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-5">
            <Eyebrow>Personalized Attention</Eyebrow>
            <h2 className="font-display text-ink mt-4 text-4xl md:text-6xl leading-[1]" style={{ fontWeight: 400 }}>
              <span className="italic" style={{ fontWeight: 500 }}>Book</span> a private<br/>consultation.
            </h2>
            <p className="mt-6 text-body text-[16px] leading-[1.7] max-w-md">
              Would you like to discuss your custom framing project in a closed environment? Fill out the form and we'll reach out to coordinate a time so you can receive personalized attention from our expert team.
            </p>
          </div>
          <div className="md:col-span-7">
            <ConsultationForm />
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ════════════════════════════════════════════════════════════════════
// BEHIND THE FRAME
// ════════════════════════════════════════════════════════════════════
const STATS = [
  { big: "45+", label: "Years of Chris' Craft heritage" },
  { big: "Engineering", label: "Background — precision in every cut" },
  { big: "Woman", label: "Owned & operated small business" },
  { big: "Park Cities", label: "Neighborhood — and home" },
];

const REASONS = [
  {
    title: "Engineering precision",
    body: "My engineering background means details get the attention they deserve. Every cut, every measurement, every join.",
  },
  {
    title: "Personally led",
    body: "I'm here. When you come in, you're working with the owner — not a contracted designer.",
  },
  {
    title: "A neighborhood framer",
    body: "I live in this community. Your project leaves my shop and goes to a home I might drive by next week. That matters.",
  },
  {
    title: "45 years of heritage",
    body: "Chris' Craft has been part of this community since 1979. I'm honored to carry that forward.",
  },
  {
    title: "Closed-door consultations",
    body: "Want to talk through your project privately? Book a closed consultation. You'll get my undivided attention.",
  },
  {
    title: "Museum-quality materials",
    body: "Archival mats. Conservation glass. Custom canvas stretching. All in-house, all the time.",
  },
];

const BehindTheFrame = () => (
  <main data-screen-label="03 Behind the Frame">
    <PageHeader eyebrow="Meet Maureen" italicLead="Behind" rest="the Frame" />

    <section>
      <div className="max-w-wide mx-auto px-5 lg:px-10 pb-16 md:pb-24">
        <div className="grid lg:grid-cols-12 gap-10 md:gap-16 items-start">
          <Reveal className="lg:col-span-5">
            <div className="lg:sticky lg:top-32">
              <div className="relative">
                <div className="absolute -inset-3 md:-inset-5 border border-navy/30 pointer-events-none" />
                <div className="absolute -inset-1 md:-inset-1.5 border border-sand pointer-events-none" />
                <div className="relative aspect-[4/5] bg-hairline overflow-hidden">
                  <img src={MAUREEN_PORTRAIT} alt="Maureen Daniel" className="w-full h-full object-cover" />
                </div>
              </div>
              <div className="mt-8 px-2">
                <div className="font-display italic text-ink text-3xl">Maureen Daniel</div>
                <div className="eyebrow text-muted mt-1">Owner · Chris' Craft Custom Framing</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={150} className="lg:col-span-7">
            <h2 className="font-display text-ink text-5xl md:text-7xl leading-[0.95]" style={{ fontWeight: 400 }}>
              <span className="italic" style={{ fontWeight: 500 }}>Hi,</span><br/>I'm Maureen.
            </h2>
            <div className="mt-10 prose-body space-y-6 max-w-[58ch]">
              {MAUREEN_STORY.map((p, i) => (
                <p key={i}>
                  {i === 0 && <span className="font-display italic text-ink text-2xl md:text-3xl leading-[1.3] block mb-5">"Welcome to Chris' Craft Custom Framing."</span>}
                  {p}
                </p>
              ))}
            </div>
            <div className="mt-10 flex items-center gap-4 text-sm">
              <span className="h-px w-12 bg-sand" />
              <span className="eyebrow text-muted">Signed,</span>
              <span className="font-display italic text-2xl text-navy">Maureen</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Stats strip */}
    <section className="bg-navy text-bg border-y border-navy">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-16 md:py-24">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4">
          {STATS.map((s, i) => (
            <Reveal key={s.label} delay={i * 80}>
              <div className="font-display italic text-bg text-4xl md:text-6xl leading-[0.95]" style={{ fontWeight: 500 }}>{s.big}</div>
              <div className="mt-4 text-bg/65 text-[13px] tracking-wider leading-relaxed max-w-[16ch]">{s.label}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Pull quotes */}
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-28">
        <Reveal>
          <PullQuote attribution="Maureen Daniel, Owner">
            I bring an eye for detail and precision to everything I do, ensuring each custom frame is crafted to reflect your vision perfectly.
          </PullQuote>
        </Reveal>
      </div>
    </section>

    {/* Why Chris' Craft */}
    <section className="bg-surface border-y border-hairline">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <SectionHead eyebrow="Why Chris' Craft" italic="In her" rest="own words." />
        <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-hairline border border-hairline">
          {REASONS.map((r, i) => (
            <Reveal key={r.title} delay={i * 60}>
              <div className="bg-surface p-8 md:p-10 h-full">
                <div className="font-mono text-sand text-sm">0{i + 1}</div>
                <h3 className="font-display italic text-ink text-2xl md:text-3xl mt-4 leading-tight" style={{ fontWeight: 500 }}>{r.title}</h3>
                <p className="mt-5 text-body text-[15px] leading-[1.7]">{r.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Second pull quote */}
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-28">
        <Reveal>
          <PullQuote attribution="Maureen Daniel">
            I would love the opportunity to work with you on your next project and create something truly special together.
          </PullQuote>
        </Reveal>
      </div>
    </section>

    {/* Visit CTA */}
    <section className="bg-sand-l/40 border-y border-hairline">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-28 text-center">
        <Reveal>
          <Eyebrow>Stop by</Eyebrow>
          <h2 className="font-display text-ink mt-4 text-4xl md:text-7xl leading-[1]" style={{ fontWeight: 400 }}>
            <span className="italic" style={{ fontWeight: 500 }}>Come</span> meet me.
          </h2>
          <p className="mt-7 text-body max-w-xl mx-auto">
            5211 West Lovers Lane, in the heart of the Park Cities. Walk in any time we're open — or book a private consultation and we'll set the whole shop aside for you.
          </p>
          <div className="mt-9 flex justify-center flex-wrap gap-3">
            <Button to="/get-in-touch">Get in Touch</Button>
            <Button href={BIZ.mapsUrl} variant="ghost">Get Directions</Button>
          </div>
        </Reveal>
      </div>
    </section>
  </main>
);

// ════════════════════════════════════════════════════════════════════
// REVIEWS
// ════════════════════════════════════════════════════════════════════
const Reviews = () => (
  <main data-screen-label="04 Reviews">
    <PageHeader
      eyebrow="Google Reviews"
      italicLead="What people"
      rest="are saying."
      sub="Don't take our word for it — here's what our customers across Dallas and the Park Cities have shared."
    />

    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 pb-20">
        <div className="grid lg:grid-cols-3 gap-6">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={t.name} delay={i * 100}>
              <TestimonialCard t={t} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* Featured huge quote */}
    <section className="bg-navy text-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <Reveal>
          <Eyebrow className="text-sand text-center block">Liz Roen, Google Review</Eyebrow>
          <blockquote className="font-display italic text-bg text-4xl md:text-7xl leading-[1.08] mt-10 max-w-5xl mx-auto text-center" style={{ fontWeight: 500, textWrap: "balance" }}>
            "1,000,000 stars, not just 5."
          </blockquote>
          <p className="text-bg/70 text-center mt-10 max-w-2xl mx-auto text-[16px] leading-[1.7]">
            On the anniversary keepsake we built her — a collection of wedding photos turned into one big piece.
          </p>
        </Reveal>
      </div>
    </section>

    {/* What we framed for them */}
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <div className="grid md:grid-cols-12 gap-10 md:gap-16">
          <Reveal className="md:col-span-5">
            <Eyebrow>From the reviews</Eyebrow>
            <h2 className="font-display text-ink mt-4 text-4xl md:text-6xl leading-[1]" style={{ fontWeight: 400, textWrap: "balance" }}>
              <span className="italic" style={{ fontWeight: 500 }}>What</span> we've framed<br/>for them.
            </h2>
            <p className="mt-6 text-body max-w-md">
              In Elizabeth's words: "jerseys, newspapers, band posters, and fine art prints." A small sampling of what walks through our door.
            </p>
          </Reveal>
          <Reveal delay={120} className="md:col-span-7">
            <ul className="grid grid-cols-2 gap-x-4 gap-y-2">
              {THINGS_FRAMED.map((t, i) => (
                <li key={t} className="flex items-baseline gap-3 py-2 border-b border-hairline">
                  <span className="font-mono text-sand text-xs">{String(i+1).padStart(2,"0")}</span>
                  <span className="font-display italic text-ink text-lg md:text-xl">{t}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>

    {/* CTAs */}
    <section className="bg-surface border-y border-hairline">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-20 md:py-28">
        <div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
          <Reveal>
            <Eyebrow>Read more</Eyebrow>
            <h2 className="font-display text-ink mt-4 text-3xl md:text-5xl leading-[1.05]" style={{ fontWeight: 400 }}>
              <span className="italic" style={{ fontWeight: 500 }}>See</span> what others have said on Google.
            </h2>
            <div className="mt-7">
              <Button href="https://www.google.com/search?q=Chris%27+Craft+Custom+Framing+Dallas+reviews" variant="ghost">Read on Google →</Button>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="bg-bg border border-hairline p-8 md:p-10">
              <Eyebrow>Your turn</Eyebrow>
              <h3 className="font-display italic text-ink text-3xl md:text-4xl mt-3" style={{ fontWeight: 500 }}>Share your project with us.</h3>
              <p className="mt-5 text-body">
                Walk us through what you'd like to frame. We'll get back to you with thoughts, options, and a written estimate.
              </p>
              <div className="mt-6">
                <Button to="/get-in-touch">Get in touch →</Button>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  </main>
);

// ════════════════════════════════════════════════════════════════════
// GET IN TOUCH
// ════════════════════════════════════════════════════════════════════
const GetInTouch = () => (
  <main data-screen-label="05 Visit">
    <PageHeader
      eyebrow={`Park Cities · ${BIZ.address1}`}
      italicLead="Visit"
      rest="Us."
      sub="Walk-ins are welcome during open hours. For projects that need uninterrupted attention, book a private consultation below."
    />

    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 pb-20 md:pb-28">
        <div className="grid lg:grid-cols-12 gap-10 md:gap-16">
          {/* Left: form */}
          <Reveal className="lg:col-span-7">
            <div className="bg-surface border border-hairline p-8 md:p-12">
              <Eyebrow>Send us a note</Eyebrow>
              <h2 className="font-display italic text-ink text-3xl md:text-4xl mt-3 leading-tight" style={{ fontWeight: 500 }}>
                Tell us about your piece.
              </h2>
              <p className="mt-4 text-body max-w-prose">We read every message. You'll hear back within one business day.</p>
              <div className="mt-10">
                <InquiryForm />
              </div>
            </div>
          </Reveal>

          {/* Right: contact card */}
          <Reveal delay={120} className="lg:col-span-5">
            <div className="bg-navy text-bg p-8 md:p-10">
              <Eyebrow className="text-sand">The Shop</Eyebrow>
              <div className="font-display italic text-bg text-3xl md:text-4xl mt-3 leading-tight" style={{ fontWeight: 500 }}>
                {BIZ.address1}
                <div className="text-bg/75 not-italic font-sans text-base mt-1 tracking-wider">{BIZ.address2}</div>
              </div>
              <a href={BIZ.mapsUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-3 mt-5 text-sand hover:text-bg">
                <span className="eyebrow">Get directions</span><span>→</span>
              </a>

              <div className="my-8 h-px bg-bg/20"/>

              <div className="grid grid-cols-2 gap-6">
                <div>
                  <Eyebrow className="text-bg/55 mb-2">Phone</Eyebrow>
                  <a href={BIZ.phoneHref} className="font-display italic text-bg text-xl md:text-2xl">{BIZ.phone}</a>
                </div>
                <div>
                  <Eyebrow className="text-bg/55 mb-2">Email</Eyebrow>
                  <a href={BIZ.emailHref} className="font-display italic text-bg text-xl md:text-2xl break-all">info@<wbr/>chriscraftframing<wbr/>.com</a>
                </div>
              </div>

              <div className="my-8 h-px bg-bg/20"/>

              <Eyebrow className="text-bg/55 mb-4">Hours</Eyebrow>
              <table className="w-full text-[14px]">
                <tbody>
                  {BIZ.hours.map(([d, h]) => (
                    <tr key={d}>
                      <td className="py-1.5 text-bg/70">{d}</td>
                      <td className={`py-1.5 text-right ${h === "Closed" ? "text-bg/40 italic" : "text-bg"}`}>{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

              <div className="my-8 h-px bg-bg/20"/>

              <div className="flex gap-3">
                <a href={BIZ.instagram} target="_blank" rel="noreferrer" className="flex-1 border border-bg/30 py-3 px-4 hover:bg-bg hover:text-navy transition-colors flex items-center gap-2">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
                  <span className="text-sm">Instagram</span>
                </a>
                <a href={BIZ.facebook} target="_blank" rel="noreferrer" className="flex-1 border border-bg/30 py-3 px-4 hover:bg-bg hover:text-navy transition-colors flex items-center gap-2">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-9h3l.5-4H13V6.5c0-1.2.3-2 2-2H17V1.1C16.6 1 15.5 1 14.3 1 11.7 1 10 2.6 10 5.7V9H7v4h3v9h3z"/></svg>
                  <span className="text-sm">Facebook</span>
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Map */}
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 pb-20 md:pb-28">
        <Reveal>
          <MapEmbed />
        </Reveal>
      </div>
    </section>

    {/* Private Consultation callout */}
    <section className="bg-surface border-y border-hairline">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <div className="grid md:grid-cols-12 gap-10 md:gap-16 items-start">
          <Reveal className="md:col-span-5">
            <Eyebrow>Private Consultations</Eyebrow>
            <h2 className="font-display text-ink mt-4 text-4xl md:text-6xl leading-[1]" style={{ fontWeight: 400, textWrap: "balance" }}>
              <span className="italic" style={{ fontWeight: 500 }}>A</span> closed-door <br/>conversation.
            </h2>
            <p className="mt-6 text-body text-[16px] leading-[1.75] max-w-md">
              Would you like to discuss your custom framing project in a closed environment? Fill out the form below and we will reach out to coordinate a time so you can receive personalized attention from our expert team.
            </p>
            <ul className="mt-8 space-y-3 text-body">
              {["Just you, your piece, and our framer.", "Walk through mat boards, mouldings, and conservation glass.", "Working around your vision, vibe, and budget.", "Written estimate, no pressure."].map((s) => (
                <li key={s} className="flex gap-3"><span className="text-sand">✦</span>{s}</li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={120} className="md:col-span-7">
            <ConsultationForm />
          </Reveal>
        </div>
      </div>
    </section>
  </main>
);

Object.assign(window, { OurCraft, BehindTheFrame, Reviews, GetInTouch });