// Framing + Framing Inspiration pages
const { useState: fUseState, useMemo: fUseMemo } = React;

function Framing() {
  return (
    <div data-screen-label="04 Framing">
      {/* Hero */}
      <section style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="container">
          <Eyebrow>Frame shop · 60 years</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 128px)", margin: "20px 0 0", letterSpacing: "-0.02em", lineHeight: 0.98 }}>
            <em>Custom</em><br/>Framing.
          </h1>
          <p style={{ maxWidth: 620, marginTop: 32, fontSize: 18, lineHeight: 1.65 }}>
            {COPY.framingIntro}
          </p>
        </div>
      </section>

      {/* Stats strip */}
      <FadeUp>
        <section style={{ borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", padding: "56px 0" }}>
          <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }} className="stats-grid">
            <Stat value="1,500+" label="Framing samples" />
            <Stat value="3" label="Museum-quality glass" />
            <Stat value="2" label="Acrylic glazings" />
            <Stat value="60+" label="Years framing" />
          </div>
        </section>
      </FadeUp>

      {/* Meet Nic */}
      <section className="section-lg">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }} className="hero-grid">
            <FadeUp>
              <div style={{ position: "relative" }}>
                <img src={IMG.NIC} alt="Nic Massar" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
                <div style={{ position: "absolute", bottom: -24, right: -24, background: "var(--wine)", color: "#f6efde", padding: "20px 28px", maxWidth: 260 }}>
                  <div className="eyebrow" style={{ color: "#e3c9c8" }}>Third Generation</div>
                  <div className="display" style={{ fontSize: 28, fontStyle: "italic", marginTop: 6, color: "#f6efde" }}>"Custom Framing Guru"</div>
                </div>
              </div>
            </FadeUp>
            <FadeUp delay={120}>
              <Eyebrow>The framer's hands</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 68px)", margin: "20px 0 28px" }}>
                Meet <em>Nic</em>, our<br/>Custom Framing Guru.
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.75, maxWidth: 480 }}>
                Nic Massar — son of owners Hans and Pam — leads our custom framing bench. He brings the family's sixty years of experience to every shadowbox, conservation project, and design consultation.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.75, maxWidth: 480, marginTop: 18 }}>
                If you're walking in with a watch, a flag, a magazine cover, or a grandfather's hand-written recipe — that's the work he loves most.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                <a href="#/visit" className="btn btn-primary">Schedule with Nic</a>
                <a href="#/framing/inspiration" className="btn btn-ghost">Recent projects →</a>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      <hr className="hairline"/>

      {/* Four specialties */}
      <Specialty
        index="01"
        eyebrow="Specialty"
        title={<>Conservation &<br/><em>archival framing</em>.</>}
        body="We specialize in conservation and archival framing. In addition to looking great, our hand-crafted frames will help protect and preserve your art, documents, and shadowbox items. Three museum-quality glass options, two acrylic glazings, and hundreds of fabric, paper, and ornate mat choices."
        img={IMG.SVC_CUSTOM}
        side="right"
      />
      <Specialty
        index="02"
        eyebrow="Specialty · Shadowbox"
        title={<><em>Shadowbox</em><br/>framing.</>}
        body={COPY.shadowbox + " Most of our most rewarding projects come walking in the door — a watch, a christening gown, fishing lures, awards, a folded service flag. We love a challenge."}
        img={IMG.SVC_SHADOWBOX}
        side="left"
        cta={{ href: "#/framing/inspiration", label: "View shadowbox inspiration →" }}
      />
      <Specialty
        index="03"
        eyebrow="Premium partner"
        title={<><em>House of Mercier</em>.<br/>Hand-made leather frames.</>}
        body={COPY.mercier}
        img={IMG.SVC_MERCIER}
        side="right"
        sub="For discerning collectors."
      />
      <Specialty
        index="04"
        eyebrow="Sustainability"
        title={<><em>Larson-Juhl</em><br/>Global Promise.</>}
        body={COPY.larsonJuhl}
        img={IMG.SVC_LARSON}
        side="left"
        sub="Our framing materials support reforestation."
      />

      {/* Scheduling callout */}
      <FadeUp>
        <section style={{ background: "var(--ink)", color: "#f6efde", padding: "112px 0" }}>
          <div className="container-narrow" style={{ textAlign: "center" }}>
            <Eyebrow color="#c8bfae">For large projects</Eyebrow>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", color: "#f6efde", margin: "20px 0 36px" }}>
              <em>Schedule</em> your custom<br/>design consultation.
            </h2>
            <p style={{ fontSize: 18, maxWidth: 640, margin: "0 auto", color: "#d8cfbf", lineHeight: 1.75 }}>
              "{COPY.scheduling}"
            </p>
            <div style={{ marginTop: 40, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="#/visit" className="btn" style={{ background: "var(--gold)", color: "var(--ink)" }}>Schedule consultation</a>
              <a href="tel:2143487350" className="btn" style={{ background: "transparent", color: "#f6efde", border: "1px solid #f6efde" }}>(214) 348-7350</a>
            </div>
          </div>
        </section>
      </FadeUp>
    </div>
  );
}

