/* Static pages: Products, Examples, Commercial, About, Visit */
(() => {
const { PRODUCTS: PR, IMAGES: II, COMMERCIAL_TYPES, GLASS_OPTIONS,
        COMPLETED_TVS_PLACEHOLDERS, MIRROR_PLACEHOLDERS,
        BOARD_PLACEHOLDERS, COMMERCIAL_PLACEHOLDERS } = window.SAM;

/* ===== Products index ===== */
const Products = () => (
  <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
    <div className="container-wide">
      <div style={{ maxWidth: 720, marginBottom: 48 }}>
        <Eyebrow>We frame anything</Eyebrow>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 800, margin: '12px 0 16px' }}>
          Products
        </h1>
        <p style={{ fontSize: 18, color: 'var(--ink-body)', lineHeight: 1.6 }}>
          Seven categories to start with — but if it's not on the list, just ask.
          We frame anything: jerseys, plates, carpets, certificates, golf clubs, oil paintings.
        </p>
      </div>

      {/* Featured products (TV + Boards) */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginBottom: 32
      }} className="feat-grid">
        {PR.filter(p => p.featured).map(p => (
          <a key={p.slug} href={p.builderPath} className="card card-hover" style={{ overflow: 'hidden' }}>
            <div style={{ aspectRatio: '16/10' }}>
              {p.hero ? (
                <SmartImg src={p.hero} alt={p.title} label={p.placeholder}/>
              ) : (
                <div className="imgph" style={{ height: '100%' }}>
                  <span>{p.placeholder}</span>
                </div>
              )}
            </div>
            <div style={{ padding: '24px 26px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <h3 className="display" style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>{p.title}</h3>
                <span className="pill">{p.badge}</span>
              </div>
              <p style={{ marginTop: 6, color: 'var(--ink-body)' }}>{p.description}</p>
              <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ color: 'var(--red)', fontWeight: 600 }}>Start building →</span>
                <span style={{ fontSize: 12, color: 'var(--muted)' }}>4–7 day turnaround</span>
              </div>
            </div>
          </a>
        ))}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16
      }}>
        {PR.filter(p => !p.featured).map(p => (
          <a key={p.slug} href={p.builderPath || p.contactPath || '#'} className="card card-hover" style={{ overflow: 'hidden' }}>
            <div style={{ aspectRatio: '4/3' }}>
              {p.hero
                ? <SmartImg src={p.hero} alt={p.title} label={p.placeholder}/>
                : <div className="imgph" style={{ height: '100%' }}><span>{p.placeholder}</span></div>
              }
            </div>
            <div style={{ padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 6, background: '#F1F0EC',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ink)'
                }}>
                  <Icon name={p.icon} size={16}/>
                </div>
                <h3 className="display" style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{p.title}</h3>
              </div>
              <p style={{ fontSize: 13, color: 'var(--ink-body)', marginTop: 8, marginBottom: 12 }}>{p.description}</p>
              <span style={{ fontSize: 13, color: 'var(--red)', fontWeight: 600 }}>
                {p.builderPath ? 'Build now →' : 'Learn more →'}
              </span>
            </div>
          </a>
        ))}
      </div>

      <div className="card" style={{
        marginTop: 56, padding: 32, background: '#FAFAF8',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 24
      }}>
        <div>
          <div className="display" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>
            Don't see what you need?
          </div>
          <p style={{ color: 'var(--ink-body)', maxWidth: 560, marginTop: 6, marginBottom: 0 }}>
            We've framed golf clubs, carpets, needlepoints, oil paintings, certificates — really anything.
            Call us and tell us what you've got.
          </p>
        </div>
        <a href="tel:2149958578" className="btn btn-red">
          <Icon name="Phone" size={14}/> 214-995-8578
        </a>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .feat-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </div>
);

