// All page sections for Apex Overhead Doors homepage.
// {{TODO}} markers preserved in copy where the spec calls for real content.

const PHONE_DISPLAY = "(406) 788-9972";
const PHONE_TEL = "tel:+14067889972";

// ---------- Reveal hook ----------
// Above-fold content is visible immediately (base .reveal is opacity:1, never
// blank). Below-fold elements get `.pre` (hidden) and are revealed as they
// enter the viewport. Reveal is driven by a low-frequency polling interval
// rather than IntersectionObserver/scroll events, both of which proved
// unreliable in some embedded/preview environments.
// ---------- Reveal hook ----------
// Reveal animation is now CSS-only (scroll-driven via animation-timeline in
// site.css), so this is a no-op kept for API compatibility with call sites.
// Base `.reveal` is always visible — content can never be stuck hidden.
const useReveal = () => {};

// ---------- Top Bar ----------
const TopBar = ({ accent }) => (
  <div style={{ background: '#0d0e10', color: 'var(--on-dark-2)', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
    <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', minHeight: 36, fontSize: 12.5, letterSpacing: 0.02 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Icon name="shield" size={14} color={accent} />
        <span>Locally Owned &amp; Operated · Licensed &amp; Insured</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 0 3px rgba(34,197,94,0.18)' }}></span>
          Open Today · 7am–5pm
        </span>
        <a href={PHONE_TEL} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#fff', fontWeight: 600 }}>
          <Icon name="phone" size={13} /> {PHONE_DISPLAY}
        </a>
      </div>
    </div>
  </div>
);

// ---------- Nav ----------
const Nav = ({ accent }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkBase = {
    color: scrolled ? 'var(--ink)' : '#fff',
    opacity: scrolled ? 0.85 : 0.92,
    fontWeight: 500,
    fontSize: 14.5,
    padding: '8px 2px',
    transition: 'color .2s ease, opacity .2s ease',
  };

  return (
    <header
      style={{
        position: 'sticky',
        top: 0, zIndex: 50,
        background: scrolled ? 'rgba(255,255,255,0.92)' : 'transparent',
        backdropFilter: scrolled ? 'saturate(160%) blur(12px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--cool-gray)' : '1px solid transparent',
        transition: 'background .25s ease, border-color .25s ease',
        color: scrolled ? 'var(--ink)' : '#fff',
      }}
    >
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', minHeight: 72 }}>
        {/* Logo */}
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img
            src={(typeof window !== 'undefined' && window.__resources && window.__resources.apexLogo) || "assets/apex-logo.png"}
            alt="Apex Overhead Doors"
            style={{
              height: 44,
              width: 44,
              objectFit: 'cover',
              borderRadius: 10,
              background: '#fff',
              border: '1px solid ' + (scrolled ? 'var(--cool-gray)' : 'rgba(255,255,255,0.18)'),
              boxShadow: scrolled ? 'none' : '0 4px 14px -6px rgba(0,0,0,0.4)',
              transition: 'border-color .25s ease, box-shadow .25s ease',
            }}
          />
          <div style={{ lineHeight: 1.05 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '-0.02em', fontSize: 18 }}>APEX</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', opacity: 0.7, textTransform: 'uppercase' }}>Overhead Doors</div>
          </div>
        </a>

        {/* Desktop nav */}
        <nav className="desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <div
            onMouseEnter={() => setServicesOpen(true)}
            onMouseLeave={() => setServicesOpen(false)}
            style={{ position: 'relative' }}
          >
            <button style={{ ...linkBase, background: 'transparent', border: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              Services <Icon name="chevronDown" size={14} />
            </button>
            {servicesOpen && (
              <div style={{
                position: 'absolute', top: '100%', left: -12, minWidth: 240,
                background: '#fff', border: '1px solid var(--cool-gray)', borderRadius: 10,
                boxShadow: '0 18px 40px -16px rgba(14,43,69,0.2)',
                padding: 8, zIndex: 60,
              }}>
                {[
                  ['Residential', 'home', 'residential.html'],
                  ['Commercial', 'building', 'commercial.html'],
                  ['Opener Service', 'plug', 'openers.html'],
                  ['Maintenance', 'settings', 'repair.html'],
                ].map(([label, ic, href]) => (
                  <a key={label} href={href} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 6, color: 'var(--ink)', fontSize: 14, fontWeight: 500 }}
                     onMouseEnter={e => e.currentTarget.style.background = 'var(--warm-white)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <Icon name={ic} size={16} color="var(--steel)" />
                    {label}
                  </a>
                ))}
              </div>
            )}
          </div>
          {[
            ['About', 'about.html'],
            ['Service Area', 'service-area.html'],
          ].map(([l, href]) => (
            <a key={l} href={href} style={linkBase}
               onMouseEnter={e => e.currentTarget.style.color = accent}
               onMouseLeave={e => e.currentTarget.style.color = scrolled ? 'var(--ink)' : '#fff'}>
              {l}
            </a>
          ))}
          <a href="contact.html" className="btn" style={{
            padding: '11px 18px', fontSize: 14,
            background: 'transparent',
            color: scrolled ? 'var(--steel)' : '#fff',
            border: '1px solid ' + (scrolled ? 'var(--cool-gray)' : 'rgba(255,255,255,0.5)'),
          }}>
            Get a Free Quote <Icon name="arrowRight" size={14} className="arrow" />
          </a>
        </nav>

        {/* Mobile menu trigger */}
        <button className="mobile-toggle"
          onClick={() => setMobileOpen(true)}
          style={{
            display: 'none',
            background: 'transparent', border: '1px solid ' + (scrolled ? 'var(--cool-gray)' : 'rgba(255,255,255,0.4)'),
            color: 'inherit', padding: 8, borderRadius: 6,
          }}>
          <Icon name="menu" size={20} />
        </button>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 100 }}>
          <div onClick={() => setMobileOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(10,20,30,0.5)', animation: 'fade .25s ease' }}></div>
          <div style={{
            position: 'absolute', top: 0, right: 0, bottom: 0, width: 320, maxWidth: '85vw',
            background: '#fff', padding: 24,
            animation: 'slideIn .3s ease-out',
          }}>
            <button onClick={() => setMobileOpen(false)} style={{ background: 'transparent', border: 'none', position: 'absolute', top: 16, right: 16 }}>
              <Icon name="x" size={22} />
            </button>
            <div style={{ marginTop: 40 }}>
              {[
                ['Residential', 'residential.html'],
                ['Commercial', 'commercial.html'],
                ['Openers', 'openers.html'],
                ['Maintenance', 'repair.html'],
                ['About', 'about.html'],
                ['Service Area', 'service-area.html'],
              ].map(([l, href]) => (
                <a key={l} href={href}
                   onClick={() => setMobileOpen(false)}
                   style={{ display: 'block', padding: '14px 0', borderBottom: '1px solid var(--cool-gray)', fontSize: 16, fontWeight: 600 }}>
                  {l}
                </a>
              ))}
              <a href={PHONE_TEL} className="btn btn-primary" style={{ background: accent, marginTop: 24, width: '100%', justifyContent: 'center' }}>
                <Icon name="phone" size={14} /> Call {PHONE_DISPLAY}
              </a>
              <a href="contact.html" className="btn btn-outline-dark" style={{ marginTop: 12, width: '100%', justifyContent: 'center' }}>
                Get a Free Quote <Icon name="arrowRight" size={14} className="arrow" />
              </a>
            </div>
          </div>
        </div>
      )}

      <style>{`
        @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
        @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 940px) {
          .desktop-nav { display: none !important; }
          .mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
        }
      `}</style>
    </header>
  );
};

