// Shared UI components
const { useState, useEffect, useRef, useMemo } = React;

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

function Link({ to, children, className = '', ...rest }) {
  return (
    <a href={`#${to}`} className={className} {...rest}>{children}</a>
  );
}

function Eyebrow({ children, className = '' }) {
  return <div className={`eyebrow ${className}`}>{children}</div>;
}

function Wordmark({ small }) {
  return (
    <Link to="/" className="inline-flex items-baseline gap-2 group" data-comment-anchor="wordmark">
      <span className={`font-display text-wine ${small ? 'text-[22px]' : 'text-[26px]'} tracking-wide italic leading-none`}>Wildman</span>
      <span className={`font-display text-wine ${small ? 'text-[13px]' : 'text-[14px]'} uppercase tracking-[0.32em] leading-none`}>Art Framing</span>
    </Link>
  );
}

function UtilityBar() {
  return (
    <div className="bg-ink text-cream/80 text-[11px] tracking-[0.22em] uppercase">
      <div className="max-w-page mx-auto px-6 lg:px-10 h-[34px] flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="w-1 h-1 bg-gold rounded-full"></span>
          <span>Dallas Design District · 2227 Irving Blvd</span>
        </div>
        <div className="hidden md:flex items-center gap-6">
          <a href="tel:2147417100" className="hover:text-cream transition-colors">214 · 741 · 7100</a>
          <span className="text-cream/30">/</span>
          <a href="mailto:info@wildmanartframing.com" className="hover:text-cream transition-colors">info@wildmanartframing.com</a>
        </div>
        <div className="md:hidden">
          <a href="tel:2147417100" className="hover:text-cream">214·741·7100</a>
        </div>
      </div>
    </div>
  );
}

