/* Shared components — icons, nav, footer, placeholders, buttons */
const { useState, useEffect, useRef, useMemo, Fragment } = React;

/* ---- Inline icons (avoid lucide CDN; keep tight) ---- */
const Icon = ({ name, size = 18, stroke = 1.6, ...props }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", ...props,
  };
  switch (name) {
    case "Tv": return <svg {...common}><rect x="2.5" y="4.5" width="19" height="13" rx="1.5"/><path d="M8 21h8M12 17.5V21"/></svg>;
    case "RectangleVertical": return <svg {...common}><rect x="6" y="2.5" width="12" height="19" rx="1.5"/><path d="M9 6h6"/></svg>;
    case "Image": return <svg {...common}><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m3 17 5-4 4 3 4-4 5 5"/></svg>;
    case "Frame": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="1"/><rect x="7" y="7" width="10" height="10"/></svg>;
    case "PencilLine": return <svg {...common}><path d="m15 5 4 4-9 9H6v-4l9-9z"/><path d="M3 21h18"/></svg>;
    case "Camera": return <svg {...common}><rect x="2.5" y="6" width="19" height="13" rx="2"/><circle cx="12" cy="12.5" r="3.5"/><path d="M8 6V4.5h8V6"/></svg>;
    case "Building": return <svg {...common}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01"/></svg>;
    case "BadgeCheck": return <svg {...common}><path d="M12 3.5 14 5l2.5-.5L17.5 7l2 1L19 10.5l1 2.5-2 1-.5 2.5L15 16l-1.5 2-2-1-2 1L8 16l-2.5.5L5 14l-2-1 .5-2.5L2 8.5 4 7l1-2.5L7.5 5z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "Hammer": return <svg {...common}><path d="m15 2 7 7-3 3-7-7zM12 5 4 13l3 3 8-8M7 16l-4 4 1 1 4-4"/></svg>;
    case "ScaleIcon": return <svg {...common}><path d="M12 3v18M5 3h14M5 21h14M5 3l-3 8a4 4 0 0 0 6 0L5 3M19 3l-3 8a4 4 0 0 0 6 0L19 3"/></svg>;
    case "Boxes": return <svg {...common}><rect x="2.5" y="13" width="8" height="8" rx="1"/><rect x="13.5" y="13" width="8" height="8" rx="1"/><rect x="8" y="3" width="8" height="8" rx="1"/></svg>;
    case "Home": return <svg {...common}><path d="m3 11 9-8 9 8M5 10v10h14V10"/></svg>;
    case "Hand": return <svg {...common}><path d="M7 11V5a1.5 1.5 0 0 1 3 0v6M10 11V4a1.5 1.5 0 0 1 3 0v7M13 11V5a1.5 1.5 0 0 1 3 0v6M16 11V7a1.5 1.5 0 0 1 3 0v8a6 6 0 0 1-12 0V11"/></svg>;
    case "Phone": return <svg {...common}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "MapPin": return <svg {...common}><path d="M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z"/><circle cx="12" cy="9.5" r="2.5"/></svg>;
    case "Cart": return <svg {...common}><path d="M3 4h2l2 13h12l2-9H6.5"/><circle cx="9" cy="20.5" r="1.3"/><circle cx="18" cy="20.5" r="1.3"/></svg>;
    case "User": return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "Search": return <svg {...common}><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.3-4.3"/></svg>;
    case "Menu": return <svg {...common}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case "X": return <svg {...common}><path d="m6 6 12 12M18 6 6 18"/></svg>;
    case "ArrowRight": return <svg {...common}><path d="M5 12h14m-5-6 6 6-6 6"/></svg>;
    case "ArrowLeft": return <svg {...common}><path d="M19 12H5m6-6-6 6 6 6"/></svg>;
    case "Check": return <svg {...common}><path d="m5 12 5 5 9-11"/></svg>;
    case "Tag": return <svg {...common}><path d="M3 3h8l10 10-8 8L3 11z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>;
    case "Sparkle": return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l4 4M14 14l4 4M18 6l-4 4M10 14l-4 4"/></svg>;
    case "Clock": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>;
    case "Truck": return <svg {...common}><path d="M3 16V6h10v10M13 10h4l3 4v2h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>;
    case "Ruler": return <svg {...common}><path d="m2.5 13.5 8-8 10 10-8 8z"/><path d="m6.5 9.5 1.5 1.5M9 7l1.5 1.5M11.5 4.5 13 6M5 11l1.5 1.5"/></svg>;
    case "Info": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>;
    default: return <svg {...common}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

/* ---- Smart image w/ fallback to placeholder ---- */
const SmartImg = ({ src, alt, label, className, style }) => {
  const [err, setErr] = useState(false);
  if (!src || err) {
    return (
      <div className={`imgph ${className || ''}`} style={style}>
        <span>{label || alt || 'image placeholder'}</span>
      </div>
    );
  }
  return (
    <img
      src={src}
      alt={alt || ''}
      className={className}
      style={{ objectFit: 'cover', width: '100%', height: '100%', display: 'block', ...style }}
      onError={() => setErr(true)}
    />
  );
};

/* ---- Wordmark (redesigned, not the old jpg logo) ---- */
const Wordmark = ({ size = 1, light = false }) => (
  <a href="#/" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8, lineHeight: 1 }}>
    <span className="display" style={{
      fontSize: 22 * size, fontWeight: 800, letterSpacing: '-0.03em',
      color: light ? '#fff' : 'var(--ink)'
    }}>
      Sam's
    </span>
    <span style={{
      fontSize: 12 * size, fontWeight: 600, letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--red)'
    }}>
      Custom Framing
    </span>
  </a>
);