// ---------- Hero ----------
// Hero uses a bright blue for emphasized lettering (eyebrow, headline highlight,
// trust-strip ticks, rating stars). CTA button stays in brand accent (orange).
const HERO_LETTER_BLUE = '#4a86d6';
const Hero = ({ accent, headline, subhead, heroVariant }) => (
  <section id="top" style={{
    position: 'relative',
    background: 'transparent',
    color: '#fff',
    paddingTop: 24,
    overflow: 'hidden',
  }}>
    <div className="noise"></div>
    {/* subtle diagonal */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(115deg, rgba(255,255,255,0.05) 0%, transparent 35%)',
      pointerEvents: 'none',
    }}></div>
    <div className="container" style={{ position: 'relative', paddingTop: 80, paddingBottom: 100 }}>
      <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 60, alignItems: 'center' }}>
        <div className="reveal">
          <div className="eyebrow" style={{ color: HERO_LETTER_BLUE }}>— Residential · Commercial · Repair</div>
          <h1 style={{ color: '#fff', fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 18, textWrap: 'balance' }}>
            {headline.split(' ').slice(0, -3).join(' ')}{' '}
            <span style={{ color: HERO_LETTER_BLUE }}>{headline.split(' ').slice(-3).join(' ')}</span>
          </h1>
          <p style={{ color: 'var(--on-dark-2)', fontSize: 18, marginTop: 22, maxWidth: 560, textWrap: 'pretty' }}>
            {subhead}
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 32 }}>
            <a href={PHONE_TEL} className="btn btn-primary" style={{ background: accent, padding: '15px 24px', fontSize: 16 }}>
              <Icon name="phone" size={16} /> Call {PHONE_DISPLAY}
            </a>
            <a href="contact.html" className="btn btn-outline-light" style={{ padding: '15px 22px', fontSize: 15 }}>
              Get a Free Quote <Icon name="arrowRight" size={15} className="arrow" />
            </a>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22, marginTop: 28, color: 'var(--on-dark-2)', fontSize: 13.5 }}>
            {['Free Estimates', 'Licensed & Insured', 'Locally Owned'].map(t => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check" size={15} color={HERO_LETTER_BLUE} stroke={2.25} /> {t}
              </span>
            ))}
          </div>
        </div>

        {/* Hero image */}
        <div className="reveal" data-delay="0.1" style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '4/5', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)', boxShadow: '0 30px 60px -24px rgba(0,0,0,0.55)' }}>
            <img
              src={(typeof window !== 'undefined' && window.__resources && window.__resources.heroResidential) || "assets/hero-residential.webp"}
              alt="Residential home with two white sectional garage doors and stone accents"
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover',
                objectPosition: '60% 55%',
                display: 'block',
              }}
            />
          </div>

        </div>
      </div>

    </div>

    <style>{`
      @media (max-width: 900px) {
        .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      }
    `}</style>
  </section>
);

window.TopBar = TopBar;
window.Nav = Nav;
window.Hero = Hero;
window.useReveal = useReveal;
window.PHONE_DISPLAY = PHONE_DISPLAY;
window.PHONE_TEL = PHONE_TEL;