/* Products · About */
function Products() {
  const products = window.TRILOK.products;
  return (
    <section className="section" id="products">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="kicker"><span className="num">01</span> — Products</span>
            <h2 className="sec-head__title">Four product lines, cast to spec.</h2>
          </div>
          <p className="sec-head__aside">From highway U-drains to retaining systems, every line is cast under factory control in high-performance grades from M50 to M75.</p>
        </div>

        <div className="prod-grid reveal">
          {products.map((p, i) => (
            <a className="prod" href={p.href} key={p.id}>
              <div className="prod__top">
                <span className="prod__num">0{i + 1}</span>
                <span className="prod__icon"><i data-lucide={p.icon}></i></span>
              </div>
              <div className="prod__media">
                <image-slot id={p.id} shape="rect" placeholder={"Drop " + p.title + " photo · upload 1200 × 750px (16:10)"}></image-slot>
              </div>
              <h3 className="prod__title">{p.title}</h3>
              <p className="prod__desc">{p.desc}</p>
              <div className="prod__specs">
                {p.specs.map((s) => <span className="spec" key={s}>{s}</span>)}
              </div>
              <span className="prod__arrow">Specifications <Arrow /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section about" id="about">
      <div className="wrap">
        <div className="about__grid">
          <div className="about__portrait reveal">
            <image-slot id="about-facility" shape="rect" placeholder="Drop facility / leadership photo · upload 1200 × 1500px (4:5 portrait)"></image-slot>
            <span className="tag mono">CASTING YARD · SURAT</span>
          </div>
          <div className="reveal">
            <span className="kicker"><span className="num">02</span> — Who we are</span>
            <p className="about__statement" style={{ marginTop: 18 }}>
              Since 2005, we've grown from a single Surat yard into a precast partner building the <span className="hl">future of Bharat</span> — one drain, culvert and wall at a time.
            </p>
            <p className="about__body">
              We work with the engineers, contractors and government bodies shaping India's roads, railways and cities. Our role is quiet but load-bearing: precise concrete that's already cured, tested and ready the day it reaches site.
            </p>
            <div className="about__mv">
              <div>
                <h4>Mission</h4>
                <p>Become India's most trusted precast manufacturer — setting the standard for strength and sustainability.</p>
              </div>
              <div>
                <h4>Vision</h4>
                <p>By 2030, lead the world in precast concrete, known for durability, innovation and responsible building.</p>
              </div>
            </div>
            <div className="signature">
              <div className="signature__line">
                <div className="signature__name">Trilok Infratech Pvt Ltd</div>
                <div className="signature__role">Surat, Gujarat · Established 2005</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Products, About });