// Pages

// ---------- HOME ----------
function HomePage() {
  const heroImgs = [SHOWCASE_IMAGES[2], SHOWCASE_IMAGES[7], SHOWCASE_IMAGES[14], SHOWCASE_IMAGES[22]];
  return (
    <div data-screen-label="01 Home" className="page-fade">
      {/* HERO */}
      <section className="pt-16 md:pt-24 pb-20 md:pb-32 relative overflow-hidden">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          <div className="lg:col-span-7">
            <Eyebrow className="text-wine">Dallas Design District · Framer of Choice</Eyebrow>
            <h1 className="font-display text-ink leading-[0.98] mt-8 text-[56px] md:text-[80px] lg:text-[104px]" style={{textWrap:'balance'}}>
              <span className="italic font-light">Serving</span> individual,<br/>
              designer, and<br/>
              corporate <span className="italic font-light text-wine">patrons.</span>
            </h1>
            <p className="mt-10 max-w-xl text-[18px] text-body leading-[1.75]">
              Custom picture framing for the homes, hotels, offices, and galleries of Texas — and beyond. Thousands of frame and mat selections in our expansive design room.
            </p>
            <div className="mt-12 flex flex-col sm:flex-row gap-4">
              <Link to="/showcase" className="btn-primary">View Our Showcase <span>→</span></Link>
              <Link to="/contact" className="btn-ghost">Visit Our Studio</Link>
            </div>
            <div className="mt-16 flex items-center gap-6 text-sm text-muted">
              <div className="h-px w-12 bg-gold"></div>
              <div>41 works in current showcase · Est. trusted by the Mansion, Four Seasons & Pinehurst</div>
            </div>
          </div>
          <div className="lg:col-span-5">
            <div className="grid grid-cols-2 gap-4">
              {heroImgs.map((src, i) => (
                <div key={i} className={`overflow-hidden bg-hairline/30 ${i % 2 === 0 ? 'aspect-[3/4] mt-0' : 'aspect-[3/4] mt-12'}`}>
                  <img src={src} alt="" className="w-full h-full object-cover img-hover" loading={i < 2 ? 'eager' : 'lazy'} />
                </div>
              ))}
            </div>
            <div className="mt-6 flex items-center justify-end gap-3 text-xs eyebrow text-muted">
              <span>Selected from the showcase</span>
              <Link to="/showcase" className="text-wine hover:underline">View all 41 →</Link>
            </div>
          </div>
        </div>
      </section>

      {/* CLIENT MARQUEE */}
      <section className="bg-ink text-cream py-20 md:py-28 overflow-hidden">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="flex items-baseline justify-between flex-wrap gap-4 mb-10">
            <Eyebrow className="text-gold">Trusted By</Eyebrow>
            <div className="text-sm text-cream/50">Hospitality, corporate & medical clients across Texas</div>
          </div>
        </div>
        <div className="relative">
          <div className="flex marquee-track whitespace-nowrap gap-16 px-6">
            {[...CORPORATE_CLIENTS, ...CORPORATE_CLIENTS].map((c, i) => (
              <div key={i} className="flex items-center gap-16 shrink-0">
                <span className="font-display italic text-cream text-4xl md:text-6xl">{c.name}</span>
                <span className="w-2 h-2 rounded-full bg-gold/60"></span>
              </div>
            ))}
          </div>
        </div>
        <div className="max-w-page mx-auto px-6 lg:px-10 mt-12">
          <Link to="/commercial" className="text-gold text-sm tracking-[0.22em] uppercase border-b border-gold/40 pb-1 hover:text-cream hover:border-cream">View commercial work →</Link>
        </div>
      </section>

      {/* ABOUT / DONNA */}
      <section className="py-24 md:py-36">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-20 items-center">
          <div className="md:col-span-5">
            <div className="relative">
              <img src={IMG.DONNA_FRONTPAGE} alt="Donna Wildman" className="w-full h-auto object-cover" loading="lazy"/>
              <div className="absolute -bottom-5 -right-5 hidden md:block bg-cream px-5 py-3 border hairline">
                <div className="eyebrow text-wine">Founder</div>
                <div className="font-display italic text-2xl text-ink">Donna Wildman</div>
              </div>
            </div>
          </div>
          <div className="md:col-span-7">
            <Eyebrow className="text-wine">A note from our founder</Eyebrow>
            <h2 className="font-display text-5xl md:text-6xl mt-5 leading-[1.05] text-ink" style={{textWrap:'balance'}}>
              <span className="italic font-light">Hi,</span> I'm Donna.
            </h2>
            <p className="mt-8 text-[18px] leading-[1.8] text-body max-w-xl">
              I founded Wildman Art Framing to bring museum-grade framing to Dallas. We have become the <em className="text-wine font-medium not-italic">"Framer of Choice"</em> for designers, architects, hospitality, and corporate clients — while offering the same superior services to individual customers across Texas.
            </p>
            <div className="mt-10">
              <Link to="/about" className="text-wine text-sm tracking-[0.22em] uppercase border-b border-wine/40 pb-1 hover:border-wine">More about Wildman →</Link>
            </div>
          </div>
        </div>
      </section>

      {/* FOUR SERVICE TILES */}
      <section className="bg-paper border-y hairline">
        <div className="max-w-page mx-auto px-6 lg:px-10 py-24 md:py-32">
          <div className="grid md:grid-cols-12 gap-12 items-end mb-16">
            <div className="md:col-span-8">
              <Eyebrow className="text-wine">What we do</Eyebrow>
              <h2 className="font-display text-4xl md:text-6xl mt-4 italic font-light text-ink leading-tight" style={{textWrap:'balance'}}>From selection to installation, in one studio.</h2>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-hairline">
            {[
              { icon: IMG.CIRCLE_SELECTION, title: "Frame Selection", body: "Thousands of selections — gilded, wood, leather, steel, mirrored.", to: "/frame-selection" },
              { icon: IMG.CIRCLE_SERVICES, title: "Framing Services", body: "Museum-grade craft — French mats, conservation glass, archival mounting.", to: "/services" },
              { icon: IMG.CIRCLE_SHOWCASE, title: "Showcase", body: "Examples of our work, from traditional botanicals to elaborate shadowboxes.", to: "/showcase" },
              { icon: IMG.CIRCLE_COMMERCIAL, title: "Commercial", body: "Hospitality and corporate art programs, installation coordination.", to: "/commercial" },
            ].map((s, i) => (
              <Link key={s.title} to={s.to} className="group bg-cream p-10 lg:p-12 flex flex-col gap-6 hover:bg-paper transition-colors duration-300">
                <div className="w-20 h-20 rounded-full bg-wine flex items-center justify-center p-3 group-hover:bg-wine-dark transition-colors">
                  <img src={s.icon} alt="" className="w-full h-full object-contain" loading="lazy"/>
                </div>
                <div>
                  <div className="eyebrow text-muted">0{i+1}</div>
                  <h3 className="font-display text-3xl text-ink mt-2 leading-tight">{s.title}</h3>
                  <p className="mt-4 text-[15px] leading-relaxed text-body">{s.body}</p>
                </div>
                <div className="mt-auto pt-4 text-wine text-xs tracking-[0.22em] uppercase">Explore →</div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* SELECTED WORK */}
      <section className="py-24 md:py-32">
        <div className="max-w-screen-2xl mx-auto px-6 lg:px-10">
          <div className="flex items-end justify-between flex-wrap gap-6 mb-16">
            <div>
              <Eyebrow className="text-wine">Selected work</Eyebrow>
              <h2 className="font-display text-5xl md:text-7xl italic font-light mt-4 leading-tight text-ink">A glimpse of the showcase.</h2>
            </div>
            <Link to="/showcase" className="btn-ghost">View full showcase (41) <span>→</span></Link>
          </div>
          <ShowcaseGrid images={SHOWCASE_IMAGES} limit={12} />
        </div>
      </section>

      {/* DESIGN ROOM */}
      <section className="bg-cream py-24 md:py-32 border-t hairline">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid md:grid-cols-12 gap-14 items-center">
          <div className="md:col-span-6">
            <img src={IMG.FRAME_SELECTION} alt="Our expansive design room" className="w-full h-auto object-cover" loading="lazy" />
          </div>
          <div className="md:col-span-6">
            <Eyebrow className="text-wine">Our expansive design room</Eyebrow>
            <h2 className="font-display text-4xl md:text-6xl mt-5 italic font-light text-ink leading-[1.05]" style={{textWrap:'balance'}}>
              Thousands of selections, in one room.
            </h2>
            <p className="mt-8 text-[18px] leading-[1.8] text-body">
              Our expansive design room displays thousands of frame and mat selections. With an unparalleled collection of gilded period frames, handsome woods, luxurious leathers, sleek industrial steels, and unique painted finishes, you are sure to find a frame that meets your fancy.
            </p>
            <div className="mt-10 grid grid-cols-3 gap-6 border-t hairline pt-8">
              <div><div className="font-display text-4xl text-wine">1000s</div><div className="eyebrow text-muted mt-2">Frames & Mats</div></div>
              <div><div className="font-display text-4xl text-wine">41</div><div className="eyebrow text-muted mt-2">Showcase Works</div></div>
              <div><div className="font-display text-4xl text-wine">6+</div><div className="eyebrow text-muted mt-2">Hospitality Clients</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* VISIT */}
      <section className="py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid md:grid-cols-12 gap-12 items-stretch">
          <div className="md:col-span-7">
            <Eyebrow className="text-wine">Visit the studio</Eyebrow>
            <h2 className="font-display text-5xl md:text-7xl italic font-light mt-5 text-ink leading-[1.02]" style={{textWrap:'balance'}}>2227 Irving Blvd.</h2>
            <div className="mt-10 grid grid-cols-2 gap-x-10 gap-y-8 max-w-xl">
              <div>
                <div className="eyebrow text-muted">Address</div>
                <div className="mt-2 text-ink leading-relaxed">2227 Irving Blvd<br/>Dallas, TX 75207</div>
              </div>
              <div>
                <div className="eyebrow text-muted">Hours</div>
                <div className="mt-2 text-ink leading-relaxed">Mon – Fri · 9:00 – 5:30<br/>Sat · By appointment<br/>Sun · Closed</div>
              </div>
              <div>
                <div className="eyebrow text-muted">Phone</div>
                <a href="tel:2147417100" className="block mt-2 font-display text-3xl italic text-wine">214.741.7100</a>
                <div className="text-xs text-muted mt-1">F · 214.741.9100</div>
              </div>
              <div>
                <div className="eyebrow text-muted">Email</div>
                <a href="mailto:info@wildmanartframing.com" className="block mt-2 text-ink break-all hover:text-wine">info@wildmanartframing.com</a>
              </div>
            </div>
            <div className="mt-12">
              <a href="https://maps.google.com/?q=2227+Irving+Blvd+Dallas+TX+75207" target="_blank" rel="noopener" className="btn-primary">Get Directions <span>→</span></a>
            </div>
          </div>
          <div className="md:col-span-5">
            <img src={IMG.BUILDING} alt="Wildman Art Framing building exterior" className="w-full h-full object-cover" loading="lazy" />
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- ABOUT ----------
function AboutPage() {
  const apart = [
    { title: "Design District location", body: "Trade-focused, and accessible to the working designers of DFW." },
    { title: "Thousands of selections", body: "An expansive design room — not catalog ordering or back-room samples." },
    { title: "Hand-painted French Mats", body: "A traditional craft few framers still practice. Painted by hand, in studio." },
    { title: "Archival expertise", body: "Conservation-grade materials for artwork that's built to last." },
    { title: "Trade pricing", body: "Designer and architect accounts welcome. Net 30 terms available." },
    { title: "Installation coordination", body: "Beyond framing — delivery, hanging, and full project management." },
  ];
  return (
    <div data-screen-label="02 About" className="page-fade">
      <PageHeader eyebrow="Dallas Design District" italicWord="About" rest={<>Wildman.</>}
        intro="Wildman Art Framing is the premiere destination for custom picture framing services in the Dallas–Fort Worth metroplex." />

      <section className="py-20 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid md:grid-cols-12 gap-12 md:gap-20 items-start">
          <div className="md:col-span-5">
            <img src={IMG.DONNA_ABOUT} alt="Donna Wildman" className="w-full h-auto object-cover" />
            <div className="mt-5 flex items-baseline justify-between">
              <div className="font-display italic text-2xl text-ink">Donna Wildman</div>
              <div className="eyebrow text-muted">Founder</div>
            </div>
          </div>
          <div className="md:col-span-7">
            <Eyebrow className="text-wine">A note from Donna</Eyebrow>
            <div className="mt-6 space-y-6 text-[18px] leading-[1.85] text-body">
              <p className="font-display italic text-3xl md:text-4xl text-ink leading-[1.25]" style={{textWrap:'balance'}}>
                I founded Wildman Art Framing to bring museum-grade framing to Dallas.
              </p>
              <p>
                Over the years, we've become the framer that the city's most discerning designers, architects, and hoteliers turn to first. Our location in the Dallas Design District puts us at the center of the conversation about how art is presented in the homes, hotels, and offices of Texas.
              </p>
              <p>
                From The Mansion on Turtle Creek to Four Seasons hotels in Dallas and Houston to Pinehurst Golf Resort in North Carolina — our work appears in spaces where the framing has to be exactly right, and built to last.
              </p>
              <p>
                But the same care goes into the family photograph, the wedding portrait, the child's drawing. Every piece we frame deserves the same archival materials and the same attention to design. That is what we promise.
              </p>
              <p className="font-display italic text-wine text-2xl">— Donna</p>
              {/* TODO: Verify personal background details with Donna */}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-paper border-y hairline py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid md:grid-cols-12 gap-12 mb-16">
            <div className="md:col-span-5">
              <Eyebrow className="text-wine">What sets us apart</Eyebrow>
              <h2 className="font-display text-4xl md:text-6xl mt-5 italic font-light text-ink leading-[1.05]" style={{textWrap:'balance'}}>Six reasons designers choose us.</h2>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-hairline">
            {apart.map((a, i) => (
              <div key={a.title} className="bg-cream p-10 lg:p-12">
                <div className="font-display text-wine text-3xl tabular-nums">0{i + 1}</div>
                <h3 className="font-display text-2xl text-ink mt-6">{a.title}</h3>
                <p className="mt-4 text-[15px] leading-relaxed text-body">{a.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PullQuote>
        "We have become the <em className="text-wine">Framer of Choice</em> for designers, architects, hospitality, and corporate clients while offering the same superior services to individual customers across Texas."
      </PullQuote>

      <CTAStrip title="Come see the design room for yourself."
        body="We welcome individual clients, designers, and architects. Visit us in the Design District, or send us a note."
        ctaLabel="Visit our design room" ctaTo="/contact" />
    </div>
  );
}

// ---------- FRAME SELECTION ----------
function FrameSelectionPage() {
  const catImgs = [SHOWCASE_IMAGES[1], SHOWCASE_IMAGES[5], SHOWCASE_IMAGES[9], SHOWCASE_IMAGES[13], SHOWCASE_IMAGES[18], SHOWCASE_IMAGES[24], SHOWCASE_IMAGES[33]];
  return (
    <div data-screen-label="03 Frame Selection" className="page-fade">
      <PageHeader eyebrow="We have the right frame" italicWord="Frame" rest={<>Selection.</>}
        intro="Wildman Art Framing has the right frame for your project — drawn from an expansive design room of gilded period frames, handsome woods, luxurious leathers, sleek steels, and unique painted finishes." />

      <section className="py-20 md:py-28">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid md:grid-cols-2 gap-x-12 gap-y-20">
            {FRAME_CATEGORIES.map((c, i) => (
              <div key={c.title} className="group">
                <div className="overflow-hidden bg-hairline/40 aspect-[5/4]">
                  <img src={catImgs[i]} alt={c.title} className="w-full h-full object-cover img-hover" loading="lazy" />
                </div>
                <div className="mt-6 flex items-baseline justify-between gap-6">
                  <div className="font-display text-muted/70 tabular-nums">0{i + 1}</div>
                  <div className="flex-1 border-t hairline mt-3"></div>
                </div>
                <h3 className="font-display text-3xl md:text-4xl text-ink mt-4 italic font-light leading-tight">{c.title}</h3>
                <p className="mt-4 text-[16px] leading-relaxed text-body max-w-md">{c.description}</p>
                <Link to="/contact" className="inline-block mt-5 text-wine text-xs tracking-[0.22em] uppercase border-b border-wine/40 pb-0.5 hover:border-wine">Inquire about {c.title.toLowerCase()} →</Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-ink text-cream py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid md:grid-cols-12 gap-12 mb-16 items-end">
            <div className="md:col-span-7">
              <Eyebrow className="text-gold">Materials we work in</Eyebrow>
              <h2 className="font-display text-4xl md:text-6xl mt-5 italic font-light leading-[1.05]" style={{textWrap:'balance'}}>An unparalleled collection.</h2>
            </div>
            <div className="md:col-span-5 text-cream/70">
              From classical gilding to industrial steels — every material is selected by hand and matched to the artwork it surrounds.
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {MATERIALS.map(m => (
              <div key={m.title} className="group">
                <div className="overflow-hidden bg-ink/40 aspect-[4/5]">
                  <img src={m.img} alt={m.title} loading="lazy" className="w-full h-full object-cover img-hover grayscale group-hover:grayscale-0 transition-all duration-700" />
                </div>
                <div className="mt-4 font-display italic text-2xl">{m.title}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PullQuote>
        Our expansive design room displays thousands of frame and mat selections — come visit us in the <em className="text-wine">Dallas Design District</em>.
      </PullQuote>

      <CTAStrip title="Schedule a design consultation." body="Bring your piece — or your project plans — and we'll work through selections together."
        ctaLabel="Book a consultation" ctaTo="/contact" />
    </div>
  );
}

// ---------- SERVICES ----------
function ServicesPage() {
  return (
    <div data-screen-label="04 Services" className="page-fade">
      <PageHeader eyebrow="Museum-grade craft" italicWord="Framing" rest={<>Services.</>}
        intro="Beyond selection, what we do behind the design room sets us apart — archival materials, hand-painted French mats, museum mounting, and the restoration of pieces that other framers won't touch." />

      <section className="py-20 md:py-28">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-hairline border hairline">
            {FRAMING_SERVICES.map((s, i) => (
              <div key={s.title} className={`bg-cream p-10 lg:p-12 ${s.featured ? '!bg-wine text-cream' : ''}`}>
                <div className={`font-display tabular-nums text-3xl ${s.featured ? 'text-gold' : 'text-wine'}`}>{String(i + 1).padStart(2, '0')}</div>
                <h3 className={`font-display text-2xl md:text-3xl mt-6 leading-tight ${s.featured ? 'text-cream italic' : 'text-ink'}`}>{s.title}</h3>
                <p className={`mt-4 text-[15px] leading-relaxed ${s.featured ? 'text-cream/80' : 'text-body'}`}>{s.blurb}</p>
                {s.featured && <div className="mt-6 eyebrow text-gold">Our signature craft</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* French mats spotlight */}
      <section className="bg-paper border-y hairline">
        <div className="max-w-page mx-auto px-6 lg:px-10 py-24 md:py-32 grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-6">
            <img src={IMG.CONSERVATION} alt="Hand-painted French mats" className="w-full h-auto object-cover" loading="lazy" />
          </div>
          <div className="md:col-span-6">
            <Eyebrow className="text-wine">A traditional craft</Eyebrow>
            <h2 className="font-display text-5xl md:text-7xl mt-5 italic font-light text-ink leading-[1.02]" style={{textWrap:'balance'}}>
              Hand-painted<br/>French Mats.
            </h2>
            <p className="mt-8 text-[17px] leading-[1.85] text-body">
              Few framers in Texas still practice the centuries-old technique of hand-painted French mats — fine decorative lines and watercolor washes applied directly to the mat surface. The result is a frame element that becomes part of the artwork itself.
            </p>
            <p className="mt-5 text-[17px] leading-[1.85] text-body">
              We've used this technique for botanicals, vintage prints, and fine art commissions throughout our 41-piece showcase.
            </p>
            <div className="mt-10">
              <Link to="/showcase" className="btn-ghost">See French mats in the showcase <span>→</span></Link>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip title="Discuss your project." body="Whether it's a single restoration or a hotel installation — we'd love to hear about it."
        ctaLabel="Start a conversation" ctaTo="/contact" />
    </div>
  );
}

// ---------- SHOWCASE ----------
function ShowcasePage() {
  return (
    <div data-screen-label="05 Showcase" className="page-fade">
      <PageHeader eyebrow="Framing Showcase" italicWord="Selected" rest={<>Work.</>}
        intro="We are proud to display examples of our work — from traditional botanicals with silk or French mats to elaborate shadowboxes. Our experienced design staff will work with you to design the perfect way to display your artwork." />

      <section className="py-12">
        <div className="max-w-screen-2xl mx-auto px-6 lg:px-10">
          <div className="flex items-baseline justify-between flex-wrap gap-4 mb-10">
            <div className="eyebrow text-muted">Displaying 41 of 41 works</div>
            <div className="eyebrow text-muted">Click any piece to view fullscreen · Use ← → to navigate</div>
          </div>
          <ShowcaseGrid images={SHOWCASE_IMAGES} />
        </div>
      </section>

      <CTAStrip title="Have a piece in mind? Let's design it."
        body="Bring your artwork — or send us photos — and we'll start sketching the perfect treatment."
        ctaLabel="Begin a project" ctaTo="/contact" />
    </div>
  );
}

// ---------- COMMERCIAL ----------
function CommercialPage() {
  const process = [
    { title: "Initial consultation", body: "Site visit or design district meeting to understand the space, scope, and timeline." },
    { title: "Selection & specification", body: "We source frames and mats matched to your space, brand, and budget." },
    { title: "Approval & production", body: "Mock-ups for sign-off, then full production in our Dallas studio." },
    { title: "Installation", body: "Coordinated delivery and hanging — on-site by our trained crews." },
  ];
  return (
    <div data-screen-label="06 Commercial" className="page-fade">
      <PageHeader eyebrow="For designers, architects & hospitality" italicWord="Commercial" rest={<>Services.</>}
        intro="Wildman Art Framing is the Dallas Design District's framer of choice for hospitality and corporate art programs — from single-property installations to multi-location rollouts." />

      {/* Trusted clients */}
      <section className="py-20 md:py-28">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="flex items-end justify-between flex-wrap gap-4 mb-12">
            <div>
              <Eyebrow className="text-wine">Our commercial clients</Eyebrow>
              <h2 className="font-display text-4xl md:text-6xl italic font-light mt-5 text-ink leading-tight" style={{textWrap:'balance'}}>The hotels, offices, and resorts we frame for.</h2>
            </div>
          </div>
          <ClientNameList />
        </div>
      </section>

      {/* Featured image */}
      <section className="py-12">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <img src={IMG.CORPORATE} alt="Commercial framing installations" className="w-full h-auto object-cover" loading="lazy" />
        </div>
      </section>

      {/* Services */}
      <section className="py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid md:grid-cols-12 gap-12 mb-16">
            <div className="md:col-span-5">
              <Eyebrow className="text-wine">What we offer</Eyebrow>
              <h2 className="font-display text-4xl md:text-5xl mt-5 italic font-light text-ink leading-[1.05]" style={{textWrap:'balance'}}>Programs designed and delivered, end to end.</h2>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-x-12 gap-y-16">
            {COMMERCIAL_SERVICES.map((s, i) => (
              <div key={s.title} className="border-t hairline pt-8">
                <div className="font-display text-wine text-3xl tabular-nums">0{i + 1}</div>
                <h3 className="font-display text-2xl md:text-3xl text-ink mt-4 leading-tight">{s.title}</h3>
                <p className="mt-4 text-[16px] leading-[1.8] text-body max-w-lg">{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Trade callout */}
      <section className="bg-ink text-cream py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid md:grid-cols-12 gap-12">
          <div className="md:col-span-5">
            <Eyebrow className="text-gold">For the trade</Eyebrow>
            <h2 className="font-display text-5xl md:text-6xl mt-5 italic font-light leading-[1.05]" style={{textWrap:'balance'}}>Designer & Architect Accounts.</h2>
          </div>
          <div className="md:col-span-7">
            <p className="text-[18px] leading-[1.85] text-cream/80">
              We welcome trade accounts from interior designers, architects, art consultants, and hospitality procurement teams. <span className="text-gold">Net 30 terms available, trade pricing,</span> and dedicated project management for multi-piece installations.
            </p>
            <ul className="mt-10 space-y-4 text-[15px]">
              {["Trade pricing on all frames, mats & glazing", "Net 30 terms for qualified accounts", "Dedicated project manager", "Mock-ups & in-studio approvals", "Installation coordination & lighting consult"].map(b => (
                <li key={b} className="flex items-start gap-4 border-t border-cream/10 pt-4">
                  <span className="w-1.5 h-1.5 bg-gold rounded-full mt-2 shrink-0"></span>
                  <span className="text-cream/90">{b}</span>
                </li>
              ))}
            </ul>
            <div className="mt-12">
              <a href="#/contact?subject=Trade%20Account%20Inquiry" className="btn-primary bg-gold !text-ink hover:bg-cream">Set up a trade account <span>→</span></a>
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="py-24 md:py-32">
        <div className="max-w-page mx-auto px-6 lg:px-10">
          <div className="grid md:grid-cols-12 gap-12 mb-16">
            <div className="md:col-span-5">
              <Eyebrow className="text-wine">Our process</Eyebrow>
              <h2 className="font-display text-4xl md:text-6xl mt-5 italic font-light text-ink leading-[1.05]" style={{textWrap:'balance'}}>From floor plan to final hang.</h2>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-4">
            {process.map((p, i) => (
              <div key={p.title} className="relative">
                <div className="font-display text-7xl text-gold/70 tabular-nums leading-none">{i + 1}</div>
                <div className="absolute top-6 left-20 right-0 hidden md:block h-px bg-hairline"></div>
                <h3 className="font-display text-2xl text-ink italic font-light mt-6">{p.title}</h3>
                <p className="mt-3 text-[15px] leading-relaxed text-body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip title="Let's discuss your project." body="Hotel, office, restaurant, residence, or medical — bring us your floor plan and we'll take it from there."
        ctaLabel="Request a proposal" ctaTo="/contact" />
    </div>
  );
}

// ---------- CONTACT ----------
function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', account: 'Individual', subject: 'Custom Framing', message: '' });

  // pre-fill subject from hash query
  React.useEffect(() => {
    const hash = window.location.hash;
    const qi = hash.indexOf('?');
    if (qi >= 0) {
      const params = new URLSearchParams(hash.slice(qi + 1));
      const subj = params.get('subject');
      if (subj) setForm(f => ({ ...f, subject: 'Trade Account', message: subj + '\n\n' }));
    }
  }, []);

  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <div data-screen-label="07 Contact" className="page-fade">
      <PageHeader eyebrow="Dallas Design District" italicWord="Visit" rest={<>Us.</>}
        intro="We're located at 2227 Irving Blvd in the heart of the Dallas Design District — just minutes from downtown, with easy access for designers, architects, and clients across DFW." />

      <section className="py-20 md:py-28">
        <div className="max-w-page mx-auto px-6 lg:px-10 grid lg:grid-cols-12 gap-14">
          <div className="lg:col-span-7">
            <Eyebrow className="text-wine">Send an inquiry</Eyebrow>
            <h2 className="font-display text-4xl md:text-5xl mt-4 italic font-light text-ink leading-tight" style={{textWrap:'balance'}}>Tell us about your project.</h2>

            {submitted ? (
              <div className="mt-10 border hairline p-10 bg-paper">
                <div className="font-display text-gold text-5xl leading-none">✓</div>
                <h3 className="font-display italic text-3xl text-ink mt-4">Thank you, {form.name || 'friend'}.</h3>
                <p className="mt-3 text-body">We've received your note. Donna or a member of our design team will be in touch within one business day.</p>
                <button onClick={() => { setSubmitted(false); setForm({ name:'', email:'', phone:'', account:'Individual', subject:'Custom Framing', message:'' }); }} className="mt-6 text-wine text-sm tracking-[0.22em] uppercase border-b border-wine/40 pb-1">Send another →</button>
              </div>
            ) : (
              <form onSubmit={onSubmit} className="mt-10 space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <Field label="Name" required value={form.name} onChange={v=>setForm({...form, name:v})}/>
                  <Field label="Email" required type="email" value={form.email} onChange={v=>setForm({...form, email:v})}/>
                </div>
                <Field label="Phone (optional)" value={form.phone} onChange={v=>setForm({...form, phone:v})}/>
                <SelectField label="Account type" options={["Individual", "Designer or Architect", "Hospitality", "Corporate"]} value={form.account} onChange={v=>setForm({...form, account:v})}/>
                <SelectField label="Subject" options={["Custom Framing", "Restoration", "Commercial Inquiry", "Trade Account", "Other"]} value={form.subject} onChange={v=>setForm({...form, subject:v})}/>
                <div>
                  <label className="eyebrow text-muted block mb-3">Tell us about your project</label>
                  <textarea rows={5} value={form.message} onChange={e=>setForm({...form, message:e.target.value})} className="w-full bg-paper border hairline px-5 py-4 text-ink focus:outline-none focus:border-wine transition-colors font-sans text-[16px]" placeholder="Artwork dimensions, framing style, timeline, anything else we should know…" />
                </div>
                <button type="submit" className="btn-primary mt-2">Send inquiry <span>→</span></button>
              </form>
            )}
          </div>

          <aside className="lg:col-span-5 space-y-10">
            <img src={IMG.BUILDING} alt="Wildman Art Framing exterior" className="w-full h-auto object-cover" loading="lazy" />
            <div className="border-t hairline pt-8">
              <Eyebrow className="text-wine">Studio</Eyebrow>
              <div className="mt-4 font-display italic text-3xl text-ink leading-tight">2227 Irving Blvd<br/>Dallas, TX 75207</div>
              <div className="mt-6 space-y-2 text-[16px] text-body">
                <div><span className="text-muted text-sm tracking-widest uppercase mr-3">P</span><a href="tel:2147417100" className="text-ink hover:text-wine">214.741.7100</a></div>
                <div><span className="text-muted text-sm tracking-widest uppercase mr-3">F</span><span className="text-ink">214.741.9100</span></div>
                <div><span className="text-muted text-sm tracking-widest uppercase mr-3">E</span><a href="mailto:info@wildmanartframing.com" className="text-ink hover:text-wine break-all">info@wildmanartframing.com</a></div>
              </div>
            </div>
            <div className="border-t hairline pt-8">
              <Eyebrow className="text-wine">Hours</Eyebrow>
              <div className="mt-4 grid grid-cols-2 gap-2 text-[16px] text-body">
                <div className="text-ink">Mon – Fri</div><div>9:00 – 5:30</div>
                <div className="text-ink">Saturday</div><div>By appointment</div>
                <div className="text-ink">Sunday</div><div>Closed</div>
              </div>
            </div>
            <a href="https://maps.google.com/?q=2227+Irving+Blvd+Dallas+TX+75207" target="_blank" rel="noopener" className="btn-ghost w-full justify-center">Get Directions <span>→</span></a>
          </aside>
        </div>
      </section>

      {/* Map embed */}
      <section className="px-6 lg:px-10 pb-24">
        <div className="max-w-page mx-auto border hairline overflow-hidden">
          <iframe
            title="Wildman Art Framing on Google Maps"
            src="https://maps.google.com/maps?q=2227%20Irving%20Blvd%2C%20Dallas%2C%20TX%2075207&t=m&z=15&output=embed&iwloc=near"
            className="w-full h-[380px] grayscale"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade">
          </iframe>
        </div>
      </section>
    </div>
  );
}

function Field({ label, value, onChange, required, type='text' }) {
  return (
    <div>
      <label className="eyebrow text-muted block mb-3">{label}{required && <span className="text-wine ml-1">*</span>}</label>
      <input type={type} required={required} value={value} onChange={e=>onChange(e.target.value)} className="w-full bg-paper border hairline px-5 py-4 text-ink focus:outline-none focus:border-wine transition-colors text-[16px]" />
    </div>
  );
}
function SelectField({ label, options, value, onChange }) {
  return (
    <div>
      <label className="eyebrow text-muted block mb-3">{label}</label>
      <select value={value} onChange={e=>onChange(e.target.value)} className="w-full bg-paper border hairline px-5 py-4 text-ink focus:outline-none focus:border-wine transition-colors text-[16px] appearance-none">
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    </div>
  );
}

Object.assign(window, {
  HomePage, AboutPage, FrameSelectionPage, ServicesPage,
  ShowcasePage, CommercialPage, ContactPage
});