// Shared styles + components for Deals To Grow site (Direction C: Industrial Premium)

const C = {
  bg: '#E8E5DF',
  panel: '#F2EFE9',
  ink: '#16161A',
  rebar: '#2A2D33',
  rule: 'rgba(22,22,26,0.18)',
  ruleSoft: 'rgba(22,22,26,0.08)',
  hi: '#FA6015',
  hiDark: '#C44F16',
  caution: '#FFB627',
  text: '#16161A',
  muted: '#5A5A60',
  faint: '#9A9A9F',
};

const F = {
  display: '"Archivo Black", "Anton", "Bebas Neue", -apple-system, sans-serif',
  sans: '"Inter", -apple-system, system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// Kept for backward compatibility but not used for decorative separators
function HazardStripe({ height = 6, style }) {
  return (
    <div style={{
      height, width: '100%',
      background: `repeating-linear-gradient(135deg, ${C.hi} 0 14px, ${C.ink} 14px 28px)`,
      ...style,
    }} />
  );
}

function Stamp({ children, color = C.hi, dark, size = 'md' }) {
  const sizing = size === 'sm'
    ? { padding: '4px 8px', fontSize: 9 }
    : { padding: '5px 10px', fontSize: 10 };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      ...sizing,
      background: dark ? color : 'transparent',
      border: `1.5px solid ${color}`,
      color: dark ? C.ink : color,
      fontFamily: F.mono, letterSpacing: 1.6, fontWeight: 600, textTransform: 'uppercase',
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function Eyebrow({ children, color = C.hiDark }) {
  return <Stamp color={color}>// {children}</Stamp>;
}

function SectionTitle({ eyebrow, children, dark }) {
  return (
    <div style={{ marginBottom: 56 }}>
      {eyebrow && <Eyebrow color={dark ? C.hi : C.hiDark}>{eyebrow}</Eyebrow>}
      <h2 style={{
        fontFamily: F.display, fontSize: 88, lineHeight: 0.88, letterSpacing: -2.2,
        color: dark ? C.panel : C.ink, margin: '20px 0 0', textTransform: 'uppercase',
        textWrap: 'balance', maxWidth: 1100,
      }}>{children}</h2>
    </div>
  );
}

// Industrial metal-sign button — rivets in each corner, worn paint texture,
// stamp-stenciled display type. Three palettes (primary / dark / default) share
// the same anatomy so visual hierarchy stays consistent across the site.
function Btn({ children, primary, dark, href = '#', style, onClick, target, rel }) {
  const variant = primary ? 'primary' : dark ? 'dark' : 'default';

  // Per-variant palette. `base` is the painted metal field.
  const P = {
    primary: {
      base: '#D1501A',                  // deeper orange so cream text passes AA
      text: C.panel,
      edge: '#16161A',
      rivet: '#16161A',
      shadow: `4px 4px 0 ${C.ink}`,
      tShadow: '0 1px 0 rgba(0,0,0,0.30)',
    },
    dark: {
      base: C.ink,
      text: C.hi,
      edge: '#000',
      rivet: C.hi,
      shadow: `4px 4px 0 ${C.hiDark}`,
      tShadow: 'none',
    },
    default: {
      base: C.panel,
      text: C.ink,
      edge: C.ink,
      rivet: C.ink,
      shadow: `4px 4px 0 ${C.ink}`,
      tShadow: 'none',
    },
  }[variant];

  const wrap = {
    position: 'relative', display: 'inline-flex',
    alignItems: 'center', justifyContent: 'center', gap: 12,
    padding: '14px 28px',
    fontFamily: F.display, fontSize: 14, letterSpacing: 1.4,
    fontWeight: 900, lineHeight: 1, textTransform: 'uppercase',
    color: P.text, textDecoration: 'none', whiteSpace: 'nowrap',
    cursor: 'pointer',
    background: P.base,
    border: `2px solid ${P.edge}`,
    boxShadow: `inset 0 0 0 1px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10), ${P.shadow}`,
    textShadow: P.tShadow,
    transition: 'transform 80ms ease, box-shadow 80ms ease',
  };

  const rivet = {
    position: 'absolute', width: 6, height: 6,
    background: `radial-gradient(circle at 35% 35%, rgba(255,255,255,0.50) 0%, ${P.rivet} 60%)`,
    borderRadius: '50%',
    boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.30), 0 1px 1px rgba(0,0,0,0.45)',
    pointerEvents: 'none',
  };

  return (
    <a href={href} onClick={onClick} target={target} rel={rel} style={{ ...wrap, ...style }}>
      <span aria-hidden style={{ ...rivet, top: 5,    left: 7  }} />
      <span aria-hidden style={{ ...rivet, top: 5,    right: 7 }} />
      <span aria-hidden style={{ ...rivet, bottom: 5, left: 7  }} />
      <span aria-hidden style={{ ...rivet, bottom: 5, right: 7 }} />
      <span style={{ position: 'relative', zIndex: 1 }}>{children}</span>
    </a>
  );
}

// In-page anchor navigation bar — sticky below header
function JumpNav({ links }) {
  const [active, setActive] = React.useState(null);
  React.useEffect(() => {
    const ids = links.map(l => l.href.replace('#', ''));
    const observer = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-20% 0px -70% 0px', threshold: 0 });
    ids.forEach(id => { const el = document.getElementById(id); if (el) observer.observe(el); });
    return () => observer.disconnect();
  }, []);

  const scrollTo = (e, href) => {
    e.preventDefault();
    const id = href.replace('#', '');
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  React.useEffect(() => {
    const id = 'dtg-jnav-style';
    if (!document.getElementById(id)) {
      const el = document.createElement('style');
      el.id = id;
      el.textContent = '.dtg-jumpnav{scrollbar-width:thin;scrollbar-color:rgba(22,22,26,0.2) transparent}.dtg-jumpnav::-webkit-scrollbar{height:2px}.dtg-jumpnav::-webkit-scrollbar-thumb{background:rgba(22,22,26,0.25);border-radius:1px}';
      document.head.appendChild(el);
    }
  }, []);

  return (
    <div className="dtg-jumpnav" style={{
      position: 'sticky', top: 80, zIndex: 15,
      background: C.panel, borderBottom: `2px solid ${C.ink}`,
      display: 'flex', overflowX: 'auto',
    }}>
      {links.map(({ label, href }) => {
        const id = href.replace('#', '');
        const isActive = active === id;
        return (
          <a key={href} href={href} onClick={e => scrollTo(e, href)} style={{
            display: 'block', padding: '11px 20px', flexShrink: 0,
            fontFamily: F.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.4,
            textDecoration: 'none', whiteSpace: 'nowrap', textTransform: 'uppercase',
            color: isActive ? C.hi : C.muted,
            borderBottom: isActive ? `3px solid ${C.hi}` : '3px solid transparent',
            transition: 'color 0.15s, border-color 0.15s',
          }}>{label}</a>
        );
      })}
    </div>
  );
}

// Sticky bottom CTA — appears after 25% scroll, dismissible per session
function StickyBottomCTA({ tradeName }) {
  const [dismissed, setDismissed] = React.useState(() => {
    try { return !!sessionStorage.getItem('dtg-cta-dismissed'); } catch { return false; }
  });
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const check = () => {
      const threshold = document.documentElement.scrollHeight * 0.25;
      if (window.scrollY >= threshold) setVisible(true);
    };
    window.addEventListener('scroll', check, { passive: true });
    check();
    return () => window.removeEventListener('scroll', check);
  }, []);

  const dismiss = () => {
    setDismissed(true);
    try { sessionStorage.setItem('dtg-cta-dismissed', '1'); } catch {}
  };

  if (dismissed || !visible) return null;

  const msg = tradeName
    ? `Lock ${tradeName.toLowerCase()} in your metro.`
    : 'Your metro may still be open.';

  return (
    <div className="dtg-sticky-cta" style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: C.rebar, borderTop: `3px solid ${C.hi}`,
      padding: '14px 56px 14px 28px',
    }}>
      <button onClick={dismiss} aria-label="Dismiss" style={{
        position: 'absolute', top: 6, right: 10,
        background: 'transparent', border: 'none', color: C.faint, cursor: 'pointer',
        fontFamily: F.mono, fontSize: 14, padding: '6px 10px', lineHeight: 1,
      }}>✕</button>
      <div className="dtg-sticky-cta-row" style={{
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <span className="dtg-sticky-cta-msg" style={{
          fontFamily: F.display, fontSize: 'clamp(13px, 2.6vw, 18px)', color: C.panel,
          letterSpacing: -0.2, textTransform: 'uppercase', lineHeight: 1.15,
          flex: 1, minWidth: 0,
        }}>{msg}</span>
        <Btn primary href="/book-scoping-call" style={{ flexShrink: 0 }}>GET STARTED ▸</Btn>
      </div>
    </div>
  );
}

