// ════════════════════════════════════════════════════════════════════
// HOME
// ════════════════════════════════════════════════════════════════════
const HomeHero = () => {
  const heroImages = [
    PHOTOGRAPHY_IMAGES[0],
    PRINTS_IMAGES[0],
    PHOTOGRAPHY_IMAGES[2],
    PRINTS_IMAGES[3],
    TEXTILES_IMAGES[0],
    PHOTOGRAPHY_IMAGES[4],
  ];
  return (
    <section className="relative">
      <div className="max-w-wide mx-auto px-5 lg:px-10 pt-12 md:pt-20 pb-20 md:pb-28">
        <div className="grid lg:grid-cols-12 gap-10 md:gap-16 items-center">
          <Reveal className="lg:col-span-7">
            <Eyebrow>Park Cities · Woman Owned · 45 Years</Eyebrow>
            <h1
              className="font-display text-ink mt-6 text-[44px] sm:text-[68px] md:text-[92px] lg:text-[108px] leading-[0.93]"
              style={{ fontWeight: 400, textWrap: "balance", letterSpacing: "-0.015em" }}
            >
              <span className="italic" style={{ fontWeight: 500 }}>Framing</span>
              <br/>
              that will last
              <br/>
              <span className="relative inline-block">
                a lifetime.
                <span className="absolute -bottom-2 left-0 right-0 h-[3px] bg-sand"></span>
              </span>
            </h1>
            <p className="mt-10 max-w-[52ch] text-body text-[17px] leading-[1.75]">
              Custom framing in Dallas and the Park Cities for over 45 years. Attention to detail, craftsmanship, and personalized service — dedicated to preserving the memories that matter most.
            </p>
            <div className="mt-10 flex flex-wrap gap-4">
              <Button to="/get-in-touch">Book a Consultation</Button>
              <Button to="/our-craft" variant="ghost">Explore Our Craft</Button>
            </div>
            <div className="mt-12 flex items-center gap-8 text-[12px] tracking-[0.18em] uppercase text-muted">
              <span>Est. 1979</span>
              <span className="w-8 h-px bg-hairline" />
              <span>5211 W Lovers Ln</span>
              <span className="w-8 h-px bg-hairline hidden sm:block" />
              <span className="hidden sm:inline">By appointment & walk-in</span>
            </div>
          </Reveal>

          <Reveal delay={150} className="lg:col-span-5">
            <div className="relative">
              {/* Editorial collage */}
              <div className="grid grid-cols-6 grid-rows-6 gap-3 md:gap-4" style={{ aspectRatio: "5/6" }}>
                <div className="col-span-4 row-span-3 overflow-hidden bg-hairline">
                  <img src={heroImages[0]} alt="" className="w-full h-full object-cover" />
                </div>
                <div className="col-span-2 row-span-2 overflow-hidden bg-hairline">
                  <img src={heroImages[1]} alt="" className="w-full h-full object-cover" />
                </div>
                <div className="col-span-2 row-span-2 overflow-hidden bg-hairline">
                  <img src={heroImages[2]} alt="" className="w-full h-full object-cover" />
                </div>
                <div className="col-span-3 row-span-3 overflow-hidden bg-hairline">
                  <img src={heroImages[3]} alt="" className="w-full h-full object-cover" />
                </div>
                <div className="col-span-3 row-span-1 overflow-hidden bg-hairline">
                  <img src={heroImages[4]} alt="" className="w-full h-full object-cover" />
                </div>
                <div className="col-span-2 row-span-2 overflow-hidden bg-hairline" style={{ gridColumnStart: 4 }}>
                  <img src={heroImages[5]} alt="" className="w-full h-full object-cover" />
                </div>
              </div>
              {/* Floating tag */}
              <div className="absolute -bottom-6 -left-4 md:-left-8 bg-navy text-bg px-5 py-3 shadow-xl">
                <div className="eyebrow text-bg/55">Selected Work</div>
                <div className="font-display italic text-xl md:text-2xl">From the bench.</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      {/* Bottom marquee strip */}
      <div className="border-y border-hairline bg-sand-l/30 overflow-hidden">
        <div className="flex drift py-4 whitespace-nowrap">
          {[...THINGS_FRAMED, ...THINGS_FRAMED].map((t, i) => (
            <span key={i} className="font-display italic text-navy text-2xl md:text-3xl px-8 flex items-center gap-8">
              {t}
              <span className="text-sand text-base">✦</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

const MaureenStrip = () => (
  <section className="bg-bg">
    <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-36">
      <div className="grid md:grid-cols-12 gap-10 md:gap-16 items-center">
        <Reveal className="md:col-span-5">
          <div className="relative">
            <div className="absolute -inset-2 md:-inset-4 border border-sand pointer-events-none" />
            <div className="relative aspect-[4/5] bg-hairline overflow-hidden">
              <img src={MAUREEN_PORTRAIT} alt="Maureen Daniel, owner of Chris' Craft Custom Framing" className="w-full h-full object-cover" />
            </div>
            <div className="absolute -bottom-5 right-4 md:right-6 bg-bg px-5 py-3 border border-hairline">
              <div className="eyebrow text-muted">Owner</div>
              <div className="font-display italic text-navy text-xl mt-0.5">Maureen Daniel</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120} className="md:col-span-7">
          <Eyebrow>Meet your framer</Eyebrow>
          <h2 className="font-display text-ink mt-5 text-5xl md:text-7xl leading-[1]" style={{ fontWeight: 400, textWrap: "balance" }}>
            <span className="italic" style={{ fontWeight: 500 }}>Hi,</span> I'm Maureen.
          </h2>
          <p className="mt-8 text-body text-[18px] leading-[1.7] max-w-[55ch]">
            I'm the proud owner of this woman-owned small business here in Dallas, right in the heart of the Park Cities community. With a background in engineering, I bring an eye for detail and precision to every custom frame we make.
          </p>
          <p className="mt-5 text-body text-[18px] leading-[1.7] max-w-[55ch]">
            When I'm not at the bench, I'm a wife, mother, and — full disclosure — a bit of a karaoke star in my free time.
          </p>
          <div className="mt-10">
            <Link to="/behind-the-frame" className="inline-flex items-center gap-3 font-display italic text-navy text-xl group">
              Read my full story
              <span className="w-12 h-px bg-navy group-hover:w-20 transition-all duration-300" />
              <span>→</span>
            </Link>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const CategoriesOverview = () => (
  <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="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
        <Reveal>
          <Eyebrow>The Categories</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 }}>What</span> we frame.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="max-w-md text-body">
            Seven specialties, all in-house. From the first sketch on tracing paper to the final wall-ready piece — your project never leaves our shop.
          </p>
        </Reveal>
      </div>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-hairline border border-hairline">
        {FRAMING_CATEGORIES.map((cat, i) => {
          const sample = cat.images[0];
          return (
            <Reveal key={cat.slug} delay={i * 60}>
              <Link
                to={`/our-craft#${cat.slug}`}
                className="group block bg-surface hover:bg-bg p-7 md:p-9 h-full transition-colors duration-300"
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="eyebrow text-muted">0{i + 1} · {cat.eyebrow.split(" ").slice(0,3).join(" ")}</div>
                  {sample ? (
                    <div className="w-14 h-14 overflow-hidden bg-hairline shrink-0">
                      <img src={sample} alt="" className="w-full h-full object-cover" />
                    </div>
                  ) : (
                    <div className="w-14 h-14 grid place-items-center border border-dashed border-muted/40 text-muted text-[10px] tracking-widest">SOON</div>
                  )}
                </div>
                <h3 className="font-display italic text-ink text-3xl md:text-4xl mt-8 leading-[1.05]" style={{ fontWeight: 500 }}>
                  {cat.title}
                </h3>
                <p className="mt-4 text-body text-[15px] leading-[1.65] line-clamp-3">
                  {cat.description}
                </p>
                <div className="mt-7 flex items-center gap-3 text-navy text-sm">
                  <span className="font-display italic">Learn more</span>
                  <span className="w-8 h-px bg-navy group-hover:w-14 transition-all duration-300" />
                </div>
              </Link>
            </Reveal>
          );
        })}
      </div>
    </div>
  </section>
);

const FeaturedPortfolio = () => {
  const featured = useMemo(() => {
    return [
      PHOTOGRAPHY_IMAGES[1], PRINTS_IMAGES[2], TEXTILES_IMAGES[1],
      PHOTOGRAPHY_IMAGES[3], DOCUMENTS_IMAGES[0], PRINTS_IMAGES[4],
      PHOTOGRAPHY_IMAGES[5], BUSINESS_IMAGES[0], PRINTS_IMAGES[1],
      TEXTILES_IMAGES[2], PHOTOGRAPHY_IMAGES[0], PRINTS_IMAGES[5],
    ];
  }, []);
  const { open, node } = useLightbox(featured);
  return (
    <section className="bg-bg">
      <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
          <Reveal>
            <Eyebrow>Selected Work</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 }}>From</span> the bench.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <Link to="/our-craft" className="inline-flex items-center gap-3 text-navy">
              <span className="font-display italic text-lg">See the full portfolio</span>
              <span>→</span>
            </Link>
          </Reveal>
        </div>
        <Reveal>
          <div className="hidden md:block">
            <PortfolioGrid images={featured} onOpen={open} columns={4} />
          </div>
          <div className="md:hidden">
            <PortfolioGrid images={featured} onOpen={open} columns={2} />
          </div>
        </Reveal>
      </div>
      {node}
    </section>
  );
};

const TestimonialsHome = () => (
  <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="text-center max-w-2xl mx-auto mb-16">
        <Reveal>
          <Eyebrow>What our customers say</Eyebrow>
          <h2 className="font-display text-ink mt-4 text-4xl md:text-6xl leading-[1.02]" style={{ fontWeight: 400, textWrap: "balance" }}>
            <span className="italic" style={{ fontWeight: 500 }}>"Highly,</span> highly, highly recommend."
          </h2>
        </Reveal>
      </div>
      <div className="grid md:grid-cols-3 gap-6">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={t.name} delay={i * 100}>
            <TestimonialCard t={t} />
          </Reveal>
        ))}
      </div>
      <div className="mt-12 text-center">
        <Link to="/reviews" className="inline-flex items-center gap-3 text-navy">
          <span className="font-display italic text-lg">Read all reviews</span>
          <span>→</span>
        </Link>
      </div>
    </div>
  </section>
);

