// Terrain — shared components

const Logo = ({ size = 22 }) => (
  <span className="logo">
    <span className="logo-mark">
      <svg width={size} height={size} viewBox="0 0 22 22" fill="none">
        <path d="M2 17 L7 9 L11 13 L15 5 L20 17 Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round" />
        <circle cx="15" cy="5" r="1.6" fill="oklch(0.62 0.12 35)" />
      </svg>
    </span>
    <span>Terrain</span>
  </span>
);

const ArrowRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7H12M12 7L8 3M12 7L8 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Check = ({ size = 10 }) => (
  <svg width={size} height={size} viewBox="0 0 10 10" fill="none">
    <path d="M2 5L4 7L8 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#employees">AI Employees</a>
          <a href="#how">How it works</a>
          <a href="#practice">Practice areas</a>
          <a href="#security">Security</a>
        </div>
        <a href="https://cal.com/tejas-ag/30min" className="nav-cta">
          Book a demo
          <ArrowRight size={12} />
        </a>
      </div>
    </nav>
  );
};

// Topographic SVG background
const TopoBg = () => (
  <div className="hero-grid-bg" aria-hidden="true">
    <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="grid" width="56" height="56" patternUnits="userSpaceOnUse">
          <path d="M 56 0 L 0 0 0 56" fill="none" stroke="rgba(10,10,11,0.05)" strokeWidth="1" />
        </pattern>
        <radialGradient id="fade" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="white" stopOpacity="0" />
          <stop offset="100%" stopColor="#FAFAF7" stopOpacity="1" />
        </radialGradient>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
      {/* topo lines */}
      <g fill="none" stroke="oklch(0.62 0.12 35 / 0.18)" strokeWidth="1">
        <path d="M-50,720 Q360,640 720,680 T1490,620" />
        <path d="M-50,640 Q360,560 720,600 T1490,540" />
        <path d="M-50,560 Q360,500 720,520 T1490,460" strokeOpacity="0.6" />
        <path d="M-50,480 Q360,440 720,440 T1490,380" strokeOpacity="0.4" />
        <path d="M-50,400 Q360,380 720,360 T1490,300" strokeOpacity="0.25" />
      </g>
      <rect width="100%" height="100%" fill="url(#fade)" />
    </svg>
  </div>
);

const TrustRow = () => (
  <div className="trust">
    <div className="trust-label">Trusted by mid-market firms across the country</div>
    <div className="trust-row">
      <span className="trust-logo">Holloway <span className="amp">&amp;</span> Wren</span>
      <span className="trust-logo">Marston Legal</span>
      <span className="trust-logo">Carrillo Bayless</span>
      <span className="trust-logo">Northrop Estates</span>
      <span className="trust-logo">Dunne <span className="amp">&amp;</span> Park</span>
      <span className="trust-logo">Tatum Defense</span>
    </div>
  </div>
);

Object.assign(window, { Logo, ArrowRight, Check, Nav, TopoBg, TrustRow });