/* ---- Eyebrow ---- */
const Eyebrow = ({ children, color }) => (
  <div className="eyebrow" style={{ color: color || 'var(--muted)' }}>{children}</div>
);

/* ---- Utility bar (thin top bar) ---- */
const UtilityBar = () => (
  <div style={{ background: '#141414', color: '#E6E6E2', fontSize: 12 }}>
    <div className="container-wide" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      height: 36, gap: 16
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: 0.85 }}>
        <Icon name="MapPin" size={13} />
        <span>Dallas · Sam Moon Center</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span style={{ display: 'none' }} className="hide-sm">Owner-operated since 2006</span>
        <span className="hide-mobile" style={{ display: 'inline' }}>Owner-operated since 2006</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="tel:2149958578" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#fff' }}>
          <Icon name="Phone" size={13} />
          <span style={{ fontWeight: 600 }}>214-995-8578</span>
        </a>
        <span style={{ opacity: 0.3 }}>·</span>
        <a href="#/visit" style={{ opacity: 0.85 }}>Account</a>
        <a href="#/visit" style={{ opacity: 0.85, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <Icon name="Cart" size={14} />
          <span>Cart (0)</span>
        </a>
      </div>
    </div>
  </div>
);

/* ---- Promo bar ---- */
const PromoBar = () => (
  <div style={{
    background: 'var(--soft)', color: 'var(--red-dark)',
    borderBottom: '1px solid #F1DACE'
  }}>
    <div className="container-wide" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      padding: '10px 24px', fontSize: 13, fontWeight: 500
    }}>
      <Icon name="Tag" size={14} />
      <span>
        Fall special: use code{' '}
        <span className="mono" style={{
          background: '#fff', padding: '2px 8px', borderRadius: 4,
          border: '1px solid #F1DACE', fontWeight: 600, color: 'var(--red)'
        }}>TEXAS</span>{' '}
        at checkout for 15% off your total order.
      </span>
    </div>
  </div>
);

/* ---- Main nav ---- */
const NAV_LINKS = [
  { href: "#/products", label: "Products" },
  { href: "#/examples", label: "Examples" },
  { href: "#/commercial", label: "Commercial" },
  { href: "#/about", label: "About" },
  { href: "visualizer.html", label: "Visualizer" },
  { href: "#/visit", label: "Visit" },
];

