/* Clients · Insights · CTA · Footer · Sticky */
function Clients() {
  return (
    <section className="section" id="clients">
      <div className="wrap">
        <div className="clients__head reveal">
          <span className="kicker" style={{ justifyContent: "center" }}><span className="num">05</span> — Clients</span>
          <h2 style={{ marginTop: 16 }}>Trusted on the projects that build the nation.</h2>
        </div>
        <div className="client-grid reveal">
          {window.TRILOK.clients.map((c) => {
            const slug = c.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
            return (
              <div className="client" key={c}>
                <image-slot id={"client-" + slug} fit="contain" shape="rect" placeholder={c + " · logo · transparent PNG ~600 × 240px"}></image-slot>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Insights() {
  return (
    <section className="section" id="insights" style={{ background: "var(--surface-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="kicker"><span className="num">06</span> — Insights</span>
            <h2 className="sec-head__title">From the yard.</h2>
          </div>
          <p className="sec-head__aside">Notes on precast engineering, materials and the projects we're proud to be part of.</p>
        </div>
        <div className="ins-list reveal">
          {window.TRILOK.insights.map((it) => (
            <a className="ins" href="#insights" key={it.title}>
              <span className="ins__date">{it.date}</span>
              <div>
                <span className="ins__cat">{it.cat}</span>
                <div className="ins__title">{it.title}</div>
              </div>
              <span className="ins__arr"><i data-lucide="arrow-up-right"></i></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function EnquiryCTA() {
  return (
    <section className="cta" id="enquire">
      <div className="cta__grid-bg"></div>
      <div className="wrap section cta__inner">
        <div className="reveal">
          <span className="cta__k">Start a conversation</span>
          <h2>Have a drawing? Let's cast it in precast.</h2>
          <p className="cta__sub">Send us your specifications and quantities. We'll come back with grades, lead times and a quote — usually within two working days.</p>
        </div>
        <div className="cta__actions reveal">
          <a className="btn btn--white btn--lg" href="mailto:info@trilokinfratech.com">Request a quote <Arrow /></a>
          <a className="btn btn--outline btn--lg" href="mailto:info@trilokinfratech.com">Talk to our team</a>
          <div className="cta__call"><i data-lucide="map-pin" style={{ width: 15, height: 15 }}></i> Surat, Gujarat · India</div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { products, nav } = window.TRILOK;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <img className="brand-logo" src="assets/trilok-logo-light.png" alt="Trilok Infratech" style={{ height: 40 }} />
            <p className="footer__about">Precast concrete manufacturer building the drainage, crossings and boundaries of a growing India since 2005.</p>
          </div>
          <div className="footer__col">
            <h5>Products</h5>
            {products.map((p) => <a key={p.id} href={p.href}>{p.title}</a>)}
          </div>
          <div className="footer__col">
            <h5>Company</h5>
            {nav.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
          </div>
          <div className="footer__col">
            <h5>Contact</h5>
            <p>Nana Varachha,<br />Surat, Gujarat — India</p>
            <a href="mailto:info@trilokinfratech.com">info@trilokinfratech.com</a>
            <a href="https://trilokinfratech.com" target="_blank" rel="noopener">trilokinfratech.com</a>
            <p style={{ color: "var(--bone-3)", fontFamily: "var(--mono)", fontSize: 12 }}>GST 24AASFT2859A1Z2</p>
          </div>
        </div>
        <div className="footer__bottom">
          <div className="footer__bottom-left">
            <p>© {new Date().getFullYear()} Trilok Infratech Pvt Ltd · Future of Bharat</p>
            <div className="footer__legal">
              <a href="privacy.html">Privacy Policy</a>
              <a href="terms.html">Terms &amp; Conditions</a>
            </div>
          </div>
          <div className="footer__socials">
            <a href="https://in.linkedin.com/company/trilok-infratech" target="_blank" rel="noopener" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V23h-4V8zm7.5 0h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.6c0-1.57-.03-3.6-2.2-3.6-2.2 0-2.53 1.72-2.53 3.49V23h-4V8z"/></svg>
            </a>
            <a href="#" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"></circle></svg>
            </a>
            <a href="#" aria-label="Facebook">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.6c-.3-.04-1.3-.13-2.45-.13-2.43 0-4.1 1.48-4.1 4.2v2.34H7.6V14h2.55v8h3.35z"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 7.5c-.25-1-.95-1.7-1.95-1.95C19.3 5.1 12 5.1 12 5.1s-7.3 0-9.05.45C1.95 5.8 1.25 6.5 1 7.5.55 9.25.55 12 .55 12s0 2.75.45 4.5c.25 1 .95 1.7 1.95 1.95C4.7 18.9 12 18.9 12 18.9s7.3 0 9.05-.45c1-.25 1.7-.95 1.95-1.95.45-1.75.45-4.5.45-4.5s0-2.75-.45-4.5zM9.75 15.25v-6.5L15.5 12l-5.75 3.25z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function StickyCTA({ onEnquire }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 1.1);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button className={"sticky-cta" + (show ? " show" : "")} onClick={onEnquire}>
      <i data-lucide="message-square"></i><span>Request a quote</span>
    </button>
  );
}

Object.assign(window, { Clients, Insights, EnquiryCTA, Footer, StickyCTA });