function Nav({ current }) {
  const [open, setOpen] = React.useState(false);
  const [megaOpen, setMegaOpen] = React.useState(false);
  const megaTimer = React.useRef(null);

  const openMega  = () => { if (megaTimer.current) clearTimeout(megaTimer.current); setMegaOpen(true); };
  const closeMega = () => { megaTimer.current = setTimeout(() => setMegaOpen(false), 160); };

  const TRADES_LIST = [
    { code: 'GC',   name: 'General Contractors', cycle: '30–90D', ticket: '$12–48K', href: '/trades/general-contractors' },
    { code: 'EPX',  name: 'Epoxy Flooring',      cycle: '7–21D',  ticket: '$3–9K',   href: '/trades/epoxy' },
    { code: 'FLR',  name: 'Flooring',            cycle: '14–45D', ticket: '$4–18K',  href: '/trades/flooring' },
    { code: 'RF',   name: 'Roofing',             cycle: '7–30D',  ticket: '$8–24K',  href: '/trades/roofing' },
    { code: 'KIT',  name: 'Kitchen Remodel',     cycle: '60–120D',ticket: '$18–80K', href: '/trades/kitchen' },
    { code: 'BTH',  name: 'Bath Remodel',        cycle: '14–60D', ticket: '$8–32K',  href: '/trades/bath' },
    { code: 'WIN',  name: 'Windows + Doors',     cycle: '14–45D', ticket: '$8–40K',  href: '/trades/windows' },
    { code: 'POOL', name: 'Pools + Outdoor',     cycle: '60–180D',ticket: '$30–120K',href: '/trades/pool' },
    { code: 'HVAC', name: 'HVAC',                cycle: '3–14D',  ticket: '$6–22K',  href: '/trades/hvac' },
    { code: 'LND',  name: 'Landscaping',         cycle: '30–60D', ticket: '$3–22K',  href: '/trades/landscaping' },
  ];

  const navItems = [
    ['Done for you', '/done-for-you'],
    ['Why us', '/why-us'],
    ['Clients', '/clients'],
    ['Pricing', '/pricing'],
    ['About', '/about'],
    ['FAQ', '/faq'],
    ['Book a Call', '/book-scoping-call'],
  ];

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      {/* Notification bar — scrolls away, not sticky */}
      <div style={{ background: C.ink, height: 32, overflow: 'hidden', display: 'flex', alignItems: 'center', userSelect: 'none' }}>
        <style>{`@keyframes dtg-notif{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`}</style>
        <div style={{
          display: 'flex', gap: 0,
          animation: 'dtg-notif 35s linear infinite',
          whiteSpace: 'nowrap',
        }}>
          {[0, 1].map(rep => (
            ['▸ LIVE IN:', '· ROOFING', '· HVAC', '· EPOXY FLOORS', '· FLOORING',
             '· GENERAL CONTRACTORS', '· KITCHEN', '· BATH', '· WINDOWS + DOORS', '· POOL', '· LANDSCAPING']
              .map((t, i) => (
                <span key={`${rep}-${i}`} style={{
                  padding: '0 20px', fontFamily: F.mono, fontSize: 11,
                  color: i === 0 ? 'rgba(250,98,21,0.9)' : C.hi,
                  letterSpacing: 1.6, fontWeight: 700, textTransform: 'uppercase',
                }}>{t}</span>
              ))
          ))}
        </div>
      </div>

      {/* Sticky nav — always visible */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 20, background: C.bg,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 40px', borderBottom: `2px solid ${C.ink}`, borderTop: `2px solid ${C.ink}`,
        }}>
          {/* Logo */}
          <a href="/" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', flexShrink: 0 }}>
            <img src="/img/logo-header.png" alt="Deals To Grow — Sales Infrastructure" className="dtg-logo" style={{ height: '72px', width: 'auto', display: 'block' }} />
          </a>

          {/* Desktop nav links */}
          <div className="nav-links" style={{ display: 'flex', gap: 20, fontFamily: F.mono, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, alignItems: 'center' }}>
            {[['Done for you', '/done-for-you'], ['Why us', '/why-us'], ['Clients', '/clients']].map(([label, href]) => {
              const active = (current || '').replace(/\.html$/, '').replace(/^\//, '') === href.replace(/^\//, '');
              return (
                <a key={href} href={href} style={{
                  color: active ? C.hi : C.ink, textDecoration: 'none',
                  paddingBottom: 4, borderBottom: active ? `2px solid ${C.hi}` : '2px solid transparent',
                  textTransform: 'uppercase',
                }}>{label}</a>
              );
            })}

            {/* Trades megamenu */}
            <div
              style={{ position: 'relative' }}
              onMouseEnter={openMega}
              onMouseLeave={closeMega}
            >
              <a href="/trades" style={{
                color: (current || '').replace(/\.html$/, '') === 'trades' ? C.hi : C.ink,
                textDecoration: 'none', paddingBottom: 4,
                borderBottom: (current || '').replace(/\.html$/, '') === 'trades' ? `2px solid ${C.hi}` : '2px solid transparent',
                textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                NICHES <span style={{ fontSize: 8, opacity: 0.6, marginTop: 1 }}>▾</span>
              </a>

              {megaOpen && (
                <div
                  onMouseEnter={openMega}
                  onMouseLeave={closeMega}
                  style={{
                    position: 'absolute', top: 'calc(100% + 6px)', left: '50%',
                    transform: 'translateX(-50%)', background: C.rebar,
                    border: `2px solid ${C.ink}`, padding: 8, width: 540,
                    zIndex: 100, boxShadow: '6px 6px 0 rgba(0,0,0,0.3)',
                  }}>
                  <div style={{ position: 'absolute', top: -9, left: '50%', transform: 'translateX(-50%)', width: 0, height: 0, borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderBottom: `9px solid ${C.ink}` }} />
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
                    {TRADES_LIST.map(tr => (
                      <a key={tr.code} href={tr.href} style={{ display: 'block', padding: '10px 14px', textDecoration: 'none', background: 'transparent', transition: 'background 0.12s' }}
                        onMouseEnter={e => e.currentTarget.style.background = 'rgba(250,98,21,0.12)'}
                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
                          <span style={{ fontFamily: F.mono, fontSize: 9, color: C.hi, letterSpacing: 1.6, fontWeight: 700 }}>{tr.code}</span>
                          <span style={{ fontFamily: F.mono, fontSize: 9, color: 'rgba(255,255,255,0.4)', letterSpacing: 0.4 }}>{tr.ticket}</span>
                        </div>
                        <div style={{ fontFamily: F.sans, fontSize: 13, color: 'rgba(242,239,233,0.88)', fontWeight: 500 }}>{tr.name}</div>
                        <div style={{ fontFamily: F.mono, fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: 0.4, marginTop: 2 }}>{tr.cycle} cycle</div>
                      </a>
                    ))}
                  </div>
                  <div style={{ borderTop: `1px solid rgba(255,255,255,0.12)`, marginTop: 6, paddingTop: 6 }}>
                    <a href="/trades" style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '8px 14px', textDecoration: 'none',
                      fontFamily: F.mono, fontSize: 11, color: C.hi, letterSpacing: 1.2, fontWeight: 700,
                      background: 'rgba(250,98,21,0.08)',
                    }}>
                      <span>VIEW ALL 10 NICHES</span><span>→</span>
                    </a>
                  </div>
                </div>
              )}
            </div>

            {[['Pricing', '/pricing'], ['About', '/about'], ['FAQ', '/faq']].map(([label, href]) => {
              const active = (current || '').replace(/\.html$/, '').replace(/^\//, '') === href.replace(/^\//, '');
              return (
                <a key={href} href={href} style={{
                  color: active ? C.hi : C.ink, textDecoration: 'none',
                  paddingBottom: 4, borderBottom: active ? `2px solid ${C.hi}` : '2px solid transparent',
                  textTransform: 'uppercase',
                }}>{label}</a>
              );
            })}
          </div>

          {/* Right side buttons */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
            <Btn href="/revenue-simulator">CALCULATE PROFIT ▸</Btn>
            <Btn dark href="/book-scoping-call">GET STARTED ▸</Btn>
            <button className="nav-burger" aria-label="Open menu" onClick={() => setOpen(true)}>☰</button>
          </div>
        </div>

        {/* Mobile drawer */}
        <div className={`nav-drawer ${open ? 'open' : ''}`}>
          <button className="close" onClick={() => setOpen(false)}>CLOSE ✕</button>
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column' }}>
            {navItems.map(([label, href]) => (
              <a key={href} href={href}>{label}</a>
            ))}
            <a href="/trades">Niches</a>
            <a href="/revenue-simulator">Revenue simulator</a>
          </div>
          <div className="drawer-cta">
            <a className="primary" href="/book-scoping-call">GET STARTED ▸</a>
          </div>
        </div>
      </div>
    </>
  );
}

function CTA() {
  return (
    <section style={{ background: C.bg, position: 'relative' }}>
      <div style={{ padding: '120px 40px', maxWidth: 800, margin: '0 auto' }}>
        <Eyebrow>The opportunity</Eyebrow>
        <h2 style={{
          fontFamily: F.display, fontSize: 'clamp(64px, 7vw, 104px)', lineHeight: 0.88, letterSpacing: '-0.025em',
          color: C.ink, margin: '20px 0 32px', textTransform: 'uppercase',
        }}>
          Your city<br />is an asset.<br />
          <span style={{
            background: C.hi, padding: '0 12px', display: 'inline-block',
            border: `4px solid ${C.ink}`, marginTop: 8,
          }}>Lock it.</span>
        </h2>
        <p style={{ fontFamily: F.sans, fontSize: 17, lineHeight: 1.55, color: C.text, maxWidth: 520, marginBottom: 32 }}>
          Growth is planned, not an accident. One contractor per metro. Once it's locked, it's gone. The infrastructure we build is yours alone — territory included.
        </p>
        <Btn primary href="/book-scoping-call">GET STARTED ▸</Btn>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ padding: '48px 40px 32px', background: C.ink, color: C.panel }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 40 }}>
        <div>
          <div style={{ marginBottom: 16 }}>
            <img src="/img/logo-footer.png" alt="Deals To Grow" className="dtg-logo-footer" style={{ height: '72px', width: 'auto', display: 'block' }} />
          </div>
          <p style={{ fontFamily: F.sans, fontSize: 13, lineHeight: 1.55, color: C.faint, maxWidth: 320, margin: 0 }}>
            Sales infrastructure for home renovation businesses. One client per city. We build the system. You run the jobs.
          </p>
        </div>
        {[
          ['COMPANY', [['Done for you', '/done-for-you'], ['How it works', '/process'], ['Pricing', '/pricing'], ['Clients', '/clients'], ['About', '/about'], ['FAQ', '/faq']]],
          ['TRADES', [['General contractors', '/trades/general-contractors'], ['Epoxy', '/trades/epoxy'], ['Flooring', '/trades/flooring'], ['Roofing', '/trades/roofing'], ['Kitchen', '/trades/kitchen'], ['Bath', '/trades/bath'], ['Windows', '/trades/windows'], ['Pool', '/trades/pool'], ['HVAC', '/trades/hvac'], ['Landscaping', '/trades/landscaping']]],
          ['RESOURCES', [['Revenue simulator', '/revenue-simulator'], ['Ads inspiration', '/ads-inspiration'], ['Blog', '/blog'], ['Why Us', '/why-us'], ['vs. Agency', '/vs-agency'], ['Our guarantee', '/guarantee']]],
          ['START', [['Book scoping call', '/book-scoping-call'], ['Lock your city', '/book-scoping-call'], ['Privacy', '/privacy'], ['Terms', '/terms']]],
        ].map(([t, items]) => (
          <div key={t}>
            <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1.6, color: C.hi, fontWeight: 700, marginBottom: 16 }}>{t}</div>
            {items.map(([label, href]) => (
              <a key={label} href={href} style={{ display: 'block', fontFamily: F.sans, fontSize: 13, color: C.panel, marginBottom: 8, textDecoration: 'none' }}>{label}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 20, borderTop: `1px solid rgba(255,255,255,0.14)`, display: 'flex', justifyContent: 'space-between', fontFamily: F.mono, fontSize: 10, letterSpacing: 1.2, color: C.faint }}>
        <span>© 2026 DEALS TO GROW · ALL RIGHTS RESERVED</span>
        <span>PRIVACY · TERMS · BUILT IN MONTREAL, QC</span>
      </div>
    </footer>
  );
}

