// ============================================================================
//  SHOP CONTACT INFO (single source of truth for the whole page)
//  Verified 2026-07-29 against parkercoinshop.com, Yelp, and the BBB profile
//  for Parker Coin and Bullion, LLC.
// ============================================================================
const CONTACT = {
  name:       'Parker Coin and Bullion',
  phone:      '(303) 578-8288',
  phoneHref:  'tel:+13035788288',
  // The shop's email deliberately does NOT appear here or anywhere the browser
  // can read (harvester bots scrape pages and public JSON for addresses). The
  // contact form's recipient lives server-side in data/settings.json, which
  // the web server blocks from direct fetches; edit it via /admin/.
  street:     '11020 S Pikes Peak Dr, Ste 107',
  cityLine:   'Parker, CO 80138',
  mapsUrl:    'https://maps.google.com/?q=11020+S+Pikes+Peak+Dr+Ste+107+Parker+CO+80138',
  hoursLine:  'Mon-Fri · 11am to 4:30pm',
  closedLine: 'Closed Sat & Sun',
};

// Defaults for the owner-editable bits. The live values come from
// data/content.json (edited through /admin/) and are merged over these, so a
// missing or broken file changes nothing.
const DEFAULT_CHIPS = ['American Silver Eagles', 'American Gold Eagles', 'Gold Buffalos', 'Canadian Maple Leafs', 'Silver rounds & bars', '90% U.S. silver coins', 'Morgan & Peace dollars', 'Rare & collectible coins', 'Estate collections'];
const DEFAULT_BUY_NOTE = 'Please note: we do not buy jewelry or scrap gold.';

// ============================================================================
//  NAV SCROLLING
//  The browser's native behavior:'smooth' moves at a fixed clip that reads as
//  an abrupt jump over long distances (hero down to contact). glideTo animates
//  the scroll itself: ease-in-out, duration scaled by distance, cancelled the
//  moment the visitor scrolls on their own, instant under reduced motion.
// ============================================================================
let glideFrame = 0;
const cancelGlide = () => cancelAnimationFrame(glideFrame);
function glideTo(top) {
  cancelGlide();
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    window.scrollTo(0, top);
    return;
  }
  const start = window.scrollY;
  const dist = top - start;
  if (Math.abs(dist) < 2) return;
  const duration = Math.min(1800, 750 + Math.abs(dist) * 0.4);
  window.addEventListener('wheel', cancelGlide, { passive: true, once: true });
  window.addEventListener('touchstart', cancelGlide, { passive: true, once: true });
  let t0 = null;
  const step = (ts) => {
    if (t0 === null) t0 = ts;
    const p = Math.min(1, (ts - t0) / duration);
    const eased = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
    window.scrollTo(0, start + dist * eased);
    if (p < 1) glideFrame = requestAnimationFrame(step);
  };
  glideFrame = requestAnimationFrame(step);
}

// ============================================================================
//  LIVE SPOT PRICES
//  Provider: api.gold-api.com (free, no API key, CORS-open, 1 request per
//  metal). Fallback options if that service ever disappears: goldapi.io
//  (100 req/day free, key via x-access-token header) or metalpriceapi.com
//  (100 req/month free, key in the query string).
// ============================================================================
const SPOT_CONFIG = {
  enabled: true,
  // Refresh cadence. The provider updates its numbers roughly once a minute,
  // so faster than 60000 buys nothing. One fetch per metal per refresh.
  pollMs:  60000,
  symbols: { gold: 'XAU', silver: 'XAG', platinum: 'XPT' },
  url: (sym) => `https://api.gold-api.com/price/${sym}`,
};

