function Services() {
  const serviceImages = {
    "art-consulting": MAZAGAN_IMAGES[2],
    "original-artwork": FLOCK_IMAGES[3],
    "framing": FCF_IMAGES[0],
    "commercial-printing": MAZAGAN_IMAGES[4],
    "mirrors": FLASH_IMAGES[4],
    "installation": FRENCH_MAT_IMAGES[3],
  };
  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div className="container-wide">
          <Eyebrow>Your Complete Art Resource</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 140px)", marginTop: 28, lineHeight: 1 }}>
            <em>Services.</em>
          </h1>
          <p style={{ marginTop: 32, fontSize: 19, maxWidth: 680, color: "var(--ink-body)" }}>
            Six in-house services covering every stage from concept to installation. Make it, frame it, ship it — all under one roof.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="serv-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            {SERVICES.map((s, i) => {
              const featured = s.featured;
              return (
                <Link key={s.slug} to={`/services/${s.slug}`} style={{ display: "block", gridColumn: featured ? "1 / -1" : "auto", cursor: "pointer" }}
                  onMouseEnter={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1.03)"; }}
                  onMouseLeave={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1)"; }}>
                  <div style={{ aspectRatio: featured ? "21/9" : "4/3", overflow: "hidden", background: "var(--hairline)", marginBottom: 20 }}>
                    <img src={serviceImages[s.slug]} alt={s.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.7s ease" }} />
                  </div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)" }}>0{i + 1}</span>
                    <h3 className="display" style={{ fontSize: featured ? 52 : 36 }}>{s.title}{featured && <span style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold)", marginLeft: 16, verticalAlign: "middle" }}>Featured</span>}</h3>
                  </div>
                  <p style={{ fontSize: 16, color: "var(--ink-body)", marginTop: 12, maxWidth: 720 }}>{s.description}</p>
                  <div style={{ marginTop: 16, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--forest)" }}>Explore {s.title.toLowerCase()} →</div>
                </Link>
              );
            })}
          </div>
          <style>{`@media (max-width: 880px) { .serv-cards { grid-template-columns: 1fr !important; } .serv-cards a { grid-column: auto !important; } }`}</style>
        </div>
      </section>

      <CTASection title={<><em>Have a project in mind?</em></>} body="We'll get back within two business days to schedule a consultation." ctaLabel="Start a Project" ctaTo="/new-project" />
    </div>
  );
}
window.Services = Services;

