// Shared components for G5 Agri site

// Dial motif — the measuring marks from the flyer
function Dial({ size = 400, marks = [20, 40, 60, 80, 90], className = '', style = {} }){
  const cx = size/2, cy = size/2, r = size * 0.42;
  return (
    <svg className={`dial ${className}`} style={style} width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {Array.from({length: 40}).map((_,i)=>{
        const a = (i/40) * Math.PI * 1.2 - Math.PI * 0.6; // partial arc
        const x1 = cx + Math.cos(a) * r;
        const y1 = cy + Math.sin(a) * r;
        const x2 = cx + Math.cos(a) * (r - (i%5===0 ? 20 : 10));
        const y2 = cy + Math.sin(a) * (r - (i%5===0 ? 20 : 10));
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="currentColor" strokeWidth={i%5===0?2:1}/>;
      })}
      {marks.map((m,i)=>{
        const a = (i/(marks.length-1)) * Math.PI * 1.2 - Math.PI * 0.6;
        // spread marks across the tick arc
        const idx = Math.round((i/(marks.length-1)) * 39);
        const a2 = (idx/40) * Math.PI * 1.2 - Math.PI * 0.6;
        const x = cx + Math.cos(a2) * (r - 40);
        const y = cy + Math.sin(a2) * (r - 40);
        return <text key={i} x={x} y={y} fontFamily="Barlow Condensed" fontStyle="italic" fontWeight="700" fontSize="28" fill="currentColor" textAnchor="middle" dominantBaseline="middle">{m}</text>;
      })}
    </svg>
  );
}

// Logo mark (inline SVG extracted from brand logo)
function G5Logo({ height = 38, mono = false }){
  return (
    <img src="assets/g5-logo.svg" alt="G5 Agri" style={{height: height + 'px', width:'auto', filter: mono ? 'brightness(0) invert(1)' : 'none'}} />
  );
}

// Top nav
function Nav({ active = 'home', dark = false }){
  const links = [
    { id: 'home', label: 'Home', href: 'index.html' },
    { id: 'products', label: 'Products', href: 'products.html' },
    { id: 'about', label: 'About', href: 'about.html' },
    { id: 'resources', label: 'Resources', href: 'resources.html' },
    { id: 'contact', label: 'Contact', href: 'contact.html' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="nav-logo">
          <G5Logo height={36} />
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={`nav-link ${active===l.id?'active':''}`}>{l.label}</a>
          ))}
          <a href="contact.html" className="nav-cta">Request a Demo →</a>
        </div>
      </div>
    </nav>
  );
}

// Footer
function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <G5Logo height={56} mono />
            <div className="footer-tag">
              Meet is Weet<span className="sep">.</span> Measure to Know<span className="sep">.</span>
            </div>
            <p style={{color:'rgba(255,255,255,.65)', maxWidth:420, margin:0, fontSize:14}}>
              G5 Agri builds smart fuel management tools for South African farms and fleets.
              Meet is Weet.
            </p>
          </div>
          <div>
            <h4>Products</h4>
            <ul>
              <li><a href="products.html#pomptjom">PompTjom</a></li>
              <li><a href="products.html#tenktjom">TenkTjom</a></li>
              <li><a href="products.html#compare">Compare</a></li>
              <li><a href="index.html#rebate">SARS Rebate Calculator</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="about.html">About us</a></li>
              <li><a href="resources.html">Resources</a></li>
              <li><a href="resources.html#faq">FAQs</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Get in touch</h4>
            <ul>
              <li>+27 65 898 4281</li>
              <li>agri@g5j.co.za</li>
              <li style={{paddingTop:12, color:'rgba(255,255,255,.6)'}}>South Africa · Nationwide</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 G5 Agri (Pty) Ltd. All rights reserved.</div>
          <div>Built for farmers who measure.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Dial, G5Logo, Nav, Footer });