const PrivateConsultStrip = () => (
  <section className="bg-navy text-bg relative overflow-hidden">
    <div className="absolute inset-0 opacity-[0.04]" style={{
      backgroundImage: "radial-gradient(rgba(255,255,255,1) 1px, transparent 1px)",
      backgroundSize: "26px 26px",
    }}/>
    <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32 relative">
      <div className="grid md:grid-cols-12 gap-10 md:gap-16 items-center">
        <Reveal className="md:col-span-7">
          <div className="eyebrow text-sand">Personalized Attention</div>
          <h2 className="font-display mt-5 text-4xl md:text-6xl leading-[1] text-bg" style={{ fontWeight: 400, textWrap: "balance" }}>
            <span className="italic" style={{ fontWeight: 500 }}>Book</span> a private consultation.
          </h2>
          <p className="mt-7 text-bg/75 text-[17px] leading-[1.75] max-w-[55ch]">
            Would you like to discuss your custom framing project in a closed environment? We'll reach out to coordinate a time so you can receive personalized attention from our expert team.
          </p>
          <div className="mt-9 flex flex-wrap gap-4">
            <Button to="/get-in-touch" variant="light">Book a private consultation</Button>
            <a href={BIZ.phoneHref} className="inline-flex items-center gap-3 text-bg/80 hover:text-bg py-3">
              <span className="font-display italic text-lg">or call {BIZ.phone}</span>
            </a>
          </div>
        </Reveal>
        <Reveal delay={120} className="md:col-span-5">
          <div className="border border-bg/20 p-8 md:p-10">
            <div className="eyebrow text-sand mb-6">What's included</div>
            <ul className="space-y-5">
              {[
                ["Closed-door session", "Just you, your piece, and our framer."],
                ["Material walkthrough", "Mat boards, mouldings, conservation glass."],
                ["Working around your vision, vibe, and budget", "Verbatim from Maureen."],
                ["Written estimate, no pressure", "Take it home and think it over."],
              ].map(([t, d]) => (
                <li key={t} className="flex gap-4">
                  <span className="font-display italic text-sand text-xl pt-0.5">→</span>
                  <div>
                    <div className="text-bg text-[15px] font-medium">{t}</div>
                    <div className="text-bg/55 text-[14px] mt-1">{d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const VisitStrip = () => (
  <section className="bg-bg">
    <div className="max-w-wide mx-auto px-5 lg:px-10 py-24 md:py-32">
      <div className="grid lg:grid-cols-12 gap-12">
        <Reveal className="lg:col-span-5">
          <Eyebrow>Visit</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 }}>The</span> shop.
          </h2>
          <div className="mt-10 space-y-7 max-w-md">
            <div>
              <div className="eyebrow text-muted mb-2">Address</div>
              <div className="font-display italic text-ink text-2xl leading-tight">{BIZ.address1}<br/>{BIZ.address2}</div>
              <a href={BIZ.mapsUrl} target="_blank" rel="noreferrer" className="inline-block mt-3 text-navy underline-offset-4 hover:underline">Get directions →</a>
            </div>
            <div className="grid grid-cols-2 gap-6">
              <div>
                <div className="eyebrow text-muted mb-2">Phone</div>
                <a href={BIZ.phoneHref} className="font-display italic text-ink text-xl">{BIZ.phone}</a>
              </div>
              <div>
                <div className="eyebrow text-muted mb-2">Email</div>
                <a href={BIZ.emailHref} className="font-display italic text-ink text-xl break-all">info@</a>
              </div>
            </div>
            <div>
              <div className="eyebrow text-muted mb-3">Hours</div>
              <table className="text-[15px]">
                <tbody>
                  {BIZ.hours.map(([d, h]) => (
                    <tr key={d} className="align-baseline">
                      <td className="pr-8 py-1 text-muted">{d}</td>
                      <td className={`py-1 ${h === "Closed" ? "text-muted italic" : "text-ink"}`}>{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120} className="lg:col-span-7">
          <MapEmbed />
        </Reveal>
      </div>
    </div>
  </section>
);

const Home = () => (
  <main data-screen-label="01 Home">
    <HomeHero />
    <MaureenStrip />
    <CategoriesOverview />
    <FeaturedPortfolio />
    <TestimonialsHome />
    <PrivateConsultStrip />
    <VisitStrip />
  </main>
);

Object.assign(window, {
  Home,
});