function Navbar({ path }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { setOpen(false); }, [path]);

  return (
    <div className={`sticky top-0 z-40 transition-colors duration-300 ${scrolled ? 'bg-cream/95 backdrop-blur-sm border-b hairline' : 'bg-cream/0'}`}>
      <div className="max-w-page mx-auto px-6 lg:px-10 h-[78px] flex items-center justify-between">
        <Wordmark />
        <nav className="hidden lg:flex items-center gap-9">
          {NAV.map(n => (
            <Link key={n.to} to={n.to} className={`nav-link text-[12px] tracking-[0.22em] uppercase font-medium text-ink hover:text-wine transition-colors ${path === n.to ? 'active text-wine' : ''}`}>
              {n.label}
            </Link>
          ))}
        </nav>
        <div className="hidden lg:block">
          <Link to="/contact" className="btn-primary">Visit Studio</Link>
        </div>
        <button onClick={() => setOpen(true)} className="lg:hidden flex flex-col gap-[5px] p-2" aria-label="Open menu">
          <span className="w-6 h-px bg-ink"></span>
          <span className="w-6 h-px bg-ink"></span>
          <span className="w-6 h-px bg-ink"></span>
        </button>
      </div>
      {open && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div className="absolute inset-0 bg-ink/40" onClick={() => setOpen(false)}></div>
          <div className="absolute top-0 right-0 bottom-0 w-[86%] max-w-sm bg-cream p-8 flex flex-col">
            <div className="flex items-center justify-between mb-10">
              <Wordmark small />
              <button onClick={() => setOpen(false)} aria-label="Close" className="text-ink text-2xl leading-none">×</button>
            </div>
            <nav className="flex flex-col gap-5">
              {NAV.map(n => (
                <Link key={n.to} to={n.to} className="font-display text-3xl text-ink hover:text-wine italic">
                  {n.label}
                </Link>
              ))}
            </nav>
            <div className="mt-auto pt-8 border-t hairline text-sm text-muted">
              <div>2227 Irving Blvd, Dallas, TX 75207</div>
              <a href="tel:2147417100" className="block mt-2 text-ink">214 · 741 · 7100</a>
              <a href="mailto:info@wildmanartframing.com" className="block text-ink">info@wildmanartframing.com</a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Footer() {
  return (
    <footer className="bg-ink text-cream/80 mt-24">
      <div className="max-w-page mx-auto px-6 lg:px-10 py-20 grid grid-cols-1 md:grid-cols-12 gap-12">
        <div className="md:col-span-4">
          <div className="font-display text-cream text-3xl italic">Wildman</div>
          <div className="font-display text-cream/70 text-sm tracking-[0.3em] uppercase mt-1">Art Framing</div>
          <p className="mt-8 text-sm max-w-xs leading-relaxed text-cream/60">
            Custom framing for individual, designer, and corporate clients across Texas.
          </p>
          <div className="mt-8 eyebrow text-gold">Dallas Design District</div>
        </div>
        <div className="md:col-span-3">
          <div className="eyebrow text-cream/50">Pages</div>
          <ul className="mt-5 space-y-3 text-[15px]">
            {NAV.map(n => (
              <li key={n.to}><Link to={n.to} className="hover:text-cream transition-colors">{n.label}</Link></li>
            ))}
          </ul>
        </div>
        <div className="md:col-span-3">
          <div className="eyebrow text-cream/50">Visit</div>
          <div className="mt-5 text-[15px] space-y-1.5 leading-relaxed">
            <div>2227 Irving Blvd</div>
            <div>Dallas, TX 75207</div>
            <a href="tel:2147417100" className="block mt-3 hover:text-cream">P · 214.741.7100</a>
            <div className="text-cream/50">F · 214.741.9100</div>
            <a href="mailto:info@wildmanartframing.com" className="block hover:text-cream break-all">info@wildmanartframing.com</a>
          </div>
        </div>
        <div className="md:col-span-2">
          <div className="eyebrow text-cream/50">Hours</div>
          <div className="mt-5 text-[15px] space-y-1.5 leading-relaxed">
            <div>Mon – Fri</div>
            <div className="text-cream/60">9:00 – 5:30</div>
            <div className="mt-2">Saturday</div>
            <div className="text-cream/60">By appointment</div>
            <div className="mt-2">Sunday</div>
            <div className="text-cream/60">Closed</div>
          </div>
        </div>
      </div>
      <div className="border-t border-cream/10">
        <div className="max-w-page mx-auto px-6 lg:px-10 py-6 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-cream/40">
          <div>© 2026 Wildman Art Framing. All rights reserved.</div>
          <div className="tracking-[0.25em] uppercase">Framer of Choice · Since 1996 {/* TODO: confirm founding year */}</div>
        </div>
      </div>
    </footer>
  );
}

function Reveal({ children, delay = 0, className = '' }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setTimeout(() => el.classList.add('in'), delay);
        io.disconnect();
      }
    }, { threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={`reveal ${className}`}>{children}</div>;
}

function PageHeader({ eyebrow, italicWord, rest, intro }) {
  return (
    <section className="pt-20 pb-12 md:pt-32 md:pb-20 border-b hairline">
      <div className="max-w-page mx-auto px-6 lg:px-10">
        <Eyebrow className="text-wine">{eyebrow}</Eyebrow>
        <h1 className="font-display text-ink text-5xl md:text-7xl lg:text-[88px] leading-[1.02] mt-6 max-w-5xl" style={{textWrap: 'balance'}}>
          <span className="italic font-light">{italicWord}</span>{' '}{rest}
        </h1>
        {intro && <p className="mt-10 max-w-2xl text-[18px] text-body leading-[1.75]">{intro}</p>}
      </div>
    </section>
  );
}

function PullQuote({ children }) {
  return (
    <section className="py-24 md:py-32 bg-cream">
      <div className="max-w-5xl mx-auto px-6 lg:px-10 text-center">
        <div className="font-display text-gold text-5xl leading-none mb-6">“</div>
        <blockquote className="font-display text-3xl md:text-5xl lg:text-[56px] italic font-light text-ink leading-[1.18]" style={{textWrap:'balance'}}>
          {children}
        </blockquote>
      </div>
    </section>
  );
}

function CTAStrip({ title, body, ctaLabel, ctaTo }) {
  return (
    <section className="bg-ink text-cream">
      <div className="max-w-page mx-auto px-6 lg:px-10 py-24 md:py-32 grid md:grid-cols-12 gap-12 items-end">
        <div className="md:col-span-7">
          <Eyebrow className="text-gold">Begin a project</Eyebrow>
          <h2 className="font-display italic text-4xl md:text-6xl mt-5 leading-[1.05]" style={{textWrap:'balance'}}>{title}</h2>
        </div>
        <div className="md:col-span-5">
          {body && <p className="text-cream/70 mb-6 leading-relaxed">{body}</p>}
          <Link to={ctaTo} className="btn-primary bg-gold !text-ink hover:bg-cream">{ctaLabel} <span>→</span></Link>
        </div>
      </div>
    </section>
  );
}

function ClientNameList({ compact = false }) {
  return (
    <ul className="divide-y hairline border-t border-b hairline">
      {CORPORATE_CLIENTS.map((c, i) => (
        <li key={c.name} className="group">
          <div className={`flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 md:gap-8 ${compact ? 'py-5' : 'py-7 md:py-9'} transition-colors duration-300 hover:bg-cream/60 px-2 md:px-4`}>
            <div className="flex items-baseline gap-6">
              <span className="font-display text-muted/60 text-sm tracking-widest tabular-nums">{String(i + 1).padStart(2, '0')}</span>
              <span className={`font-display italic text-ink ${compact ? 'text-2xl md:text-3xl' : 'text-3xl md:text-[40px]'} leading-tight`}>{c.name}</span>
            </div>
            <span className="eyebrow text-muted">{c.category}</span>
          </div>
        </li>
      ))}
    </ul>
  );
}

Object.assign(window, {
  useRoute, Link, Eyebrow, Wordmark, UtilityBar, Navbar, Footer,
  Reveal, PageHeader, PullQuote, CTAStrip, ClientNameList
});