/* Home page */
(() => {
const { PRODUCTS, IMAGES, TRUST_SIGNALS, COMMERCIAL_TYPES } = window.SAM;

const HomeHero = () => {
  const [tvOn, setTvOn] = useState(false);
  useEffect(() => {
    const t = setInterval(() => setTvOn(v => !v), 3500);
    return () => clearInterval(t);
  }, []);
  return (
    <section style={{ paddingTop: 56, paddingBottom: 80 }}>
      <div className="container-wide" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(12, 1fr)',
        gap: 32,
        alignItems: 'center',
      }}>
        <div style={{ gridColumn: 'span 6' }} className="hero-text">
          <Eyebrow>Owner-operated · Dallas · since 2006</Eyebrow>
          <h1 className="display" style={{
            fontSize: 'clamp(40px, 6.2vw, 76px)',
            fontWeight: 800,
            margin: '18px 0 24px',
            lineHeight: 1.0,
          }}>
            Custom framing for{' '}
            <span style={{
              position: 'relative', whiteSpace: 'nowrap',
              color: 'var(--red)'
            }}>
              anything
              <svg viewBox="0 0 200 12" style={{
                position: 'absolute', left: 0, right: 0, bottom: -10, width: '100%', height: 12
              }} preserveAspectRatio="none">
                <path d="M2 8 C 50 2, 150 2, 198 8" stroke="var(--red)" strokeWidth="3" fill="none" strokeLinecap="round"/>
              </svg>
            </span>.
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--ink-body)', maxWidth: 540 }}>
            Including your TV. And mirrors. And corkboards. And 3D objects. And literally
            anything else you bring us.
          </p>
          <p style={{
            marginTop: 18, fontSize: 14, color: 'var(--muted)',
            fontStyle: 'italic', maxWidth: 540, borderLeft: '2px solid var(--hair-strong)',
            paddingLeft: 14
          }}>
            "Whether it's a diploma, a sports jersey, golf clubs, an heirloom, a needlepoint,
            a carpet, a plate, or original fine art — <strong style={{ color: 'var(--ink)' }}>
            you name it, we frame it.</strong>"
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#/products" className="btn btn-green btn-lg">
              Start Building <Icon name="ArrowRight" size={16}/>
            </a>
            <a href="#/visit" className="btn btn-ghost btn-lg">
              Get a Custom Quote
            </a>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 18, marginTop: 28,
            fontSize: 13, color: 'var(--muted)', flexWrap: 'wrap'
          }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="BadgeCheck" size={14}/> Price match guarantee
            </div>
            <span style={{ color: 'var(--hair-strong)' }}>·</span>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="Truck" size={14}/> Free in-home consults
            </div>
            <span style={{ color: 'var(--hair-strong)' }}>·</span>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="Hammer" size={14}/> On-premises hand-built
            </div>
          </div>
        </div>

        <div style={{ gridColumn: 'span 6' }} className="hero-visual">
          <div className="card" style={{
            padding: 14, position: 'relative', overflow: 'hidden'
          }}>
            <div style={{
              position: 'absolute', top: 22, left: 22, zIndex: 2,
              display: 'flex', gap: 6, alignItems: 'center'
            }}>
              <span className="pill pill-ink">Signature</span>
              <span className="pill">Frame Your TV</span>
            </div>
            <div style={{ aspectRatio: '4/3', position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0,
                opacity: tvOn ? 0 : 1, transition: 'opacity 1.2s ease'
              }}>
                <SmartImg src={IMAGES.TV_FRAME_OFF} alt="TV framed (off)"
                  label="TV frame · screen off · looks like art"/>
              </div>
              <div style={{
                position: 'absolute', inset: 0,
                opacity: tvOn ? 1 : 0, transition: 'opacity 1.2s ease'
              }}>
                <SmartImg src={IMAGES.TV_FRAME_ON} alt="TV framed (on)"
                  label="TV frame · screen on · everyday TV"/>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'radial-gradient(ellipse 55% 55% at 42% 42%, rgba(40,100,200,0.72), transparent 68%)',
                  mixBlendMode: 'screen',
                  pointerEvents: 'none',
                }}/>
              </div>
              <div style={{
                position: 'absolute', bottom: 14, left: 14, right: 14,
                display: 'flex', justifyContent: 'space-between',
                color: '#fff', textShadow: '0 1px 8px rgba(0,0,0,0.6)',
                fontSize: 13, fontWeight: 600
              }}>
                <span>{tvOn ? 'Watching →' : 'Off — looks like art →'}</span>
                <span style={{ opacity: 0.7 }}>Same TV. Same wall.</span>
              </div>
            </div>
            <div style={{
              padding: '14px 8px 4px',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
            }}>
              <div>
                <div className="display" style={{ fontSize: 17, fontWeight: 700 }}>Frame Your TV</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>
                  From <span className="mono" style={{ color: 'var(--ink)' }}>$285</span>
                  · 4-7 day turnaround
                </div>
              </div>
              <a href="#/build/tv-frame" className="btn btn-red btn-sm">
                Start Building <Icon name="ArrowRight" size={13}/>
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hero-text, .hero-visual { grid-column: span 12 !important; }
        }
      `}</style>
    </section>
  );
};

const SignatureProducts = () => (
  <section style={{ padding: '40px 0 60px' }}>
    <div className="container-wide">
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
        gap: 24
      }} className="sig-grid">
        {/* Frame Your TV */}
        <div className="card card-hover" style={{ overflow: 'hidden', position: 'relative' }}>
          <div style={{ aspectRatio: '16/10', position: 'relative' }}>
            <SmartImg src={IMAGES.TV_FRAME_WHITE} alt="TV frame white"
              label="TV with white frame · finished install"/>
            <span className="pill pill-ink" style={{ position: 'absolute', top: 18, left: 18 }}>Signature</span>
          </div>
          <div style={{ padding: '24px 26px 26px' }}>
            <h3 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
              Frame Your TV
            </h3>
            <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
              Make your wall-mounted TV look like art when it's off. Just give us
              your TV's make and model, or three simple measurements.
            </p>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginTop: 18, gap: 12
            }}>
              <a href="#/build/tv-frame" className="btn btn-red">
                Start Building <Icon name="ArrowRight" size={14}/>
              </a>
              <a href="#/examples/tv-frames" className="btn btn-link">
                See finished examples →
              </a>
            </div>
          </div>
        </div>

        {/* Custom Boards */}
        <div className="card card-hover" style={{ overflow: 'hidden', position: 'relative' }}>
          <div style={{ aspectRatio: '16/10', position: 'relative', background: '#F2EFE9' }}>
            <BoardsHero/>
            <span className="pill pill-ink" style={{ position: 'absolute', top: 18, left: 18 }}>
              Only at Sam's
            </span>
          </div>
          <div style={{ padding: '24px 26px 26px' }}>
            <h3 className="display" style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>
              Custom Boards
            </h3>
            <p style={{ marginTop: 8, color: 'var(--ink-body)' }}>
              Cork, chalk, or whiteboard — framed to look like custom art.
              For home, office, or classroom.
            </p>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginTop: 18, gap: 12
            }}>
              <a href="#/build/custom-board" className="btn btn-red">
                Start Building <Icon name="ArrowRight" size={14}/>
              </a>
              <a href="#/examples/boards" className="btn btn-link">
                See finished examples →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .sig-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

const BoardsHero = () => {
  const [tab, setTab] = useState('cork');
  useEffect(() => {
    const opts = ['cork', 'chalk', 'white'];
    let i = 0;
    const t = setInterval(() => { i = (i + 1) % 3; setTab(opts[i]); }, 2600);
    return () => clearInterval(t);
  }, []);
  const fill =
    tab === 'cork' ? { bg: 'repeating-radial-gradient(circle at 30% 30%, #C99A6A, #C99A6A 1px, #B5824D 1px, #B5824D 3px)', label: 'Cork' } :
    tab === 'chalk' ? { bg: '#1F2A28', label: 'Chalk' } :
    { bg: '#FAFAFA', label: 'Whiteboard' };
  return (
    <div style={{ position: 'absolute', inset: 24, display: 'grid', placeItems: 'center' }}>
      <div style={{
        width: '74%', aspectRatio: '4/3',
        background: '#2A1F14',
        padding: 18, borderRadius: 4,
        boxShadow: '0 18px 40px -20px rgba(0,0,0,0.4), inset 0 0 0 6px #3B2C1D',
        transition: 'all .4s ease'
      }}>
        <div style={{
          width: '100%', height: '100%',
          background: fill.bg,
          borderRadius: 2,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: tab === 'chalk' ? '#fff' : '#33291B',
          fontFamily: tab === 'chalk' ? 'Manrope' : 'JetBrains Mono',
          fontSize: 14, fontWeight: 600, letterSpacing: '0.06em',
          textShadow: tab === 'chalk' ? '0 1px 0 rgba(255,255,255,0.1)' : 'none'
        }}>
          {tab === 'chalk' && <span style={{ fontSize: 22, fontWeight: 700 }}>Hello, framed.</span>}
          {tab === 'cork' && <span style={{ background: 'rgba(255,255,255,0.7)', padding: '6px 10px', borderRadius: 4 }}>📌 cork surface</span>}
          {tab === 'white' && <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>Hello, framed.</span>}
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 14, left: 14, right: 14,
        display: 'flex', gap: 6, justifyContent: 'center'
      }}>
        {['cork', 'chalk', 'white'].map(k => (
          <button key={k} onClick={() => setTab(k)} className="pill"
            style={{
              cursor: 'pointer',
              background: tab === k ? 'var(--ink)' : '#fff',
              color: tab === k ? '#fff' : 'var(--ink)',
              border: '1px solid ' + (tab === k ? 'var(--ink)' : 'var(--hair-strong)'),
              textTransform: 'capitalize'
            }}>
            {k === 'white' ? 'whiteboard' : k}
          </button>
        ))}
      </div>
    </div>
  );
};

const ProductGrid = () => (
  <section style={{ padding: '60px 0', background: '#fff', borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)' }}>
    <div className="container-wide">
      <SectionHeader
        eyebrow="We frame anything"
        title="Seven product categories to start with."
        sub="If it's not on the list, just ask. We've framed golf clubs, carpets, plates, needlepoints, certificates and 3D objects."
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
        gap: 16
      }}>
        {PRODUCTS.map(p => (
          <a key={p.slug} href={p.builderPath || p.contactPath || '#/products'}
            className="card card-hover"
            style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 8,
                background: p.featured ? '#FFF5F0' : '#F1F0EC',
                color: p.featured ? 'var(--red)' : 'var(--ink)',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name={p.icon} size={20}/>
              </div>
              {p.badge && (
                <span className="pill" style={{ fontSize: 10 }}>{p.badge}</span>
              )}
            </div>
            <div>
              <div className="display" style={{ fontSize: 19, fontWeight: 700, color: 'var(--ink)' }}>
                {p.title}
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>
                {p.tagline}
              </div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-body)', margin: 0 }}>
              {p.description}
            </p>
            <div style={{
              marginTop: 'auto', paddingTop: 8, display: 'flex',
              justifyContent: 'space-between', alignItems: 'center'
            }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--red)' }}>
                {p.builderPath ? 'Build now →' : 'Learn more →'}
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const TrustStrip = () => (
  <section style={{ padding: '60px 0', background: 'var(--bg)' }}>
    <div className="container-wide">
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 32
      }}>
        {TRUST_SIGNALS.map(t => (
          <div key={t.title} style={{ display: 'flex', gap: 14 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: '#fff', border: '1px solid var(--hair)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--ink)', flexShrink: 0
            }}>
              <Icon name={t.icon} size={18}/>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>
                {t.title}
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>
                {t.desc}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CommercialSection = () => (
  <section style={{ padding: '80px 0', background: '#fff', borderTop: '1px solid var(--hair)' }}>
    <div className="container-wide" style={{
      display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32,
      alignItems: 'center'
    }}>
      <div className="comm-img" style={{ gridColumn: 'span 6' }}>
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{ aspectRatio: '4/3' }}>
            <SmartImg src={IMAGES.KFC_PROJECT} alt="Commercial project"
              label="Commercial project · 32-frame restaurant install"/>
          </div>
          <div style={{
            padding: '14px 18px', display: 'flex',
            justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10
          }}>
            <div style={{ fontSize: 13, color: 'var(--muted)' }}>
              Restaurant chain · 32 frames installed across 4 locations
            </div>
            <a href="#/commercial" className="btn-link" style={{
              fontSize: 13, fontWeight: 600, color: 'var(--red)'
            }}>
              See more commercial work →
            </a>
          </div>
        </div>
      </div>
      <div className="comm-text" style={{ gridColumn: 'span 6' }}>
        <Eyebrow>Trusted by businesses across Texas</Eyebrow>
        <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, margin: '12px 0 16px' }}>
          Hotels, restaurants, offices, real estate.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-body)' }}>
          From a single hotel suite to a 10,000-frame mass production for new construction —
          we've outfit restaurant chains, boutique hotels, law firms, and government offices.
          Single-piece quality at production scale.
        </p>
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 22
        }}>
          {COMMERCIAL_TYPES.map(c => (
            <span key={c} className="pill pill-soft">{c}</span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
          <a href="#/commercial" className="btn btn-red">
            Commercial services <Icon name="ArrowRight" size={14}/>
          </a>
          <a href="#/visit" className="btn btn-ghost">
            Request a commercial quote
          </a>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .comm-img, .comm-text { grid-column: span 12 !important; }
      }
    `}</style>
  </section>
);