// Variation 1 v2: Refined Classic: fluid + atmospheric purple-blue fades + more photography
// Performance-tuned: parallax uses refs + rAF (no React rerenders); reveals use one-shot IO + CSS class.
const RefinedClassicV2 = () => {
  const t = window.PCB_TOKENS;
  const [hovered, setHovered] = React.useState(null);
  // spotPrices shape: { gold, silver, platinum, palladium, pctChange: {…} } | null
  const [spotPrices, setSpotPrices] = React.useState(null);
  const [spotLive, setSpotLive] = React.useState(false); // true once first successful fetch
  const [spotMisses, setSpotMisses] = React.useState(0); // consecutive failed polls before first success

  // Owner-editable content, fetched once and merged over the defaults above.
  const [siteContent, setSiteContent] = React.useState(null);
  React.useEffect(() => {
    fetch('data/content.json')
      .then(r => (r.ok ? r.json() : null))
      .then(json => { if (json && typeof json === 'object') setSiteContent(json); })
      .catch(() => {});
  }, []);
  const content = siteContent || {};
  const C = {
    ...CONTACT,
    hoursLine:  content.hoursLine  || CONTACT.hoursLine,
    closedLine: content.closedLine || CONTACT.closedLine,
  };
  const CHIPS = (Array.isArray(content.chips) && content.chips.length) ? content.chips : DEFAULT_CHIPS;
  const BUY_NOTE = content.buyNote || DEFAULT_BUY_NOTE;
  const ANNOUNCEMENT = typeof content.announcement === 'string' ? content.announcement.trim() : '';

  // Lead attribution: remember how this visitor arrived (a ?src= or utm link,
  // or an outside referrer), first touch wins for the tab. The value rides
  // along with the contact form so the shop can see which channel a lead
  // came from.
  const leadSource = React.useMemo(() => {
    try {
      const q = new URLSearchParams(window.location.search);
      const fromUrl = (q.get('src') || q.get('utm_source') || '').slice(0, 120);
      const stored = sessionStorage.getItem('pcb_src');
      if (stored) return stored;
      const ref = document.referrer && document.referrer.indexOf(window.location.hostname) === -1 ? document.referrer : '';
      const src = fromUrl || ref || 'direct';
      sessionStorage.setItem('pcb_src', src);
      return src;
    } catch (e) { return 'direct'; }
  }, []);

  // ?item= arrives from a collectibles listing CTA: prefill the interest field
  // and land the visitor on the contact form.
  const itemParam = React.useMemo(() => {
    try { return (new URLSearchParams(window.location.search).get('item') || '').slice(0, 120); } catch (e) { return ''; }
  }, []);

  const heroParallaxRef = React.useRef(null);
  const goldBarsParallaxRef = React.useRef(null);
  const goldBarsSectionRef = React.useRef(null);

  // Spot price polling, driven by SPOT_CONFIG above. Each metal is fetched
  // independently so one failed symbol never blanks the others.
  React.useEffect(() => {
    if (!SPOT_CONFIG.enabled) return;

    const fetchSpot = async () => {
      const entries = Object.entries(SPOT_CONFIG.symbols);
      const results = await Promise.allSettled(entries.map(async ([key, sym]) => {
        const res = await fetch(SPOT_CONFIG.url(sym));
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        if (typeof json.price !== 'number') throw new Error('no price field');
        return [key, +json.price.toFixed(2)];
      }));
      const ok = results.filter(r => r.status === 'fulfilled').map(r => r.value);
      if (ok.length === 0) {
        console.warn('[Parker Coin] Spot price fetch failed for all metals');
        // keep any previous data; count misses so the UI can stop saying
        // "Connecting" when the feed is truly unreachable
        setSpotMisses(m => m + 1);
        return;
      }
      setSpotPrices(prev => {
        const next = { gold: null, silver: null, platinum: null, pctChange: {}, ...(prev || {}) };
        ok.forEach(([key, price]) => { next[key] = price; });
        return next;
      });
      setSpotLive(true);
    };

    fetchSpot();
    const id = setInterval(fetchSpot, SPOT_CONFIG.pollMs);
    return () => clearInterval(id);
  }, []);

  // Single rAF-driven scroll handler: writes transforms directly to DOM. Zero rerenders.
  React.useEffect(() => {
    let raf = 0;
    let pending = false;
    const update = () => {
      pending = false;
      const y = window.scrollY;
      if (heroParallaxRef.current) {
        heroParallaxRef.current.style.transform = `translate3d(0, ${y * 0.18}px, 0)`;
      }
      if (goldBarsParallaxRef.current && goldBarsSectionRef.current) {
        const rect = goldBarsSectionRef.current.getBoundingClientRect();
        const offset = (window.innerHeight / 2 - (rect.top + rect.height / 2)) * 0.12;
        goldBarsParallaxRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
      }
    };
    const onScroll = () => {
      if (pending) return;
      pending = true;
      raf = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);

  // One-shot reveal: IO toggles a class once, then disconnects. No React state churn.
  const Reveal = React.useMemo(() => ({ children, delay = 0 }) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      const el = ref.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95) {
        requestAnimationFrame(() => el.classList.add('is-revealed'));
        return;
      }
      const io = new IntersectionObserver(([e]) => {
        if (e.isIntersecting) { el.classList.add('is-revealed'); io.disconnect(); }
      }, { threshold: 0.05, rootMargin: '0px 0px -40px 0px' });
      io.observe(el);
      return () => io.disconnect();
    }, []);
    return (
      <div ref={ref} className="reveal" style={{ transitionDelay: `${delay}ms` }}>
        {children}
      </div>
    );
  }, []);

  const METAL_META = [
    { sym: 'Au', name: 'Gold',      key: 'gold'      },
    { sym: 'Ag', name: 'Silver',    key: 'silver'    },
    { sym: 'Pt', name: 'Platinum',  key: 'platinum'  },
  ];

  // Open/closed pill in the nav, computed live for the shop's timezone
  const shopStatus = (() => {
    const now = new Date(new Date().toLocaleString('en-US', { timeZone: 'America/Denver' }));
    const day = now.getDay(); // 0 = Sunday .. 6 = Saturday
    const mins = now.getHours() * 60 + now.getMinutes();
    const open = day >= 1 && day <= 5 && mins >= 11 * 60 && mins < 16 * 60 + 30;
    return open
      ? { open: true,  label: 'Open now · until 4:30' }
      : { open: false, label: 'Mon-Fri · 11 to 4:30' };
  })();

  const NAV_LINKS = [
    { label: 'Visit',       id: 'section-visit'   },
    { label: 'What we buy', id: 'section-buy'     },
    { label: 'Estates',     id: 'section-estates' },
    { label: 'Sales tax',   id: 'section-tax'     },
    { label: 'Contact',     id: 'section-contact' },
  ];

  // Nav clicks land partway into each section's top padding so the heading
  // sits comfortably near the top of the viewport instead of a padding void.
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const pad = parseFloat(getComputedStyle(el).paddingTop) || 0;
    const top = el.getBoundingClientRect().top + window.scrollY + pad * 0.45;
    glideTo(top);
  };

  // Deep links: /#contact (used by the estate page) and ?item= land on the
  // contact form once the page has rendered.
  React.useEffect(() => {
    const hash = (window.location.hash || '').replace('#', '');
    const target =
      hash === 'contact' ? 'section-contact'
      : hash && document.getElementById('section-' + hash) ? 'section-' + hash
      : itemParam ? 'section-contact'
      : null;
    if (!target) return;
    const tmr = setTimeout(() => scrollTo(target), 400);
    return () => clearTimeout(tmr);
  }, []);

  const wrap = { width: '100%', maxWidth: 1440, margin: '0 auto', padding: '0 clamp(20px, 5vw, 64px)' };

  // Contact form. Sole path: POST to contact.php (ships with the site, mails
  // the message with photo attachments). On failure we show the phone number
  // instead of a mailto fallback: a mailto would put the shop's real address
  // into the page for spam harvesters, which is exactly what keeping it in the
  // guarded settings.json avoids.
  const [sent, setSent] = React.useState(null); // null | 'server' | 'error'
  const [photos, setPhotos] = React.useState([]); // [{ url, name }]
  const [photoErr, setPhotoErr] = React.useState(null);

  const handlePhotos = (e) => {
    photos.forEach(p => URL.revokeObjectURL(p.url));
    const files = Array.from(e.target.files || []);
    const total = files.reduce((sum, f) => sum + f.size, 0);
    if (files.length > 4 || total > 8 * 1024 * 1024) {
      e.target.value = '';
      setPhotos([]);
      setPhotoErr('Up to 4 photos and 8MB total, please.');
      return;
    }
    setPhotoErr(null);
    setPhotos(files.map(f => ({ url: URL.createObjectURL(f), name: f.name })));
  };

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);
    if (data.get('website')) { setSent('server'); return; } // honeypot
    try {
      const res = await fetch('contact.php', { method: 'POST', body: data });
      if (res.ok) {
        const out = await res.json().catch(() => ({}));
        if (out.ok) {
          form.reset();
          photos.forEach(p => URL.revokeObjectURL(p.url));
          setPhotos([]);
          setSent('server');
          return;
        }
      }
    } catch (err) { /* server unreachable; fall through to the notice */ }
    setSent('error');
  };

  const Aurora = ({ tone = 'violet', opacity = 0.5 }) => {
    const colors = tone === 'violet'
      ? ['rgba(82, 60, 140, 0.55)', 'rgba(45, 80, 160, 0.45)', 'rgba(140, 70, 130, 0.30)']
      : ['rgba(45, 80, 160, 0.55)', 'rgba(82, 60, 140, 0.40)', 'rgba(212, 166, 74, 0.22)'];
    return (
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, opacity, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '-20%', left: '-10%', width: '60%', height: '90%', background: `radial-gradient(ellipse at center, ${colors[0]}, transparent 65%)`, filter: 'blur(60px)', animation: 'auroraDrift1 22s ease-in-out infinite alternate', willChange: 'transform' }}/>
        <div style={{ position: 'absolute', top: '20%', right: '-15%', width: '70%', height: '90%', background: `radial-gradient(ellipse at center, ${colors[1]}, transparent 65%)`, filter: 'blur(70px)', animation: 'auroraDrift2 28s ease-in-out infinite alternate', willChange: 'transform' }}/>
        <div style={{ position: 'absolute', bottom: '-20%', left: '20%', width: '60%', height: '80%', background: `radial-gradient(ellipse at center, ${colors[2]}, transparent 70%)`, filter: 'blur(80px)', animation: 'auroraDrift3 32s ease-in-out infinite alternate', willChange: 'transform' }}/>
      </div>
    );
  };

  const EdgeFade = ({ side = 'top', color = '#0f1628', height = 160 }) => (
    <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, [side]: 0, height, background: side === 'top' ? `linear-gradient(to bottom, ${color}, transparent)` : `linear-gradient(to top, ${color}, transparent)`, pointerEvents: 'none', zIndex: 2 }}/>
  );

  const navLinkStyle = (k) => ({
    fontFamily: 'Inter, sans-serif', fontSize: 14, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: hovered === k ? t.goldBright : '#fff',
    cursor: 'pointer', transition: 'color 200ms', fontWeight: 500,
    padding: '0 0 4px 0',
    background: 'none',
    textShadow: '0 1px 10px rgba(8, 17, 29, 0.6)',
    borderTop: 'none', borderLeft: 'none', borderRight: 'none',
    borderBottom: hovered === k ? `1px solid ${t.goldBright}` : '1px solid transparent',
  });

  return (
    <div style={{ width: '100%', fontFamily: 'Inter, sans-serif', color: t.ink, background: t.paper, overflow: 'hidden' }}>

      <style>{`
        @keyframes auroraDrift1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(8%, 6%, 0) scale(1.15); } }
        @keyframes auroraDrift2 { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 100% { transform: translate3d(-6%, -8%, 0) scale(1); } }
        @keyframes auroraDrift3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, -10%, 0) scale(1.2); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        @keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(212,166,74,0.3), 0 0 20px rgba(212,166,74,0.15); } 50% { box-shadow: 0 0 0 1px rgba(212,166,74,0.5), 0 0 40px rgba(212,166,74,0.3); } }
        .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
        .reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
        @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
        nav button:focus-visible { outline: 2px solid rgba(232,201,119,0.7); outline-offset: 4px; }
        nav button:focus:not(:focus-visible) { outline: none; }

        .spot-metals { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
        .spot-metal { display: flex; align-items: baseline; gap: 10px; }
        @media (max-width: 640px) {
          .spot-bar { padding: 12px 20px !important; }
          .spot-metals { display: flex; justify-content: space-around; gap: 8px; width: 100%; }
          .spot-metal { gap: 6px; min-width: 0; }
          .spot-metal .spot-metal-name { display: none; }
          .spot-metal .spot-metal-sym { font-size: 17px !important; }
          .spot-metal .spot-metal-price { font-size: 18px !important; }
          .hero-info-strip { display: none; }
          .hero-nav-logo { order: 1; }
          .hero-nav-hours { order: 2; }
          .hero-nav-links { order: 3; flex-basis: 100%; justify-content: center; }
        }
      `}</style>

      {/* LIVE SPOT TICKER: just the three metals, centered */}
      <div className="spot-bar" style={{ background: t.navyDeep, color: '#fff', padding: '10px clamp(20px, 5vw, 64px)', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 14, letterSpacing: '0.06em', borderBottom: `1px solid ${t.gold}` }}>
        <div className="spot-metals">
          {METAL_META.map((m) => {
            const price  = spotPrices ? spotPrices[m.key] : null;
            const pct    = spotPrices?.pctChange?.[m.key] ?? null;
            const up     = pct !== null && pct >= 0;
            return (
              <div key={m.sym} className="spot-metal">
                <span className="spot-metal-sym" style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 18, color: t.goldBright, fontStyle: 'italic' }}>{m.sym}</span>
                <span className="spot-metal-name" style={{ color: '#a6b0bf', fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{m.name}</span>
                {price !== null
                  ? <>
                      <span className="spot-metal-price" style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 20, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>${price.toFixed(2)}</span>
                      {pct !== null && pct !== 0 && (
                        <span style={{ fontSize: 13, color: up ? '#7dd99a' : '#e09b7d' }}>{up ? '▲' : '▼'} {Math.abs(pct).toFixed(2)}%</span>
                      )}
                    </>
                  : <span className="spot-metal-price" style={{ fontSize: 15, color: '#7a8597', letterSpacing: 0 }}>···</span>
                }
              </div>
            );
          })}
        </div>
      </div>

      {/* ANNOUNCEMENT: owner-editable one-liner, hidden when empty */}
      {ANNOUNCEMENT && (
        <div style={{ background: t.gold, color: t.navyDeep, textAlign: 'center', padding: '10px clamp(20px, 5vw, 64px)', fontSize: 15, fontWeight: 600, letterSpacing: '0.04em' }}>
          {ANNOUNCEMENT}
        </div>
      )}

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: 'clamp(560px, 85vh, 820px)', overflow: 'hidden', background: t.navy }}>
        {/* Oversized via inset so the parallax translate never exposes an edge;
            no transform scale, which kept the photo from rendering at native
            crispness (composited rescale). */}
        <div ref={heroParallaxRef} style={{ position: 'absolute', inset: '-6% 0', willChange: 'transform' }}>
          <window.PhotoMountainHero/>
        </div>
        <Aurora tone="violet" opacity={0.7}/>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 30%, rgba(232,201,119,0.16), transparent 60%)' }}/>

        <nav className="hero-nav" style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px clamp(20px, 5vw, 64px)', flexWrap: 'wrap', gap: 16 }}>
          <button className="hero-nav-logo" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', filter: 'drop-shadow(0 2px 10px rgba(8, 17, 29, 0.8))' }} onClick={() => glideTo(0)}>
            <window.PCBLogo color="#fff" size="md"/>
          </button>
          {/* Frosted glass pills lift the nav off the busy crystal photo */}
          <div className="hero-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(16px, 3vw, 36px)', flexWrap: 'wrap', padding: '12px clamp(18px, 2.5vw, 30px)', borderRadius: 999, background: 'rgba(8, 17, 29, 0.55)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', border: '1px solid rgba(212, 166, 74, 0.32)', boxShadow: '0 4px 24px rgba(8, 17, 29, 0.35)' }}>
            {NAV_LINKS.map(({ label, id }) => (
              <button key={label} style={navLinkStyle(label)}
                onMouseEnter={() => setHovered(label)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => scrollTo(id)}>{label}</button>
            ))}
          </div>
          <div className="hero-nav-hours" style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#fff', fontSize: 15, padding: '10px 18px', borderRadius: 999, background: 'rgba(8, 17, 29, 0.55)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', border: '1px solid rgba(212, 166, 74, 0.32)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: shopStatus.open ? '#7dd99a' : '#7a8597', boxShadow: shopStatus.open ? '0 0 8px #7dd99a' : 'none' }}/>
            <span style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{shopStatus.label}</span>
          </div>
        </nav>

        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 clamp(20px, 5vw, 64px)', zIndex: 3 }}>
          <Reveal delay={100}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28, justifyContent: 'center' }}>
              <span style={{ width: 'clamp(24px, 5vw, 48px)', height: 1, background: t.gold }}/>
              <span style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.36em', textTransform: 'uppercase', color: t.goldBright, fontWeight: 500 }}>Parker · Colorado</span>
              <span style={{ width: 'clamp(24px, 5vw, 48px)', height: 1, background: t.gold }}/>
            </div>
          </Reveal>
          <Reveal delay={250}>
            <h1 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(48px, 9vw, 112px)', fontWeight: 500, color: '#fff', margin: 0, lineHeight: 1, letterSpacing: '-0.01em' }}>
              Parker Coin
            </h1>
          </Reveal>
          <Reveal delay={400}>
            <h1 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(48px, 9vw, 112px)', fontWeight: 300, fontStyle: 'italic', color: '#fff', margin: 0, lineHeight: 1.05, letterSpacing: '-0.01em' }}>
              <span style={{ fontStyle: 'normal', fontWeight: 500 }}>& </span>Bullion
            </h1>
          </Reveal>
          <Reveal delay={600}>
            <p style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(18px, 2vw, 24px)', fontStyle: 'italic', color: '#cfd6e0', marginTop: 24, fontWeight: 300 }}>
              Colorado&rsquo;s trusted hand for gold, silver &amp; rare coins.
            </p>
          </Reveal>
        </div>

        <div className="hero-info-strip" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, borderTop: `1px solid ${t.rule}`, background: 'rgba(8, 17, 29, 0.72)', backdropFilter: 'blur(12px)', zIndex: 4 }}>
          <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', padding: '20px clamp(20px, 5vw, 64px)' }}>
            {[
              ['No sales tax', 'on any size order'],
              ['Best prices paid', 'gold · silver · rare'],
              ['Walk-ins welcome', '11020 S Pikes Peak Dr'],
              ['Quick turnaround', 'buy or sell · any size'],
            ].map(([h, s], i) => (
              <div key={i} style={{ borderLeft: i === 0 ? 'none' : `1px solid ${t.ruleSoft}`, paddingLeft: i === 0 ? 0 : 32 }}>
                <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 20, color: t.goldBright, fontWeight: 500 }}>{h}</div>
                <div style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a6b0bf', marginTop: 4 }}>{s}</div>
              </div>
            ))}
          </div>
        </div>

        <EdgeFade side="bottom" color={t.paper} height={120}/>
      </section>

      {/* NOW OPEN */}
      <section id="section-visit" style={{ padding: 'clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px)', background: t.paper, position: 'relative' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 'clamp(40px, 6vw, 72px)', alignItems: 'center' }}>
          <Reveal>
            <div style={{ position: 'relative' }}>
              <window.PhotoShop style={{ borderRadius: 2, aspectRatio: '4 / 3', objectPosition: 'center 12%' }}/>
              <div style={{ position: 'absolute', inset: 0, border: `1px solid ${t.rule}`, pointerEvents: 'none' }}/>
              <div style={{ position: 'absolute', bottom: 24, left: 24, padding: '10px 16px', background: t.paper, borderLeft: `2px solid ${t.gold}` }}>
                <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 15, color: t.navy, letterSpacing: '0.1em', textTransform: 'uppercase' }}>The Shop · Parker, Colorado</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div>
              <div style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase', color: t.goldDeep, marginBottom: 20, fontWeight: 600 }}>Now Open</div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 400, color: t.navy, margin: 0, lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                In Parker, Colorado: <span style={{ fontStyle: 'italic', color: t.goldDeep }}>walk-ins welcome.</span>
              </h2>
              <div style={{ height: 1, background: t.rule, margin: '32px 0', width: 80 }}/>
              <p style={{ fontSize: 18, lineHeight: 1.7, color: '#3a3530', maxWidth: 480 }}>
                We buy and sell gold and silver bullion, and coins of every era. Whether you&rsquo;re settling an estate, building a position, or curious about a single piece passed down, we offer honest evaluations and competitive prices. No pressure, no theatrics.
              </p>

              <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 24, maxWidth: 480 }}>
                {[
                  { k: 'Hours',   v: C.hoursLine,       sub: C.closedLine,       href: null },
                  { k: 'Address', v: CONTACT.street,    sub: CONTACT.cityLine,   href: CONTACT.mapsUrl },
                  { k: 'Phone',   v: CONTACT.phone,     sub: 'Call the shop',    href: CONTACT.phoneHref },
                ].map(({ k, v, sub, href }) => (
                  <div key={k} style={{ borderTop: `1px solid ${t.rule}`, paddingTop: 16 }}>
                    <div style={{ fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: t.goldDeep, fontWeight: 600 }}>{k}</div>
                    {href
                      ? <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer"
                          style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 22, color: t.navy, marginTop: 6, display: 'block', textDecoration: 'none', transition: 'color 150ms' }}
                          onMouseEnter={e => e.currentTarget.style.color = t.goldDeep}
                          onMouseLeave={e => e.currentTarget.style.color = t.navy}>{v}</a>
                      : <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 22, color: t.navy, marginTop: 6 }}>{v}</div>
                    }
                    <div style={{ fontSize: 14, color: '#7a7066', marginTop: 2 }}>{sub}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* PHOTO TRIPLET */}
      <section style={{ padding: '0 0 clamp(80px, 10vw, 140px)', background: t.paper, position: 'relative' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'clamp(12px, 1.5vw, 24px)' }}>
          <Reveal delay={0}><window.PhotoCases style={{ aspectRatio: '4 / 5', height: '100%' }}/></Reveal>
          <Reveal delay={120}><window.PhotoInterior style={{ aspectRatio: '4 / 5', height: '100%' }}/></Reveal>
          <Reveal delay={240}><window.PhotoSpread style={{ aspectRatio: '4 / 5', height: '100%' }}/></Reveal>
        </div>
      </section>

      {/* TAX FREE: violet atmospheric band */}
      <section id="section-tax" style={{ padding: 'clamp(80px, 12vw, 140px) 0', background: '#0f1628', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <Aurora tone="violet" opacity={0.85}/>
        <EdgeFade side="top" color={t.paper} height={120}/>
        <EdgeFade side="bottom" color="#0a1020" height={120}/>

        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'center', position: 'relative', zIndex: 3 }}>
          <Reveal>
            <div>
              <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 32 }}>
                <window.Coin size={56} label="Au"/>
                <window.Coin size={48} label="Ag" style={{ marginLeft: -16 }}/>
                <window.Coin size={42} label="Pt" style={{ marginLeft: -16 }}/>
              </div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(44px, 6vw, 80px)', fontWeight: 400, margin: 0, lineHeight: 1.0, color: '#fff' }}>
                Any size order,
              </h2>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(44px, 6vw, 80px)', fontStyle: 'italic', fontWeight: 300, margin: 0, lineHeight: 1.0, color: t.goldBright }}>
                sales tax free.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: '#cfd6e0', marginBottom: 24 }}>
                Colorado exempts investment-grade bullion and numismatic coins from state sales tax, a meaningful saving on every transaction, whether you&rsquo;re acquiring a single Eagle or a multi-ounce position.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: '#cfd6e0', marginBottom: 32 }}>
                We&rsquo;ll give you a fair, current quote based on live spot prices the day you visit.
              </p>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <button
                  onClick={() => scrollTo('section-contact')}
                  style={{ padding: '14px 28px', background: t.gold, color: t.navy, border: 'none', fontFamily: 'Inter', fontSize: 14, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer', transition: 'transform 200ms', animation: 'glow 4s ease-in-out infinite' }}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>Plan a visit</button>
                <a href={CONTACT.phoneHref}
                  style={{ padding: '14px 28px', background: 'transparent', color: '#fff', border: `1px solid ${t.gold}`, fontFamily: 'Inter', fontSize: 14, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', transition: 'background 200ms', textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'rgba(212,166,74,0.12)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>Call the shop</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* GOLD BARS PARALLAX BAND */}
      <section ref={goldBarsSectionRef} style={{ position: 'relative', height: 'clamp(360px, 50vh, 520px)', overflow: 'hidden', background: '#0a1020' }}>
        <div ref={goldBarsParallaxRef} style={{ position: 'absolute', inset: '-10% 0', willChange: 'transform' }}>
          <window.PhotoGoldBars style={{ height: '100%', minHeight: '100%', objectFit: 'cover', opacity: 0.7 }}/>
        </div>
        <Aurora tone="violet" opacity={0.55}/>
        <EdgeFade side="top" color="#0a1020" height={160}/>
        <EdgeFade side="bottom" color={t.paper} height={160}/>

        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3 }}>
          <Reveal>
            <div style={{ ...wrap, textAlign: 'center' }}>
              <div style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.36em', textTransform: 'uppercase', color: t.goldBright, fontWeight: 600, marginBottom: 24 }}>Bullion · Bars · Coins</div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(40px, 5.5vw, 72px)', fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                Real metal. <span style={{ fontStyle: 'italic', color: t.goldBright }}>Real value.</span>
              </h2>
              <p style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(17px, 1.7vw, 21px)', color: '#cfd6e0', marginTop: 20, fontStyle: 'italic', maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
                Every piece weighed, tested, and quoted in front of you.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* PRICES PAID */}
      <section id="section-buy" style={{ padding: 'clamp(80px, 12vw, 140px) 0', background: t.paper, position: 'relative' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'center' }}>
          <Reveal>
            <div>
              <div style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase', color: t.goldDeep, marginBottom: 20, fontWeight: 600 }}>What we buy</div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 400, color: t.navy, margin: 0, lineHeight: 1.1 }}>
                A local Parker store with <span style={{ fontStyle: 'italic', color: t.goldDeep }}>competitive prices.</span>
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: '#3a3530', marginTop: 28, maxWidth: 480 }}>
                We buy and sell gold, silver, coins, and bullion: best prices paid. Bring in a single piece, an inheritance, or a lifelong collection. We&rsquo;ll quote on the spot and pay the same day.
              </p>
              <div style={{ marginTop: 40, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {CHIPS.map(c => (
                  <span key={c} style={{ padding: '8px 14px', border: `1px solid ${t.rule}`, fontSize: 14, color: t.navy, letterSpacing: '0.04em', transition: 'all 200ms', cursor: 'default' }}
                    onMouseEnter={e => { e.currentTarget.style.background = t.navy; e.currentTarget.style.color = t.goldBright; e.currentTarget.style.borderColor = t.navy; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = t.navy; e.currentTarget.style.borderColor = t.rule; }}>{c}</span>
                ))}
              </div>
              <p style={{ fontSize: 15, color: '#7a7066', marginTop: 20, fontStyle: 'italic' }}>
                {BUY_NOTE}
              </p>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <window.PhotoCrystal style={{ borderRadius: 2, aspectRatio: '1 / 1' }}/>
          </Reveal>
        </div>
      </section>

      {/* ESTATES & LARGE COLLECTIONS */}
      <section id="section-estates" style={{ position: 'relative', padding: 'clamp(80px, 12vw, 140px) 0', color: '#fff', overflow: 'hidden', backgroundImage: 'linear-gradient(rgba(15, 22, 40, 0.87), rgba(15, 22, 40, 0.80)), url(images/colorado-mountains.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 30%' }}>
        <EdgeFade side="top" color={t.paper} height={120}/>
        <EdgeFade side="bottom" color="#0f1628" height={120}/>
        <div style={{ ...wrap, position: 'relative', zIndex: 3, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'center' }}>
          <Reveal>
            <div>
              <div style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase', color: t.goldBright, marginBottom: 20, fontWeight: 600 }}>Estates &amp; large collections</div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.1 }}>
                Settling an estate? <span style={{ fontStyle: 'italic', color: t.goldBright }}>Bring it to Parker.</span>
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: '#cfd6e0', marginTop: 28, maxWidth: 520 }}>
                Coins and precious metals are often the hardest part of an estate to value. We go through the whole collection with you at the counter, weigh and test every piece, and quote it in front of you. Cash the same day, and no obligation to sell.
              </p>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 36 }}>
                <a href="estate-liquidation/"
                  style={{ padding: '14px 28px', background: t.gold, color: t.navy, border: 'none', fontFamily: 'Inter', fontSize: 14, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer', transition: 'transform 200ms', textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>How it works</a>
                <button
                  onClick={() => scrollTo('section-contact')}
                  style={{ padding: '14px 28px', background: 'transparent', color: '#fff', border: `1px solid ${t.gold}`, fontFamily: 'Inter', fontSize: 14, letterSpacing: '0.24em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', transition: 'background 200ms' }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'rgba(212,166,74,0.12)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>Send photos</button>
              </div>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ border: `1px solid ${t.rule}`, background: 'rgba(8, 17, 29, 0.55)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', padding: 'clamp(28px, 3.5vw, 44px)' }}>
              <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 26, color: t.goldBright, fontWeight: 500 }}>Who we work with</div>
              {[
                'Executors & families with inherited collections',
                'Estate sale companies routing coins to a dealer quote',
                'Attorneys & fiduciaries who need a transparent process',
                'Downsizing households with decades of tubes and albums',
              ].map(x => (
                <div key={x} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginTop: 18, fontSize: 17, color: '#cfd6e0', lineHeight: 1.5 }}>
                  {/* CSS-drawn diamond: Inter has no U+25C6 glyph */}
                  <span aria-hidden="true" style={{ width: 7, height: 7, background: t.gold, transform: 'rotate(45deg)', flex: 'none', marginTop: 9 }}/>{x}
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* CONTACT */}
      <section id="section-contact" style={{ padding: 'clamp(80px, 12vw, 140px) 0', background: '#0f1628', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <Aurora tone="violet" opacity={0.7}/>
        <EdgeFade side="top" color="#0f1628" height={140}/>

        <div style={{ ...wrap, position: 'relative', zIndex: 3, maxWidth: 980 }}>
          <Reveal>
            <div style={{ textAlign: 'center', marginBottom: 60 }}>
              <div style={{ fontFamily: 'Inter', fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase', color: t.goldBright, marginBottom: 20, fontWeight: 600 }}>Get in touch</div>
              <h2 style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 'clamp(40px, 5.5vw, 64px)', fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.05 }}>
                Tell us what you&rsquo;d like to <span style={{ fontStyle: 'italic', color: t.goldBright }}>buy or sell.</span>
              </h2>
              <p style={{ fontSize: 18, color: '#cfd6e0', marginTop: 16, fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic' }}>
                We typically reply within one business day.
              </p>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <form onSubmit={handleFormSubmit} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 28 }}>
              {[
                ['Name',             'Your full name',                  'text',  'name'    ],
                ['Email',            'you@example.com',                 'email', 'email'   ],
                ['Phone',            '(optional)',                      'tel',   'phone'   ],
                ["I'm interested in",'Buying / Selling / Just curious', 'text',  'interest'],
              ].map(([label, ph, type, name]) => (
                <label key={name} style={{ display: 'block' }}>
                  <span style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: t.goldBright, fontWeight: 600 }}>{label}</span>
                  <input type={type} name={name} placeholder={ph}
                    defaultValue={name === 'interest' && itemParam ? `Asking about: ${itemParam}` : undefined}
                    style={{
                    display: 'block', width: '100%', marginTop: 10, padding: '14px 0',
                    border: 'none', borderBottom: `1px solid ${t.rule}`, background: 'transparent',
                    fontSize: 18, fontFamily: 'inherit', color: '#fff', outline: 'none',
                    transition: 'border-color 200ms',
                  }}
                    onFocus={e => e.currentTarget.style.borderBottomColor = t.goldBright}
                    onBlur={e => e.currentTarget.style.borderBottomColor = t.rule}/>
                </label>
              ))}
              <label style={{ display: 'block', gridColumn: '1 / -1' }}>
                <span style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: t.goldBright, fontWeight: 600 }}>Tell us a bit more</span>
                <textarea name="message" rows={4} placeholder="What you have, what you're looking for, or any questions." style={{
                  display: 'block', width: '100%', marginTop: 10, padding: '14px 0',
                  border: 'none', borderBottom: `1px solid ${t.rule}`, background: 'transparent',
                  fontSize: 18, fontFamily: 'inherit', color: '#fff', outline: 'none', resize: 'none',
                  transition: 'border-color 200ms',
                }}
                  onFocus={e => e.currentTarget.style.borderBottomColor = t.goldBright}
                  onBlur={e => e.currentTarget.style.borderBottomColor = t.rule}/>
              </label>

              {/* honeypot: hidden from humans, bots fill it and get ignored */}
              <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: -9999, width: 1, height: 1, opacity: 0 }}/>
              {/* lead attribution: which channel brought this visitor in */}
              <input type="hidden" name="source" value={leadSource}/>

              <div style={{ gridColumn: '1 / -1' }}>
                <span style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: t.goldBright, fontWeight: 600 }}>Photos of your items (optional)</span>
                <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                  <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 22px', border: `1px dashed ${t.gold}`, borderRadius: 2, cursor: 'pointer', color: '#cfd6e0', fontSize: 15, transition: 'background 200ms' }}
                    onMouseEnter={e => { e.currentTarget.style.background = 'rgba(212, 166, 74, 0.10)'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
                    <input type="file" name="photos[]" accept="image/*" multiple style={{ display: 'none' }} onChange={handlePhotos}/>
                    + Add photos
                  </label>
                  {photos.map(p => (
                    <img key={p.url} src={p.url} alt={p.name} style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 2, border: `1px solid ${t.rule}` }}/>
                  ))}
                </div>
                <div style={{ fontSize: 14, color: photoErr ? '#e09b7d' : '#7a8597', marginTop: 8 }}>
                  {photoErr || 'Optional: you can send a message without pictures. Up to 4 images, 8MB total.'}
                </div>
              </div>

              <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24, gap: 16, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 15, color: '#a6b0bf', fontStyle: 'italic', fontFamily: '"Cormorant Garamond", serif' }}>
                  We never share your details. No spam, ever.
                </span>
                <button type="submit" style={{
                  padding: '16px 40px', background: t.gold, color: t.navyDeep,
                  border: 'none', fontFamily: 'Inter', fontSize: 14, letterSpacing: '0.28em',
                  textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer',
                  transition: 'transform 200ms, background 200ms', animation: 'glow 4s ease-in-out infinite',
                }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.background = t.goldBright; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.background = t.gold; }}>Send message →</button>
              </div>

              {sent && (
                <div style={{ gridColumn: '1 / -1', padding: '14px 18px', border: `1px solid ${t.rule}`, color: t.goldBright, fontSize: 15, background: 'rgba(212, 166, 74, 0.08)' }}>
                  {sent === 'server' && 'Thank you! Your message is on its way. We typically reply within one business day.'}
                  {sent === 'error' && `Sorry, something went wrong sending your message. Please give us a call at ${C.phone} and we'll take care of you.`}
                </div>
              )}
            </form>
          </Reveal>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: t.navyDeep, color: '#a6b0bf', padding: 'clamp(40px, 6vw, 60px) 0 clamp(28px, 4vw, 40px)' }}>
        <div style={{ ...wrap }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: `1px solid ${t.ruleSoft}`, paddingBottom: 32, gap: 32, flexWrap: 'wrap' }}>
            <button style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }} onClick={() => glideTo(0)}>
              <window.PCBLogo color={t.goldBright} size="md"/>
            </button>
            <div style={{ display: 'flex', gap: 'clamp(24px, 4vw, 48px)', fontSize: 14, letterSpacing: '0.14em', textTransform: 'uppercase', flexWrap: 'wrap' }}>
              <div>
                <div style={{ color: t.goldBright, marginBottom: 8 }}>Visit</div>
                <a href={CONTACT.mapsUrl}
                  target="_blank" rel="noopener noreferrer"
                  style={{ color: 'inherit', textDecoration: 'none', transition: 'color 150ms' }}
                  onMouseEnter={e => e.currentTarget.style.color = t.goldBright}
                  onMouseLeave={e => e.currentTarget.style.color = 'inherit'}>
                  <div>{CONTACT.street}</div>
                  <div>{CONTACT.cityLine}</div>
                </a>
              </div>
              <div>
                <div style={{ color: t.goldBright, marginBottom: 8 }}>Contact</div>
                <a href={CONTACT.phoneHref} style={{ color: 'inherit', textDecoration: 'none', display: 'block', transition: 'color 150ms' }}
                  onMouseEnter={e => e.currentTarget.style.color = t.goldBright}
                  onMouseLeave={e => e.currentTarget.style.color = 'inherit'}>{CONTACT.phone}</a>
              </div>
              <div>
                <div style={{ color: t.goldBright, marginBottom: 8 }}>Hours</div>
                <div>{C.hoursLine}</div>
                <div>{C.closedLine}</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#5a6577', flexWrap: 'wrap', gap: 12 }}>
            <span>© Parker Coin &amp; Bullion 2026</span>
            <span>Locally owned · Parker, Colorado</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

window.RefinedClassicV2 = RefinedClassicV2;