function Specialty({ index, eyebrow, title, body, img, side, cta, sub }) {
  const imgEl = <FadeUp delay={120}><img src={img} alt="" style={{ width: "100%", aspectRatio: "5 / 4", objectFit: "cover" }} /></FadeUp>;
  const text = (
    <FadeUp>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 20 }}>
        <div className="display" style={{ fontSize: 36, color: "var(--gold)", fontStyle: "italic" }}>{index}</div>
        <Eyebrow withRule={false}>{eyebrow}</Eyebrow>
      </div>
      <h3 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", margin: 0, lineHeight: 1.05 }}>{title}</h3>
      <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.75, maxWidth: 460 }}>{body}</p>
      {sub && <p style={{ marginTop: 16, fontStyle: "italic", fontFamily: "var(--display)", fontSize: 20, color: "var(--wine)" }}>{sub}</p>}
      {cta && <a href={cta.href} className="btn-link" style={{ display: "inline-block", marginTop: 24 }}>{cta.label}</a>}
    </FadeUp>
  );
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="hero-grid">
          {side === "right" ? (<>{text}{imgEl}</>) : (<>{imgEl}{text}</>)}
        </div>
      </div>
    </section>
  );
}

// ---------- FRAMING INSPIRATION ----------
function FramingInspiration() {
  const cats = ["All", "Shadowboxes", "Memorabilia", "Sports", "Heirlooms", "Documents", "Art Pieces"];
  const [active, setActive] = fUseState("All");
  const filtered = fUseMemo(() => {
    if (active === "All") return FRAMING_PROJECTS;
    if (active === "Shadowboxes") return FRAMING_PROJECTS.filter(p => ["Memorabilia", "Sports", "Heirlooms"].includes(p.category));
    return FRAMING_PROJECTS.filter(p => p.category === active);
  }, [active]);

  // varied aspect ratios for masonry feel
  const ratios = ["4 / 5", "1 / 1", "4 / 3", "3 / 4", "5 / 4", "1 / 1", "3 / 4", "4 / 3", "4 / 5", "1 / 1", "3 / 4", "5 / 4"];

  return (
    <div data-screen-label="05 Framing Inspiration">
      <section style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="container">
          <a href="#/framing" className="btn-link" style={{ fontSize: 11 }}>← Custom Framing</a>
          <Eyebrow>Recent projects</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 7vw, 104px)", margin: "20px 0 0" }}>
            <em>Framing</em><br/>Inspiration.
          </h1>
          <p style={{ maxWidth: 620, marginTop: 28, fontSize: 17, lineHeight: 1.7 }}>
            Real projects from our shop. Each one is unique — a watch, a flag, an heirloom recipe, a magazine cover. We frame anything, and we love a challenge.
          </p>
        </div>
      </section>

      {/* Filter chips */}
      <section style={{ borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", padding: "20px 0" }}>
        <div className="container" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {cats.map(c => (
            <button key={c} onClick={() => setActive(c)} className={"tag" + (active === c ? " active" : "")} style={{ cursor: "pointer", border: "1px solid var(--hairline)", background: active === c ? "var(--ink)" : "transparent", color: active === c ? "var(--bg)" : "var(--ink)" }}>{c}</button>
          ))}
        </div>
      </section>

      {/* Masonry grid */}
      <section className="section">
        <div className="container">
          <div style={{ columnCount: 3, columnGap: 32 }} className="masonry">
            {filtered.map((p, i) => (
              <FadeUp key={p.slug} delay={i * 40}>
                <div style={{ breakInside: "avoid", marginBottom: 32 }}>
                  <a href="#/framing/inspiration" style={{ textDecoration: "none", display: "block" }} className="lift">
                    <div style={{ padding: 16, background: "#f0e8d4", boxShadow: "0 0 0 1px var(--gold) inset" }}>
                      <ArtCanvas seed={p.canvas} ratio={ratios[i % ratios.length]} src={p.img} />
                    </div>
                    <div style={{ marginTop: 16 }}>
                      <div className="eyebrow" style={{ color: "var(--wine)" }}>{p.category}</div>
                      <div className="display" style={{ fontSize: 24, fontStyle: "italic", marginTop: 6 }}>{p.title}</div>
                      <p style={{ marginTop: 8, fontSize: 14, color: "var(--ink-body)", lineHeight: 1.6 }}>{p.desc}</p>
                    </div>
                  </a>
                </div>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      <FadeUp>
        <section style={{ background: "#efe5ce", padding: "80px 0" }}>
          <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div>
              <Eyebrow>Have a project?</Eyebrow>
              <h3 className="display" style={{ fontSize: 40, margin: "12px 0 0" }}>Let's talk about <em>yours</em>.</h3>
            </div>
            <a href="#/visit" className="btn btn-primary">Schedule a consultation →</a>
          </div>
        </section>
      </FadeUp>
    </div>
  );
}

Object.assign(window, { Framing, FramingInspiration });