const PriceMatchCallout = () => (
  <section style={{ padding: '80px 0' }}>
    <div className="container-wide">
      <div className="card" style={{
        background: '#1A1A1A', color: '#fff', border: 0,
        padding: 'clamp(32px, 5vw, 56px)',
        display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32,
        position: 'relative', overflow: 'hidden',
        borderRadius: 14
      }}>
        <div style={{
          position: 'absolute', right: -40, top: -40,
          width: 280, height: 280, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(185,28,28,0.3), transparent 70%)'
        }}/>
        <div style={{ gridColumn: 'span 7' }} className="pm-left">
          <Eyebrow color="#F4C4B0">Price Match Guarantee</Eyebrow>
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 4vw, 44px)', color: '#fff', margin: '12px 0 16px',
            fontWeight: 700
          }}>
            Don't fall for the 75%-off trick.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: '#D8D8D2', maxWidth: 560 }}>
            We keep our rates competitive year-round. The big-box "75% off"
            promo? Our everyday prices are often less than that "discount."
            Same value, every day, for everyone.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            <a href="#/visit" className="btn btn-red">Get a quote <Icon name="ArrowRight" size={14}/></a>
            <a href="#/about" className="btn btn-ghost" style={{ color: '#fff', borderColor: '#fff' }}>
              How we price
            </a>
          </div>
        </div>
        <div className="pm-right" style={{ gridColumn: 'span 5' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
            position: 'relative', zIndex: 2
          }}>
            <div style={{ padding: 18, background: 'rgba(255,255,255,0.05)', borderRadius: 8, border: '1px solid rgba(255,255,255,0.08)' }}>
              <div style={{ fontSize: 11, color: '#8A8A85', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                Big Box "Sale"
              </div>
              <div className="display" style={{ fontSize: 28, color: '#fff', marginTop: 8, fontWeight: 700 }}>
                $189
              </div>
              <div style={{ fontSize: 12, color: '#9A9A95', marginTop: 4, textDecoration: 'line-through' }}>
                Was $756 · 75% off
              </div>
            </div>
            <div style={{ padding: 18, background: 'rgba(185,28,28,0.15)', borderRadius: 8, border: '1px solid rgba(185,28,28,0.3)' }}>
              <div style={{ fontSize: 11, color: '#F4C4B0', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                Sam's, every day
              </div>
              <div className="display" style={{ fontSize: 28, color: '#fff', marginTop: 8, fontWeight: 700 }}>
                $165
              </div>
              <div style={{ fontSize: 12, color: '#F4C4B0', marginTop: 4 }}>
                Same piece. Real price.
              </div>
            </div>
          </div>
          <div style={{
            marginTop: 18, fontSize: 11, color: '#8A8A85',
            fontStyle: 'italic'
          }}>
            * Sample comparison · 18×24 framed art, standard moulding & glass.
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .pm-left, .pm-right { grid-column: span 12 !important; }
      }
    `}</style>
  </section>
);

const InHomeCallout = () => (
  <section style={{ padding: '60px 0' }}>
    <div className="container-wide" style={{
      display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, alignItems: 'center'
    }}>
      <div className="ih-text" style={{ gridColumn: 'span 6' }}>
        <Eyebrow>We come to you</Eyebrow>
        <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 700, margin: '12px 0 16px' }}>
          Free in-home & office consultations.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-body)' }}>
          We arrive at your home or workplace with all the samples necessary to help
          you make the right choice — and pick up what you're having framed.
          We return with your completed order ready-to-hang. <strong style={{ color: 'var(--ink)' }}>
          Or we hang it for you.</strong>
        </p>
        <div style={{
          marginTop: 18, padding: '12px 16px',
          background: 'var(--soft)', borderLeft: '3px solid var(--red)',
          fontSize: 14, color: 'var(--ink-body)'
        }}>
          <Icon name="Clock" size={14} style={{ marginRight: 6, verticalAlign: 'middle' }}/>
          Evenings & weekends are no problem.
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
          <a href="#/visit" className="btn btn-green">
            Schedule a consultation <Icon name="ArrowRight" size={14}/>
          </a>
          <a href="tel:2149958578" className="btn btn-ghost">
            <Icon name="Phone" size={14}/> 214-995-8578
          </a>
        </div>
      </div>
      <div className="ih-visual" style={{ gridColumn: 'span 6' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12
        }}>
          <div style={{ aspectRatio: '4/5', borderRadius: 10, overflow: 'hidden' }}>
            <SmartImg src={IMAGES.IN_HOME_CONSULT} alt="In-home consultation"
              label="Owner Sam at a client's home with sample mouldings"/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ aspectRatio: '1/1', borderRadius: 10, overflow: 'hidden' }}>
              <SmartImg src={IMAGES.MOULDING_SAMPLES} alt="Frame moulding samples"
                label="Sample moulding fan"/>
            </div>
            <div style={{ aspectRatio: '1/1', borderRadius: 10, overflow: 'hidden' }}>
              <SmartImg src={IMAGES.FRAME_DELIVERY} alt="Ready-to-hang delivery"
                label="Ready-to-hang delivery"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .ih-text, .ih-visual { grid-column: span 12 !important; }
      }
    `}</style>
  </section>
);

const PhotoStrip = () => (
  <section style={{ padding: '32px 0 60px' }}>
    <div className="container-wide">
      <div className="card" style={{
        padding: 'clamp(24px, 3vw, 32px)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap', background: '#FAF8F4',
        borderColor: 'var(--hair-strong)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 12, background: '#fff',
            border: '1px solid var(--hair)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ink)'
          }}>
            <Icon name="Camera" size={26}/>
          </div>
          <div>
            <div className="display" style={{ fontSize: 22, fontWeight: 700 }}>
              Old photos on your computer? Slides in a box?
            </div>
            <div style={{ color: 'var(--ink-body)', fontSize: 14, marginTop: 2 }}>
              We restore, digitize, and print on premium papers. Bring us anything.
            </div>
          </div>
        </div>
        <a href="#/products" className="btn btn-ghost-red">
          Photo Services →
        </a>
      </div>
    </div>
  </section>
);

const VisualizerCTA = () => (
  <section style={{ padding: '60px 0', background: 'var(--soft)', borderTop: '1px solid var(--hair)' }}>
    <div className="container-wide" style={{
      display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', gap: 32, flexWrap: 'wrap'
    }}>
      <div>
        <Eyebrow>Frame Visualizer</Eyebrow>
        <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 36px)', fontWeight: 700, margin: '10px 0 12px' }}>
          See it before you commit.
        </h2>
        <p style={{ color: 'var(--ink-body)', maxWidth: 480, fontSize: 16, lineHeight: 1.6 }}>
          Upload a photo of your artwork and try different frame styles, mat colors,
          and sizes — before you visit us in Dallas.
        </p>
      </div>
      <a href="visualizer.html" className="btn btn-red btn-lg">
        Open Frame Visualizer <Icon name="ArrowRight" size={16}/>
      </a>
    </div>
  </section>
);