/* ===== Examples (index + specific) ===== */
const ExamplesPage = ({ title, eyebrow, placeholders, blurb, gridCols = 'repeat(auto-fill, minmax(260px, 1fr))' }) => {
  const [lb, setLb] = useState(null);
  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container-wide">
        <a href="#/examples" style={{ fontSize: 13, color: 'var(--muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="ArrowLeft" size={13}/> All examples
        </a>
        <div style={{ marginTop: 8, marginBottom: 32 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(32px, 4.5vw, 48px)', fontWeight: 700, margin: '8px 0' }}>
            {title}
          </h1>
          {blurb && <p style={{ color: 'var(--ink-body)', fontSize: 17, maxWidth: 640, marginTop: 8 }}>{blurb}</p>}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: 16 }}>
          {placeholders.map((p, i) => {
            // vary aspect for a masonry feel
            const aspect = i % 3 === 0 ? '4/5' : (i % 3 === 1 ? '1/1' : '4/3');
            return (
              <button key={p + i} onClick={() => setLb({ label: p, i })} className="media-card" style={{
                border: 0, padding: 0, background: 'transparent', cursor: 'pointer',
                textAlign: 'left'
              }}>
                <div className="imgph" style={{ aspectRatio: aspect }}>
                  <span>{p}</span>
                </div>
                <div style={{ padding: '10px 4px', fontSize: 12, color: 'var(--muted)' }}>
                  {p}
                </div>
              </button>
            );
          })}
        </div>

        <div className="card" style={{ marginTop: 56, padding: 28, textAlign: 'center', background: '#FAFAF8' }}>
          <Icon name="Info" size={20} style={{ color: 'var(--red)' }}/>
          <div className="display" style={{ fontSize: 18, fontWeight: 700, marginTop: 8 }}>
            Real example photos coming from client
          </div>
          <p style={{ fontSize: 14, color: 'var(--muted)', maxWidth: 540, margin: '8px auto 0' }}>
            These are placeholders. Sam has finished examples on his existing site
            and Facebook page — to be sourced and added before launch.
          </p>
        </div>
      </div>

      {lb && (
        <div className="lightbox" onClick={() => setLb(null)}>
          <button onClick={() => setLb(null)} style={{
            position: 'absolute', top: 20, right: 20, background: 'transparent',
            border: 0, color: '#fff'
          }}>
            <Icon name="X" size={28}/>
          </button>
          <div onClick={e => e.stopPropagation()} style={{
            maxWidth: 'min(1100px, 90vw)', width: '100%'
          }}>
            <div className="imgph" style={{ aspectRatio: '4/3' }}>
              <span>{lb.label}</span>
            </div>
            <div style={{ color: '#fff', marginTop: 12, textAlign: 'center', fontSize: 14 }}>
              {lb.label}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const ExamplesIndex = () => {
  const U = 'https://images.unsplash.com';
  const cats = [
    { href: '#/examples/tv-frames', title: 'TV Frames', count: COMPLETED_TVS_PLACEHOLDERS.length, blurb: 'Hide your TV in plain sight.', thumb: '/images/tv-frame-white.jpg' },
    { href: '#/examples/boards', title: 'Custom Boards', count: BOARD_PLACEHOLDERS.length, blurb: 'Cork, chalk, whiteboard.', thumb: '/images/corkboard-info-page.jpg' },
    { href: '#/examples/mirrors', title: 'Custom Mirrors', count: MIRROR_PLACEHOLDERS.length, blurb: 'Bath, entry, commercial.', thumb: `${U}/photo-1616047006789-b7af5afb8c20?w=800&q=80&fit=crop` },
    { href: '#/examples/canvas', title: 'Canvas Prints', count: 6, blurb: 'Premium canvas, framed or wrapped.', thumb: `${U}/photo-1580136579312-94651dfd596d?w=800&q=80&fit=crop` },
    { href: '#/examples/custom-frames', title: 'Custom Frames', count: 8, blurb: 'Anything you bring us.', thumb: `${U}/photo-1513519245088-0e12902e5a38?w=800&q=80&fit=crop` },
  ];
  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container-wide">
        <Eyebrow>Examples</Eyebrow>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 800, margin: '12px 0 16px' }}>
          Finished work.
        </h1>
        <p style={{ fontSize: 18, color: 'var(--ink-body)', maxWidth: 640, marginBottom: 40 }}>
          Browse galleries of completed projects by category.
        </p>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16
        }}>
          {cats.map(c => (
            <a key={c.href} href={c.href} className="card card-hover" style={{ overflow: 'hidden' }}>
              <div style={{ aspectRatio: '4/3' }}>
                <SmartImg src={c.thumb} alt={c.title} label={c.title + ' · gallery preview'}/>
              </div>
              <div style={{ padding: 18 }}>
                <div className="display" style={{ fontSize: 18, fontWeight: 700 }}>{c.title}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{c.blurb}</div>
                <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 13, color: 'var(--red)', fontWeight: 600 }}>View gallery →</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{c.count} items</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

const TvFramesExamples = () => (
  <ExamplesPage title="TV Frames · Finished Examples" eyebrow="Make it look like art"
    placeholders={COMPLETED_TVS_PLACEHOLDERS}
    blurb="Real TVs we've framed, across living rooms, bedrooms, hotels, and offices."/>
);
const MirrorsExamples = () => (
  <ExamplesPage title="Custom Mirrors · Finished Examples" eyebrow="Bespoke mirrors"
    placeholders={MIRROR_PLACEHOLDERS}/>
);
const BoardsExamples = () => (
  <ExamplesPage title="Custom Boards · Finished Examples" eyebrow="Cork · Chalk · Whiteboard"
    placeholders={BOARD_PLACEHOLDERS}/>
);
const CanvasExamples = () => (
  <ExamplesPage title="Canvas Prints · Examples" eyebrow="Epson Pro 9880 · premium canvas"
    placeholders={['Wedding · 24×36 gallery wrap', 'Family portrait · framed canvas 30×40', 'Travel scene · 18×24', 'Pet portrait · 12×16', 'Black & white · framed canvas', 'Landscape · large 40×60']}/>
);
const CustomFramesExamples = () => (
  <ExamplesPage title="Custom Frames · Examples" eyebrow="We frame anything"
    placeholders={['Sports jersey · shadow box', 'Diploma · gilded frame', 'Wedding bouquet · 3D shadow box', 'Carpet · 4×6 framed', 'Vintage poster · UV glass', 'Golf clubs · shadow box', 'Needlepoint · oak frame', 'Plate set · 3D shadow box']}/>
);

/* ===== Commercial ===== */
const Commercial = () => (
  <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
    <div className="container-wide">
      <div style={{ marginBottom: 40 }}>
        <Eyebrow>For Businesses</Eyebrow>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 800, margin: '12px 0 16px', maxWidth: 900 }}>
          1 frame or 10,000 frames — we deliver.
        </h1>
        <p style={{ fontSize: 18, color: 'var(--ink-body)', maxWidth: 720, lineHeight: 1.55 }}>
          Hotels, restaurants, offices, real estate, government, healthcare. We've outfit
          projects from a single family home to hotel new construction.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 64
      }}>
        <div className="card" style={{
          gridColumn: 'span 7', overflow: 'hidden'
        }}>
          <div style={{ aspectRatio: '16/10' }}>
            <SmartImg src={II.KFC_PROJECT} alt="Restaurant project"
              label="Commercial install · restaurant chain · 32 frames"/>
          </div>
        </div>
        <div style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card" style={{ padding: 20 }}>
            <Eyebrow>Featured project</Eyebrow>
            <div className="display" style={{ fontSize: 20, fontWeight: 700, marginTop: 6 }}>
              Restaurant chain rollout
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-body)', marginTop: 6, marginBottom: 0 }}>
              32 frames installed across multiple locations, all on-brand,
              all delivered ready-to-hang.
            </p>
          </div>
          <div className="card" style={{ padding: 20, background: '#1A1A1A', color: '#fff', border: 0 }}>
            <Eyebrow color="#F4C4B0">Wholesale</Eyebrow>
            <div className="display" style={{ fontSize: 20, fontWeight: 700, marginTop: 6, color: '#fff' }}>
              No minimum quantity.
            </div>
            <p style={{ fontSize: 14, color: '#C9C9C5', marginTop: 6 }}>
              Wholesale pricing to dealers. Give us a call.
            </p>
            <a href="tel:2149958578" className="btn btn-red btn-sm" style={{ marginTop: 10 }}>
              <Icon name="Phone" size={13}/> 214-995-8578
            </a>
          </div>
        </div>
      </div>

      {/* Capability strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16,
        marginBottom: 64
      }}>
        {[
          { t: '1 frame or 10,000', d: 'Single piece or mass production.' },
          { t: 'Mass production for hotels', d: 'New construction & renovation.' },
          { t: 'Restaurant programs', d: 'On-brand curated art.' },
          { t: 'Office art consultation', d: 'On-site sample selection.' },
          { t: 'Installation & delivery', d: 'Ready-to-hang or we hang it.' },
          { t: 'Wholesale to dealers', d: 'No minimum quantity required.' },
        ].map(c => (
          <div key={c.t} className="card" style={{ padding: 20 }}>
            <div className="display" style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>{c.t}</div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{c.d}</div>
          </div>
        ))}
      </div>

      {/* Client types */}
      <div style={{ marginBottom: 64 }}>
        <SectionHeader eyebrow="Who we work with"
          title="Commercial clients across Texas."
          sub="And anywhere else we can ship."/>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {COMMERCIAL_TYPES.map(c => (
            <span key={c} className="pill pill-soft" style={{ padding: '8px 14px', fontSize: 13 }}>{c}</span>
          ))}
        </div>
      </div>

      {/* Equipment callout */}
      <div className="card" style={{
        padding: 'clamp(28px, 4vw, 48px)', background: '#FAFAF8',
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, marginBottom: 64
      }}>
        <div style={{ gridColumn: 'span 7' }} className="eq-text">
          <Eyebrow>Capability</Eyebrow>
          <h3 className="display" style={{ fontSize: 28, fontWeight: 700, margin: '8px 0 16px' }}>
            One of the largest framing saws in the region.
          </h3>
          <p style={{ color: 'var(--ink-body)', lineHeight: 1.65, fontSize: 16 }}>
            We invested in one of the largest framing saws that can cut moulding widths
            up to <strong style={{ color: 'var(--ink)' }}>8¼" wide</strong> — and we're capable of
            building a complex frame-in-frame design to accommodate a wider frame.
          </p>
          <p style={{ color: 'var(--ink-body)', lineHeight: 1.65, fontSize: 16 }}>
            We stock open frames from <strong style={{ color: 'var(--ink)' }}>8"×10" to 48"×72"</strong> —
            accommodating up to a 4×6-foot painting.
          </p>
        </div>
        <div style={{ gridColumn: 'span 5' }} className="eq-visual">
          <div style={{ aspectRatio: '4/3', borderRadius: 10, overflow: 'hidden' }}>
            <SmartImg
              src="https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1000&q=82&fit=crop"
              alt="Shop floor"
              label="Shop floor · framing saw + open frame stock"
            />
          </div>
        </div>
      </div>

      {/* Process */}
      <div style={{ marginBottom: 64 }}>
        <SectionHeader eyebrow="Process" title="Commercial workflow."/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 16
        }}>
          {[
            'Site visit or virtual consultation',
            'Sample selection (we bring to you)',
            'Quote and approval',
            'On-premises production',
            'Delivery and installation',
          ].map((s, i) => (
            <div key={s} className="card" style={{ padding: 20 }}>
              <div className="display" style={{ fontSize: 24, fontWeight: 800, color: 'var(--red)' }}>0{i + 1}</div>
              <div style={{ fontSize: 14, color: 'var(--ink)', marginTop: 8, fontWeight: 500 }}>
                {s}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{
        padding: 'clamp(28px, 4vw, 40px)', textAlign: 'center', background: '#1A1A1A', color: '#fff', border: 0
      }}>
        <Eyebrow color="#F4C4B0">Request a commercial quote</Eyebrow>
        <div className="display" style={{ fontSize: 28, fontWeight: 700, margin: '8px 0 8px', color: '#fff' }}>
          Tell us about your project.
        </div>
        <p style={{ color: '#C9C9C5', maxWidth: 540, margin: '0 auto 24px' }}>
          Restaurant rollout, hotel new build, office art program, real estate stage —
          we'll come visit or jump on a call.
        </p>
        <a href="#/visit" className="btn btn-red btn-lg">Request a quote <Icon name="ArrowRight" size={14}/></a>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .card[style*="span 7"], .card[style*="span 5"],
        .eq-text, .eq-visual { grid-column: span 12 !important; }
      }
    `}</style>
  </div>
);

/* ===== About ===== */
const About = () => (
  <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
    <div className="container">
      <Eyebrow>Owner-operated · On-premises · Since 2006</Eyebrow>
      <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 800, margin: '12px 0 16px', maxWidth: 800 }}>
        We've been framing things in Dallas since 2006.
      </h1>
      <p style={{ fontSize: 19, color: 'var(--ink-body)', maxWidth: 720, lineHeight: 1.6 }}>
        Sam's Custom Framing is a small, owner-operated shop in the Sam Moon Center on
        Harry Hines. We do all of our framing on-premises, by hand, to museum-quality standards.
      </p>
      <p style={{ fontSize: 17, color: 'var(--ink-body)', maxWidth: 720, lineHeight: 1.7, marginTop: 16 }}>
        We work with everyone: individuals framing a single photo, interior designers selecting
        art for a project, contractors outfitting a new hotel, restaurants curating a brand-aligned
        art program. The same care goes into a <span className="mono">$25</span> photo frame
        and a <span className="mono">$25,000</span> commercial installation.
      </p>

      <div style={{ marginTop: 56 }}>
        <SectionHeader eyebrow="What sets us apart" title="Six things we'll always do."/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16
        }}>
          {[
            { t: 'Owner-operated', d: "When you call, you're talking to the person making your frame.", icon: 'BadgeCheck' },
            { t: 'All framing on-premises', d: "We don't outsource anything. Ever.", icon: 'Hammer' },
            { t: 'Museum-quality standards', d: 'Every frame is built to last.', icon: 'Sparkle' },
            { t: 'We frame anything', d: 'Golf clubs, jerseys, plates, carpets, 3D objects. Bring it in.', icon: 'Frame' },
            { t: 'Price match guarantee', d: 'Big-box stores have flashy discounts. Our everyday prices are often less.', icon: 'ScaleIcon' },
            { t: 'Mass production capability', d: "We've outfit hotels and restaurants with thousands of frames.", icon: 'Boxes' },
          ].map(item => (
            <div key={item.t} className="card" style={{ padding: 24 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8, background: '#FFF5F0',
                color: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name={item.icon} size={18}/>
              </div>
              <div className="display" style={{ fontSize: 17, fontWeight: 700, marginTop: 14 }}>{item.t}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-body)', marginTop: 6 }}>{item.d}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 64 }}>
        <SectionHeader eyebrow="Glass options" title="Four ways to glaze."
          sub="Picked per-piece based on what you're framing and where it'll hang."/>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12
        }}>
          {GLASS_OPTIONS.map((g, i) => (
            <div key={g.name} className="card" style={{ padding: 20 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>0{i + 1}</div>
              <div className="display" style={{ fontSize: 16, fontWeight: 700, marginTop: 6 }}>{g.name}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-body)', marginTop: 4 }}>{g.desc}</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, fontStyle: 'italic' }}>{g.note}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{
        marginTop: 64, padding: 'clamp(24px, 4vw, 40px)',
        background: 'var(--soft)', borderColor: '#F1DACE',
        display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap'
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12, background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--red)', flexShrink: 0
        }}>
          <Icon name="Home" size={22}/>
        </div>
        <div style={{ flex: 1, minWidth: 280 }}>
          <Eyebrow>We come to you</Eyebrow>
          <div className="display" style={{ fontSize: 22, fontWeight: 700, margin: '8px 0' }}>
            Free in-home or office consultations.
          </div>
          <p style={{ color: 'var(--ink-body)', lineHeight: 1.6 }}>
            Evenings and weekends OK. We bring samples to you, pick up what you're framing,
            and return it ready-to-hang. Or we hang it for you.
          </p>
          <a href="#/visit" className="btn btn-red btn-sm" style={{ marginTop: 12 }}>
            Schedule a consultation <Icon name="ArrowRight" size={13}/>
          </a>
        </div>
      </div>

      <div style={{
        marginTop: 64, padding: '32px 0', borderTop: '1px solid var(--hair)',
        textAlign: 'center'
      }}>
        <p style={{
          fontFamily: 'Manrope', fontSize: 22, color: 'var(--ink)',
          fontStyle: 'italic', maxWidth: 680, margin: '0 auto', lineHeight: 1.5
        }}>
          "Our mission is to provide our clients with the finest quality product
          at the fairest price."
        </p>
        <div style={{ marginTop: 16, fontSize: 13, color: 'var(--muted)' }}>
          — Sam's Custom Framing · est. 2006
        </div>
      </div>
    </div>
  </div>
);

/* ===== Visit / Contact ===== */
const Visit = () => {
  const [form, setForm] = useState({
    name: '', email: '', phone: '', subject: 'TV Frame',
    notes: '', prefer: 'email'
  });
  const [sent, setSent] = useState(false);
  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <Eyebrow>Sam Moon Center · Harry Hines Blvd</Eyebrow>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 800, margin: '12px 0 16px' }}>
          Visit, call, or send a project our way.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--ink-body)', maxWidth: 640, lineHeight: 1.6 }}>
          Walk in, give us a call, or fill out the form below — we typically respond
          within 24 hours, often same-day before 5 PM Central.
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 380px', gap: 40, marginTop: 40
        }} className="v-grid">
          <div className="card" style={{ padding: 'clamp(24px, 3vw, 36px)' }}>
            {sent ? (
              <div style={{ padding: '20px 0', textAlign: 'center' }}>
                <Icon name="Check" size={36} stroke={2.4} style={{ color: 'var(--green)' }}/>
                <div className="display" style={{ fontSize: 24, fontWeight: 700, marginTop: 12 }}>
                  Thanks — we'll be in touch.
                </div>
                <p style={{ color: 'var(--ink-body)', marginTop: 8 }}>
                  We typically respond within 24 hours.
                </p>
              </div>
            ) : (
              <>
                <div className="display" style={{ fontSize: 22, fontWeight: 700 }}>Send a request</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }} className="vf-grid">
                  <div>
                    <label className="label">Name</label>
                    <input className="input" value={form.name}
                      onChange={e => setForm({ ...form, name: e.target.value })}/>
                  </div>
                  <div>
                    <label className="label">Email</label>
                    <input className="input" type="email" value={form.email}
                      onChange={e => setForm({ ...form, email: e.target.value })}/>
                  </div>
                  <div>
                    <label className="label">Phone</label>
                    <input className="input" type="tel" value={form.phone}
                      onChange={e => setForm({ ...form, phone: e.target.value })}/>
                  </div>
                  <div>
                    <label className="label">Subject</label>
                    <select className="select" value={form.subject}
                      onChange={e => setForm({ ...form, subject: e.target.value })}>
                      <option>TV Frame</option>
                      <option>Custom Mirror</option>
                      <option>Canvas</option>
                      <option>Custom Frame</option>
                      <option>Custom Board</option>
                      <option>Photo Services</option>
                      <option>Commercial</option>
                      <option>Wholesale</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div style={{ gridColumn: 'span 2' }}>
                    <label className="label">Project details</label>
                    <textarea className="input" rows="4" placeholder="Size, what you're framing, timeline, anything we should know..."
                      value={form.notes}
                      onChange={e => setForm({ ...form, notes: e.target.value })}/>
                  </div>
                  <div style={{ gridColumn: 'span 2' }}>
                    <label className="label">Preferred contact method</label>
                    <div style={{ display: 'flex', gap: 8 }}>
                      {['email', 'phone', 'in-person'].map(p => (
                        <button key={p} onClick={() => setForm({ ...form, prefer: p })}
                          style={{
                            padding: '10px 16px', borderRadius: 6,
                            border: '1px solid ' + (form.prefer === p ? 'var(--ink)' : 'var(--hair-strong)'),
                            background: form.prefer === p ? 'var(--ink)' : '#fff',
                            color: form.prefer === p ? '#fff' : 'var(--ink)',
                            cursor: 'pointer', fontWeight: 500, fontSize: 13,
                            textTransform: 'capitalize'
                          }}>
                          {p}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
                <button onClick={() => setSent(true)} className="btn btn-green btn-lg"
                  style={{ marginTop: 20 }}>
                  Send request <Icon name="ArrowRight" size={14}/>
                </button>
                <div style={{
                  marginTop: 16, padding: 10, background: 'var(--soft)',
                  fontSize: 12, color: 'var(--ink-body)', borderRadius: 6,
                  display: 'inline-flex', alignItems: 'center', gap: 8
                }}>
                  <Icon name="Tag" size={13}/>
                  Use code <span className="mono" style={{ background: '#fff', padding: '1px 6px', borderRadius: 3, fontWeight: 600, color: 'var(--red)' }}>TEXAS</span> at checkout for 15% off.
                </div>
              </>
            )}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card" style={{ padding: 24 }}>
              <Eyebrow>Address</Eyebrow>
              <div style={{ marginTop: 8, color: 'var(--ink)', fontWeight: 500 }}>
                11834 Harry Hines Blvd, Suite 111<br/>
                Dallas, TX 75234
              </div>
              <div style={{ marginTop: 8, fontSize: 13, color: 'var(--muted)' }}>
                Located in the <strong style={{ color: 'var(--ink-body)' }}>Sam Moon Center</strong> —
                Dallas's wholesale & jewelry district.
              </div>
            </div>
            <div className="card" style={{ padding: 24 }}>
              <Eyebrow>Phone</Eyebrow>
              <a href="tel:2149958578" className="display" style={{
                display: 'block', fontSize: 22, fontWeight: 700, color: 'var(--ink)', marginTop: 8
              }}>
                214-995-8578
              </a>
            </div>
            <div className="card" style={{ padding: 24 }}>
              <Eyebrow>Hours</Eyebrow>
              <div style={{ marginTop: 8, color: 'var(--ink-body)', fontSize: 14, lineHeight: 1.7 }}>
                Mon–Sat · standard retail hours<br/>
                Evenings & weekends by appointment
              </div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, fontStyle: 'italic' }}>
                {/* TODO: Confirm exact hours with client */}
              </div>
            </div>
            <div className="card" style={{
              padding: 24, background: 'var(--soft)', borderColor: '#F1DACE'
            }}>
              <Eyebrow color="var(--red)">In-home / office</Eyebrow>
              <div className="display" style={{ fontSize: 17, fontWeight: 700, marginTop: 6 }}>
                We come to you, free.
              </div>
              <p style={{ fontSize: 13, color: 'var(--ink-body)', marginTop: 6, marginBottom: 0 }}>
                Evenings & weekends are no problem. We bring samples and pick up
                your piece.
              </p>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .v-grid { grid-template-columns: 1fr !important; }
          .vf-grid { grid-template-columns: 1fr !important; }
          .vf-grid > div[style*="span 2"] { grid-column: span 1 !important; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, {
  Products, ExamplesIndex, TvFramesExamples, MirrorsExamples,
  BoardsExamples, CanvasExamples, CustomFramesExamples,
  Commercial, About, Visit,
});
})();