// Page-header banner used by all subpages
function PageHeader({ section, title, blurb, meta }) {
  return (
    <section id="overview" style={{ padding: '64px 40px 80px', borderBottom: `2px solid ${C.ink}` }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
        <Stamp color={C.hiDark}>{section}</Stamp>
        {meta && meta.map((m, i) => <Stamp key={i} color={C.ink}>{m}</Stamp>)}
      </div>
      <h1 style={{
        fontFamily: F.display, fontSize: 'clamp(56px, 7vw, 104px)', lineHeight: 0.88, letterSpacing: '-0.025em',
        color: C.ink, margin: 0, textTransform: 'uppercase', textWrap: 'balance', maxWidth: 1200,
      }}>
        {title}
      </h1>
      {blurb && (
        <p style={{
          fontFamily: F.sans, fontSize: 18, lineHeight: 1.55, color: C.text,
          maxWidth: 720, marginTop: 32,
        }}>{blurb}</p>
      )}
    </section>
  );
}

function CopyTicker() {
  const phrases = [
    'Hope is not a strategy',
    'Growth is planned — it\'s not an accident',
    'Forget buying leads — own your pipeline',
    'The revenue roller coaster ends here',
    'End the feast or famine stress',
    'Get booked weeks in advance',
    'Get jobs booked on demand',
    'Leads, quotes, and jobs to match your capacity',
    'Stand out from the competition',
    'We\'ll build your sales machine',
  ];
  const row = (key) => (
    <div key={key} aria-hidden={key !== 0} style={{ display: 'flex', alignItems: 'center', flexShrink: 0, paddingRight: 48 }}>
      {phrases.map((p, i) => (
        <React.Fragment key={i}>
          <span style={{ color: i % 2 === 0 ? C.bg : C.hi, paddingRight: 24 }}>{p.toUpperCase()}</span>
          <span style={{ color: 'rgba(255,255,255,0.35)', paddingRight: 24 }}>///</span>
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <section style={{ background: C.ink, color: C.bg, borderBottom: `2px solid ${C.ink}`, overflow: 'hidden', position: 'relative' }}>
      <style>{`
        @keyframes copyTickerScroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .copy-ticker-track {
          display: flex;
          width: max-content;
          animation: copyTickerScroll 60s linear infinite;
          will-change: transform;
        }
        .copy-ticker-track:hover { animation-play-state: paused; }
        @media (max-width: 768px) {
          .copy-ticker-track { animation-duration: 42s; }
        }
      `}</style>
      <div className="copy-ticker-track" style={{
        padding: '22px 0',
        fontFamily: F.display, fontSize: 'clamp(18px, 2.4vw, 30px)', letterSpacing: -0.3,
        textTransform: 'uppercase', fontWeight: 900, whiteSpace: 'nowrap',
      }}>
        {row(0)}
        {row(1)}
      </div>
    </section>
  );
}

Object.assign(window, {
  C, F, HazardStripe, Stamp, Eyebrow, SectionTitle, Btn,
  JumpNav, StickyBottomCTA,
  Nav, CTA, Footer, PageHeader, CopyTicker,
});