// ===== Framing (HERO service) =====
function Framing() {
  const capabilities = ["Commercial Framing", "Residential Framing", "Custom Framing", "Small Framing", "Large Framing"];
  return (
    <div className="fade-in">
      {/* Hero */}
      <section style={{ paddingTop: 56, paddingBottom: 0 }}>
        <div className="container-wide">
          <Eyebrow>Frame Shop · Custom · Commercial · Residential</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 144px)", marginTop: 28, lineHeight: 1, marginBottom: 48 }}>
            <em>Framing.</em>
          </h1>
        </div>
        <div className="container-wide" style={{ marginBottom: 80 }}>
          <div style={{ aspectRatio: "21/9", overflow: "hidden" }}>
            <img src={IMG.FRAME_SHOP_HERO} alt="Frame shop" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </section>

      {/* 6,000 frames stat */}
      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="six-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(120px, 18vw, 240px)", color: "var(--ink)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
                6,000<span style={{ color: "var(--gold)" }}>+</span>
              </div>
              <div style={{ fontSize: 14, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)", marginTop: 16 }}>Frames to choose from</div>
            </div>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.8, marginBottom: 24 }}>
                The Art Dallas frame shop is known for its selection of moldings, creative use of materials, and professional results. The frame shop has over 6,000 frames to choose from — each design project, whether large or small, can be beautifully framed.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {capabilities.map(c => (
                  <li key={c} style={{ padding: "14px 0", borderTop: "1px solid var(--hairline)", fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink)" }}>{c}</li>
                ))}
              </ul>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .six-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      {/* Specialty index */}
      <section className="section" style={{ background: "var(--forest)", color: "#fff" }}>
        <div className="container-wide">
          <Eyebrow style={{ color: "var(--gold)" }}>Four Signature Specialties</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", color: "#fff", marginTop: 16, marginBottom: 48 }}>
            Beyond standard <em>framing.</em>
          </h2>
          <div className="specs-index" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              { id: "fcf", label: "Finished Corner Frames", n: "01" },
              { id: "flash", label: "FLASH®", n: "02" },
              { id: "french", label: "French Matting", n: "03" },
              { id: "flock", label: "Flock", n: "04" },
            ].map(s => (
              <a key={s.id} href={`#/services/framing#${s.id}`} onClick={(e) => { e.preventDefault(); document.getElementById(s.id)?.scrollIntoView({ behavior: "smooth", block: "start" }); }} style={{ padding: "28px 24px", borderLeft: "1px solid rgba(255,255,255,0.15)", cursor: "pointer", transition: "background 0.2s" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.04)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)" }}>{s.n}</div>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, color: "#fff", marginTop: 12 }}>{s.label}</div>
              </a>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .specs-index { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 480px) { .specs-index { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* FCF */}
      <section id="fcf" className="section-lg">
        <div className="container-wide">
          <div className="spec-head" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 64 }}>
            <div>
              <Eyebrow>Specialty 01</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 88px)", marginTop: 16 }}>
                Finished<br/><em>Corner Frames.</em>
              </h2>
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, color: "var(--gold)", lineHeight: 1.3, marginBottom: 24 }}>
                The ultimate in framing quality and craftsmanship.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.8 }}>
                Also known as Closed Corner Frames. Hardwood frames are finely sanded on the corners to create an invisible seam — gilded finished corner frames are finished with a layer of gesso. They are then surfaced with gold leafing or paint for a seamless design.
              </p>
            </div>
          </div>
          <Gallery images={FCF_IMAGES} columns={4} />
          <style>{`@media (max-width: 880px) { .spec-head { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>

      {/* FLASH® */}
      <section id="flash" className="section-lg" style={{ background: "#0d0c0a", color: "#fff" }}>
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 64 }} className="spec-head">
            <div>
              <Eyebrow style={{ color: "var(--gold)" }}>Specialty 02 · Trademark</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(56px, 8vw, 120px)", color: "#fff", marginTop: 16, letterSpacing: "-0.03em" }}>
                FLASH<span style={{ fontFamily: "var(--font-body)", fontSize: "0.3em", verticalAlign: "super", color: "var(--gold)", marginLeft: 4 }}>®</span>
              </h2>
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(20px, 2vw, 28px)", color: "var(--gold)", lineHeight: 1.3, marginBottom: 32, letterSpacing: "0.04em" }}>
                Bright. Shiny. Celebrity.<br/>Paparazzi. <em>FLASH!</em>
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, color: "rgba(255,255,255,0.85)", fontSize: 16, lineHeight: 1.8 }}>
                {[
                  "A new process applied to our unique product lines of picture frames, fixtures, sculpture and furnishings.",
                  "Objects are finished in pure silver and protected forever.",
                  "Cutting-edge look and heirloom-quality.",
                  "Not paint. Not foil. Pure silver.",
                  "Three-day construction process applied to our signature product lines.",
                  "Hand-crafted in Dallas, Texas.",
                ].map((b, i) => (
                  <li key={i} style={{ display: "flex", gap: 16, padding: "10px 0", borderTop: i === 0 ? 0 : "1px solid rgba(255,255,255,0.08)" }}>
                    <span style={{ color: "var(--gold)", fontFamily: "var(--font-mono)", fontSize: 11, marginTop: 6 }}>0{i + 1}</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="flash-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
            <img src={FLASH_IMAGES[2]} alt="" style={{ width: "100%", aspectRatio: "16/10", objectFit: "cover", gridRow: "span 2" }} />
            <img src={FLASH_IMAGES[0]} alt="" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
            <img src={FLASH_IMAGES[1]} alt="" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
            <img src={FLASH_IMAGES[3]} alt="" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
            <img src={FLASH_IMAGES[4]} alt="" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
          </div>
          <style>{`@media (max-width: 880px) { .flash-grid { grid-template-columns: 1fr 1fr !important; } .flash-grid > img:first-child { grid-row: auto !important; grid-column: 1 / -1; } }`}</style>
        </div>
      </section>

      {/* French Matting */}
      <section id="french" className="section-lg">
        <div className="container-wide">
          <div className="spec-head" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 64 }}>
            <div>
              <Eyebrow>Specialty 03</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 88px)", marginTop: 16 }}>
                French<br/><em>Matting.</em>
              </h2>
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, color: "var(--gold)", lineHeight: 1.3, marginBottom: 24 }}>
                Add that polished, handcrafted look to your project.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.8 }}>
                Subtle decorative details are an important part of custom picture framing — and french mats are one way to add that polished, handcrafted look. A traditional technique using watercolor or paper panels along with ink or pencil lines around the perimeter of a matted piece of art. Our designers look into the art for design cues regarding color, proportion, line, scale, and texture.
              </p>
            </div>
          </div>
          <Gallery images={FRENCH_MAT_IMAGES} columns={3} />
        </div>
      </section>

      {/* Flock */}
      <section id="flock" className="section-lg" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <div className="spec-head" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 64 }}>
            <div>
              <Eyebrow>Specialty 04</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 88px)", marginTop: 16 }}>
                <em>Flock.</em>
              </h2>
            </div>
            <div>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, color: "var(--gold)", lineHeight: 1.3, marginBottom: 24 }}>
                Improbable twists to everyday objects.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.8, marginBottom: 16 }}>
                Flocking is the process of depositing millions of little fiber particles onto the surface of an object — increasing feel, aesthetics, color, and appearance. So far we've mostly been using it for picture frame moldings and liners, and a few fun objects.
              </p>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24, color: "var(--ink)" }}>Challenge us!</p>
            </div>
          </div>
          <Gallery images={FLOCK_IMAGES} columns={5} />
        </div>
      </section>

      <CTASection title={<><em>Start your framing</em> project.</>} body="From a single piece to a multi-property art program — over 6,000 frames in stock." ctaLabel="Begin Intake" ctaTo="/new-project" />
    </div>
  );
}
window.Framing = Framing;