/* global React, Icon, Icons */
const { useState, useEffect } = React;

function Header() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    { id: 'services',  label: 'Services' },
    { id: 'process',   label: 'Process' },
    { id: 'work',      label: 'Our Work' },
    { id: 'contact',   label: 'Contact' },
  ];
  return (
    <header className="site-header" style={scrolled ? { boxShadow: '0 1px 0 var(--border-hairline), 0 8px 24px rgba(7,15,31,.06)' } : {}}>
      <div className="container">
        <a className="brand-lockup" href="#top">
          <img src={window.__resources.img01} alt="Your Sign Guy — Colorado's Sign Experts" />
          <span className="wordmark">Your Sign Guy<small>Colorado's Sign Experts</small></span>
        </a>
        <nav className="nav">
          {items.map(i => (
            <a key={i.id} href={`#${i.id}`}>{i.label}</a>
          ))}
          <a className="phone" href="tel:7209251172">
            <Icon d={Icons.Phone} size={14}/> 720·925·1172
          </a>
          <a className="btn btn-primary btn-sm" href="#quote">
            Get a Quote <span className="arrow">→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <>
      <section className="hero" id="top">
        <div className="container">
          <div className="hero-grid">
            <div>
              <span className="eyebrow">Erie, CO · Front Range · Since 2019</span>
              <h1>
                A great sign is<br/>the face of your<br/>business. We make<br/>sure yours looks{' '}
                <span className="plus">plus</span>.
              </h1>
              <p className="lead">
                Custom storefronts, vehicle wraps, monument signs, and everything in between —
                designed, fabricated, and installed in-house for businesses across the Colorado
                Front Range.
              </p>
              <div className="cta-row">
                <a className="btn btn-gold" href="#quote">Get a Free Quote <span className="arrow">→</span></a>
                <a className="btn btn-outline-light" href="#work">See Our Work</a>
              </div>
              <div className="meta-row">
                <span><Icon d={Icons.Pin}/> Based in Erie, CO</span>
                <span><Icon d={Icons.Truck}/> Fort Collins → Pueblo</span>
                <span><Icon d={Icons.Check}/> One shop · one bill · one warranty</span>
              </div>
            </div>
            <div className="hero-photo-stack">
              <div className="frame lg">
                <img src={window.__resources.img02} alt="Greyhound Grounds Coffee House storefront sign" />
              </div>
              <div className="frame sm">
                <img src={window.__resources.img07} alt="The Landing — XL blade sign install" />
              </div>
            </div>
          </div>
        </div>
      </section>
      <div className="service-ribbon">
        <div className="container">
          <div className="ribbon-head">
            <span className="eyebrow gold">What we make</span>
            <span className="ribbon-rule"></span>
            <a className="ribbon-link" href="#services">All services <span className="arrow">→</span></a>
          </div>
          <ul className="service-index">
            {[
              { icon: Icons.Store,    label: 'Storefront Signs' },
              { icon: Icons.Truck,    label: 'Vehicle Wraps' },
              { icon: Icons.Mountain, label: 'Monument Signs' },
              { icon: Icons.Layers,   label: 'Dimensional Letters' },
              { icon: Icons.Compass,  label: 'ADA & Wayfinding' },
              { icon: Icons.Flag,     label: 'Banners & Event' },
              { icon: Icons.Window,   label: 'Window Vinyl' },
              { icon: Icons.Bulb,     label: 'Illuminated Signs' },
            ].map(s => (
              <li key={s.label}>
                <Icon d={s.icon} size={22}/>
                <span className="label">{s.label}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}

window.Header = Header;
window.Hero = Hero;