const VisitStrip = () => (
  <section style={{ padding: '40px 0 0' }}>
    <div className="container-wide">
      <div className="card" style={{ overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr' }} >
        <div style={{ padding: 'clamp(28px, 4vw, 44px)' }}>
          <Eyebrow>Visit us</Eyebrow>
          <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 32px)', fontWeight: 700, margin: '12px 0 16px' }}>
            Sam Moon Center, Suite 111.
          </h2>
          <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-body)' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="MapPin" size={16} style={{ marginTop: 3, color: 'var(--red)' }}/>
              <div>
                11834 Harry Hines Blvd, Suite 111<br/>
                Dallas, TX 75234
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 12 }}>
              <Icon name="Phone" size={16} style={{ marginTop: 3, color: 'var(--red)' }}/>
              <a href="tel:2149958578" style={{ fontWeight: 600, color: 'var(--ink)' }}>
                214-995-8578
              </a>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 12 }}>
              <Icon name="Clock" size={16} style={{ marginTop: 3, color: 'var(--red)' }}/>
              <div>Mon–Sat · Evenings & weekends by appointment</div>
            </div>
          </div>
          <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#/visit" className="btn btn-red">Get directions <Icon name="ArrowRight" size={14}/></a>
          </div>
        </div>
        <div style={{
          background:
            "linear-gradient(135deg, #E8E5DE 0%, #D7D4CC 100%)",
          position: 'relative', minHeight: 320
        }}>
          {/* Stylized map */}
          <svg viewBox="0 0 400 320" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <defs>
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(0,0,0,0.05)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="320" fill="url(#grid)"/>
            <path d="M 0 120 L 400 80" stroke="#fff" strokeWidth="14"/>
            <path d="M 0 120 L 400 80" stroke="#C7C2B7" strokeWidth="2"/>
            <text x="40" y="116" fontSize="10" fill="#7A7A75" fontFamily="JetBrains Mono">Harry Hines Blvd</text>
            <path d="M 220 0 L 200 320" stroke="#fff" strokeWidth="10"/>
            <path d="M 220 0 L 200 320" stroke="#C7C2B7" strokeWidth="1.5"/>
            <path d="M 0 230 L 400 220" stroke="#fff" strokeWidth="6"/>
            <rect x="160" y="140" width="120" height="60" fill="#1A1A1A" rx="2"/>
            <text x="220" y="174" fontSize="11" fill="#fff" textAnchor="middle" fontFamily="Inter" fontWeight="600">SAM MOON</text>
            <text x="220" y="188" fontSize="9" fill="#9A9A95" textAnchor="middle" fontFamily="Inter">CENTER</text>
            {/* pin */}
            <g transform="translate(216, 160)">
              <circle r="14" fill="var(--red)"/>
              <circle r="5" fill="#fff"/>
            </g>
          </svg>
          <div style={{
            position: 'absolute', bottom: 12, right: 12,
            background: 'rgba(255,255,255,0.9)', padding: '4px 10px',
            fontSize: 11, borderRadius: 4, color: 'var(--muted)',
            fontFamily: 'JetBrains Mono'
          }}>
            32.91°N · 96.83°W
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .card > div:first-child + div { display: none; }
      }
    `}</style>
  </section>
);

const Home = () => (
  <div className="page-fade">
    <HomeHero/>
    <SignatureProducts/>
    <ProductGrid/>
    <TrustStrip/>
    <CommercialSection/>
    <PriceMatchCallout/>
    <InHomeCallout/>
    <PhotoStrip/>
    <VisualizerCTA/>
    <VisitStrip/>
  </div>
);

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