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

// ---------------------------------------------------------------- Icons (Lucide-style single stroke)
const Icon = ({ name, size = 32, color = "currentColor", strokeWidth = 1.75, style }) => {
  const paths = {
    search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    pen:    <><path d="M12 19l7-7 3 3-7 7-3-3z" /><circle cx="11" cy="11" r="2" /></>,
    target: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>,
    chart:  <><path d="M3 3v18h18" /><path d="M7 14l4-4 4 4 5-5" /></>,
    pin:    <><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></>,
    chevron:<polyline points="6 9 12 15 18 9" />,
    arrow:  <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
    check:  <polyline points="20 6 9 17 4 12" />,
    x:      <><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></>,
    phone:  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72a2 2 0 0 1 1.72 2z" />,
    star:   <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
    map:    <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" /><line x1="8" y1="2" x2="8" y2="18" /><line x1="16" y1="6" x2="16" y2="22" /></>,
    edit:   <><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" /></>,
    link:   <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></>,
    code:   <><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></>,
    layers: <><polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" /></>,
    file:   <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /></>,
    msg:    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />,
    quote:  <><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" /><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 .985 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={style}>
      {paths[name]}
    </svg>
  );
};

// ---------------------------------------------------------------- Nav
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkStyle = {
    display: 'inline-flex', alignItems: 'center', gap: 4,
    fontSize: 15, fontWeight: 500, color: 'var(--ink-black)',
    padding: '10px 12px', textDecoration: 'none', borderRadius: 6,
    cursor: 'pointer',
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: '#fff',
      borderBottom: '1px solid ' + (scrolled ? 'transparent' : 'var(--gray-300)'),
      boxShadow: scrolled ? 'var(--shadow-nav)' : 'none',
      transition: 'box-shadow .18s var(--ease-out)',
    }}>
      <div className="container" style={{
        height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <a href="#top" aria-label="Inbound Legal home" style={{ display: 'inline-flex' }}>
          <img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Inbound Legal" style={{ height: 32, display: 'block' }} />
        </a>

        <nav className="main-nav" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <a href="#problem" style={linkStyle}>Why us</a>
          <a href="#pricing" style={linkStyle}>Pricing</a>
          <a href="#process" style={linkStyle}>Process</a>
          <a href="#team" style={linkStyle}>Team</a>
          <a href="#results" style={linkStyle}>Results</a>
          <a href="#faq" style={linkStyle}>FAQ</a>
        </nav>

        <a href="#" onClick={(e) => e.preventDefault()} className="ub-convertable-trigger btn btn--primary" style={{ padding: '10px 20px', fontSize: 15, minHeight: 0 }}>
          Book a call
        </a>
      </div>
    </header>
  );
};

// ---------------------------------------------------------------- Wave divider
const Wave = ({ flip = false, prevBg = '#fff', nextBg = '#fff' }) => (
  <div style={{ position: 'relative', height: 100, background: nextBg, overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, background: prevBg, height: '50%' }} />
    <svg viewBox="0 0 1440 100" preserveAspectRatio="none" style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      transform: flip ? 'scaleY(-1)' : 'none',
    }}>
      <path d="M0,50 C220,10 460,90 720,45 C950,5 1200,75 1440,40 L1440,100 L0,100 Z"
            fill="var(--accent-yellow)" />
      <path d="M0,68 C220,38 480,98 740,60 C980,28 1220,80 1440,58 L1440,100 L0,100 Z"
            fill="var(--accent-red)" opacity="0.85" />
    </svg>
  </div>
);

// ---------------------------------------------------------------- Footer
const Footer = () => (
  <footer style={{ background: 'var(--ink-black)', color: 'rgba(255,255,255,0.7)', paddingBlock: 64, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 48, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'inline-block', background: '#fff', padding: '6px 8px', borderRadius: 6 }}>
            <img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Inbound Legal" style={{ height: 28, display: 'block' }} />
          </div>
          <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, maxWidth: 380 }}>
            Local marketing for law firms across Canada and the United States. Built and managed in-house by people who only work with attorneys.
          </p>
        </div>
        <FooterCol title="Program" links={['Foundation — $1,499/mo', 'Growth — $2,999/mo', 'Scale — $4,999/mo']} />
        <FooterCol title="Practice areas" links={['Personal injury', 'Criminal defence', 'Family law', 'Estate planning', 'Immigration']} />
        <FooterCol title="Company" links={['About', 'Case studies']} />
      </div>
      <div style={{
        marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        fontSize: 13, color: 'rgba(255,255,255,0.55)',
      }}>
        <div>© 2026 Inbound Legal. All rights reserved.</div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.04em', color: '#fff', textTransform: 'uppercase' }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {links.map(l => (
        <li key={l}>
          <a href="#" style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', textDecoration: 'none' }}
             onMouseEnter={e => e.currentTarget.style.color = '#fff'}
             onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.7)'}>{l}</a>
        </li>
      ))}
    </ul>
  </div>
);

Object.assign(window, { Icon, Nav, Wave, Footer });