const Navbar = ({ route }) => {
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'rgba(255,255,255,0.94)',
      backdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--hair)'
    }}>
      <div className="container-wide" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64, gap: 24
      }}>
        <Wordmark />
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          {NAV_LINKS.map(l => {
            const active = (route || '').startsWith(l.href.slice(1));
            return (
              <a key={l.href} href={l.href} style={{
                fontSize: 14, fontWeight: 500,
                color: active ? 'var(--red)' : 'var(--ink-body)',
                borderBottom: active ? '2px solid var(--red)' : '2px solid transparent',
                paddingBottom: 4
              }}>{l.label}</a>
            );
          })}
        </div>
        <div className="nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button className="icon-only" aria-label="Search" style={{
            background: 'transparent', border: 0, color: 'var(--ink)', padding: 6
          }}><Icon name="Search" /></button>
          <a href="#/visit" className="btn btn-green btn-sm">
            <Icon name="Sparkle" size={14} /> Get a Quote
          </a>
        </div>
        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(true)} style={{
          background: 'transparent', border: 0, color: 'var(--ink)', padding: 6, display: 'none'
        }}>
          <Icon name="Menu" size={22} />
        </button>
      </div>

      {open && (
        <div className="drawer" onClick={() => setOpen(false)}>
          <div className="drawer-panel" onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <Wordmark size={0.9} />
              <button onClick={() => setOpen(false)} style={{ background: 'transparent', border: 0, padding: 4 }}>
                <Icon name="X" />
              </button>
            </div>
            <hr className="hairline" style={{ margin: '12px 0' }}/>
            {NAV_LINKS.map(l => (
              <a key={l.href} href={l.href} style={{
                padding: '12px 0', fontSize: 18, fontWeight: 600,
                color: 'var(--ink)', borderBottom: '1px solid var(--hair)'
              }}>{l.label}</a>
            ))}
            <a href="tel:2149958578" style={{
              padding: '12px 0', fontSize: 14, color: 'var(--muted)',
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              <Icon name="Phone" size={14}/> 214-995-8578
            </a>
            <a href="#/visit" className="btn btn-green" style={{ marginTop: 8 }}>
              <Icon name="Sparkle" size={14}/> Get a Quote
            </a>
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 880px) {
          .nav-links, .nav-cta { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
      `}</style>
    </nav>
  );
};

/* ---- Footer ---- */
const Footer = () => (
  <footer style={{ background: '#0F0F0F', color: '#C9C9C5', marginTop: 80 }}>
    <div className="container-wide" style={{ padding: '64px 24px 32px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 40, marginBottom: 48
      }}>
        <div>
          <Wordmark light />
          <p style={{ marginTop: 16, fontSize: 13, lineHeight: 1.7, color: '#9A9A95' }}>
            DBA Dallas Art & Decor.<br/>
            Owner-operated, on-premises. Since 2006.
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ color: '#8A8A85', marginBottom: 14 }}>Products</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <a href="#/build/tv-frame">Frame Your TV</a>
            <a href="#/build/custom-board">Custom Boards</a>
            <a href="#/build/mirror">Custom Mirrors</a>
            <a href="#/build/canvas">Canvas Prints</a>
            <a href="#/build/custom-frame">Custom Frames</a>
            <a href="#/products">All products</a>
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ color: '#8A8A85', marginBottom: 14 }}>Customer</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <a href="#/visit">Account</a>
            <a href="#/visit">Cart</a>
            <a href="#/commercial">Commercial / Wholesale</a>
            <a href="#/visit">Contact</a>
            <a href="#/about">Policies & terms</a>
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ color: '#8A8A85', marginBottom: 14 }}>Visit</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: '#C9C9C5' }}>
            <div>11834 Harry Hines Blvd<br/>Suite 111<br/>Dallas, TX 75234</div>
            <a href="tel:2149958578" style={{ color: '#fff', fontWeight: 600 }}>214-995-8578</a>
            <div style={{ color: '#9A9A95' }}>Hours · Mon–Sat, evenings by appt</div>
            <div style={{ marginTop: 8 }}>
              <span className="pill" style={{ background: '#1F1F1F', color: '#F4C4B0', border: '1px solid #2B2B2B' }}>
                Code <span className="mono" style={{ marginLeft: 4 }}>TEXAS</span> · 15% off
              </span>
            </div>
          </div>
        </div>
      </div>
      <hr style={{ border: 0, borderTop: '1px solid #2A2A2A' }}/>
      <div style={{
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap',
        gap: 16, paddingTop: 24, fontSize: 12, color: '#7A7A75'
      }}>
        <div>© 2026 Sam's Custom Framing</div>
        <div>Dallas · Sam Moon Center · est. 2006</div>
      </div>
    </div>
  </footer>
);

/* ---- Section eyebrow + title block ---- */
const SectionHeader = ({ eyebrow, title, sub, align = 'left' }) => (
  <div style={{ textAlign: align, marginBottom: 40 }}>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    {title && (
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 4vw, 44px)',
        margin: eyebrow ? '12px 0 0' : 0,
        fontWeight: 700, maxWidth: 800,
        marginLeft: align === 'center' ? 'auto' : 0,
        marginRight: align === 'center' ? 'auto' : 0,
      }}>{title}</h2>
    )}
    {sub && (
      <p style={{
        marginTop: 12, color: 'var(--ink-body)',
        fontSize: 17, lineHeight: 1.6, maxWidth: 640,
        marginLeft: align === 'center' ? 'auto' : 0,
        marginRight: align === 'center' ? 'auto' : 0,
      }}>{sub}</p>
    )}
  </div>
);

/* ---- Hash router helpers ---- */
const useRoute = () => {
  const [route, setRoute] = useState(window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => {
      setRoute(window.location.hash || '#/');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
};

/* ---- expose ---- */
Object.assign(window, {
  Icon, SmartImg, Wordmark, Eyebrow,
  UtilityBar, PromoBar, Navbar, Footer, SectionHeader,
  useRoute,
});