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

/* ====== Image library ====== */
const IMG = {
  heroFeature: "assets/hero-feature.jpg",
  // Product close-ups
  prodInwardOutward: "assets/prod-inward-outward.jpg",
  prodTopHung: "assets/prod-top-hung.jpg",
  prodTiltTurn: "assets/prod-tilt-turn.jpg",
  prodFixedGlazing: "assets/prod-fixed-glazing.jpg",
  prodTwoTrack: "assets/prod-two-track.jpg",
  prodThreeTrack: "assets/prod-three-track.jpg",
  prodMonorail: "assets/prod-monorail.jpg",
  prodFlyMesh: "assets/prod-fly-mesh.jpg",
  prodFrenchDoor: "assets/prod-french-door.jpg",
  prodMultiSliding: "assets/prod-multi-sliding.jpg",
  // Finish swatches
  finishWhite: "assets/finish-white.jpg",
  finishOak: "assets/finish-oak.jpg",
  finishWalnut: "assets/finish-walnut.jpg",
  finishGrey: "assets/finish-grey.jpg",
  // Gallery installations
  gallery1: "assets/gallery-1.jpg",
  gallery2: "assets/gallery-2.jpg",
  gallery3: "assets/gallery-3.jpg",
  gallery4: "assets/gallery-4.jpg",
  gallery5: "assets/gallery-5.jpg",
  gallery6: "assets/gallery-6.jpg",
};

/* ====== Small icon set ====== */
const I = {
  phone: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><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 22 16.92z"/></svg>,
  mail: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  clock: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>,
  tick: (p) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20,6 9,17 4,12"/></svg>,
  arrow: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12,5 19,12 12,19"/></svg>,
  shield: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>,
  wind: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9.59 4.59A2 2 0 1 1 11 8H2"/><path d="M17.73 2.27A2.5 2.5 0 1 1 19.5 6.5H2"/><path d="M14.83 21.41A2 2 0 1 0 16 18H2"/></svg>,
  speaker: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="22" y1="3" x2="16" y2="21"/></svg>,
  leaf: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2c1 1.7 1 5.7-3 11.2C13.7 17.2 11 20 11 20z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></svg>,
  thermo: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>,
  sparkle: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l1.9 5.5L19.5 10l-5.6 1.5L12 17l-1.9-5.5L4.5 10l5.6-1.5z"/></svg>,
  call: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><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 22 16.92z"/></svg>,
  map: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  step1: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  step2: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21V12h6v9"/></svg>,
  step3: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,
  step4: (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6 9 17l-5-5"/></svg>,
  fb: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M22 12a10 10 0 1 0-11.56 9.88V14.9H7.9v-2.9h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.9h-2.33v6.98A10 10 0 0 0 22 12z"/></svg>,
  ig: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>,
  ln: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 1 1 8.3 6.5a1.78 1.78 0 0 1-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93-.83 0-1.62.63-1.62 1.97V19h-3v-9h2.9v1.3a3.11 3.11 0 0 1 2.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>,
};

/* ====== TopBar ====== */
const TopBar = ({ data }) => (
  <div className="topbar">
    <div className="topbar-inner">
      <div className="topbar-left">
        <span><span className="dot"></span>Always Open • 24/7</span>
        <a href={`tel:${data.phone1.replace(/\s/g,'')}`} style={{display:'inline-flex',alignItems:'center',gap:6}}>
          <I.phone /> {data.phone1}
        </a>
        <a href={`mailto:${data.email}`} className="hide-sm" style={{display:'inline-flex',alignItems:'center',gap:6}}>
          <I.mail /> {data.email}
        </a>
      </div>
      <div className="topbar-right">
        <span>Showroom: Rajajinagar, Bangalore</span>
      </div>
    </div>
  </div>
);

/* ====== Header ====== */
const Header = ({ data, onCTA }) => (
  <header className="header">
    <div className="header-inner">
      <a href="#" className="brand-mark" aria-label="V-Tech Building Systems">
        <VTechLogo size={48} />
        <div>
          <div className="name">V-TECH</div>
          <div className="sub">Building Systems Pvt. Ltd</div>
        </div>
      </a>
      <nav className="header-nav">
        <a href="#products">Products</a>
        <a href="#why">Why uPVC</a>
        <a href="#process">Process</a>
        <a href="#reviews">Reviews</a>
        <a href="#contact">Contact</a>
      </nav>
      <div className="header-cta">
        <a href={`tel:${data.phone1.replace(/\s/g,'')}`} className="call-pill">
          <span className="icon"><I.phone /></span>
          <span className="label-stack">
            <span style={{display:'block',fontSize:11,color:'var(--ink-2)',fontWeight:500}}>Talk to expert</span>
            <span style={{display:'block'}}>{data.phone1}</span>
          </span>
        </a>
        <button className="btn btn-primary hide-sm" onClick={onCTA}>Get Free Quote</button>
      </div>
    </div>
  </header>
);

/* Render a headline string with optional **bold** and *italic* (italic = brand-colored, underlined). */
const renderRich = (str) => {
  if (!str) return null;
  // Split on **bold** then on *italic*
  const parts = [];
  let rest = str;
  let key = 0;
  const re = /(\*\*[^*]+\*\*|\*[^*]+\*)/g;
  let last = 0; let m;
  while ((m = re.exec(str)) !== null) {
    if (m.index > last) parts.push(str.slice(last, m.index));
    const tok = m[0];
    if (tok.startsWith("**")) parts.push(<strong key={key++}>{tok.slice(2,-2)}</strong>);
    else parts.push(<em key={key++}>{tok.slice(1,-1)}</em>);
    last = m.index + tok.length;
  }
  if (last < str.length) parts.push(str.slice(last));
  return parts;
};

/* ====== Hero ====== */
const Hero = ({ data, leadFormRef, formProps, headline }) => {
  const hl = headline || "Premium *uPVC Windows* & Doors for Indian homes that last";
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="dot" style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)'}}></span>
            India's <b>#1 uPVC Windows</b> Manufacturer • Bangalore
          </div>
          <h1>{renderRich(hl)}</h1>
          <p className="hero-sub">
            Energy-efficient, soundproof &amp; weather-tested for 25,000+ hours. Designed
            and manufactured in Bangalore using European-grade raw material.
            <strong style={{color:'var(--brand-ink)'}}> 20+ years of trust.</strong>
          </p>
          <div className="hero-bullets">
            {[
              "100% lead-free uPVC profile",
              "10-year manufacturer warranty",
              "Soundproof & dust-proof seal",
              "Free on-site measurement",
            ].map((b) => (
              <div className="hero-bullet" key={b}>
                <span className="tick"><I.tick /></span>
                <span>{b}</span>
              </div>
            ))}
          </div>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg" onClick={() => leadFormRef.current?.scrollIntoView({behavior:'smooth',block:'center'})}>
              Book Free Site Visit <I.arrow />
            </button>
            <a href={`tel:${data.phone1.replace(/\s/g,'')}`} className="btn btn-ghost btn-lg">
              <I.call /> Call {data.phone1}
            </a>
          </div>
          <div className="hero-trust">
            <span className="stars">★★★★★</span>
            <span><b style={{color:'var(--brand-ink)'}}>4.8/5</b> from 1 Lakh+ happy customers across India</span>
          </div>
        </div>

        <div ref={leadFormRef}>
          <LeadForm {...formProps} />
        </div>
      </div>
    </section>
  );
};

/* ====== Lead Form ====== */
const LeadForm = ({ headline, sub, ctaLabel, offer, onSubmit }) => {
  const [color, setColor] = useState("white");
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ first: "", last: "", phone: "", email: "", req: "" });
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.first || !form.phone) return;
    setSubmitted(true);
    onSubmit && onSubmit({ ...form, color });
  };

  if (submitted) {
    return (
      <div className="lead-card" style={{textAlign:'center', padding:'48px 28px'}}>
        <div style={{width:64,height:64,borderRadius:'50%',background:'var(--ok)',color:'white',display:'grid',placeItems:'center',margin:'0 auto 18px'}}>
          <I.tick width="32" height="32" />
        </div>
        <h3 style={{fontSize:24}}>Thanks, {form.first}!</h3>
        <p style={{marginTop:8,color:'var(--ink-2)'}}>
          Our team will call you within <b style={{color:'var(--brand)'}}>15 minutes</b> on {form.phone} to schedule your free site visit.
        </p>
        <div style={{marginTop:20,padding:'12px 16px',background:'var(--paper)',borderRadius:10,fontSize:13,color:'var(--ink-2)'}}>
          Or call us directly: <a href="tel:+919740422863" style={{color:'var(--accent-deep)',fontWeight:700}}>+91 97404 22863</a>
        </div>
      </div>
    );
  }

  return (
    <form className="lead-card" onSubmit={submit}>
      <div className="ribbon">Limited Offer</div>
      <h3>{headline}</h3>
      <p className="lead-sub">{sub}</p>
      {offer && (
        <div className="price-strip">
          <I.sparkle width="16" height="16" />
          <span>{offer}</span>
        </div>
      )}
      <div className="field-row">
        <div className="field">
          <label>First name <span className="req">*</span></label>
          <input className="input" placeholder="Rahul" value={form.first} onChange={update("first")} required />
        </div>
        <div className="field">
          <label>Last name</label>
          <input className="input" placeholder="Kumar" value={form.last} onChange={update("last")} />
        </div>
      </div>
      <div className="field">
        <label>Phone <span className="req">*</span></label>
        <input className="input" type="tel" inputMode="numeric" placeholder="+91 9XXXX XXXXX" value={form.phone} onChange={update("phone")} required />
      </div>
      <div className="field">
        <label>Email</label>
        <input className="input" type="email" placeholder="you@example.com" value={form.email} onChange={update("email")} />
      </div>
      <div className="field">
        <label>Color preference <span className="req">*</span></label>
        <div className="color-options">
          {[
            { id: "white", label: "White", cls: "swatch-white" },
            { id: "wood", label: "Wooden Finish", cls: "swatch-wood" },
            { id: "grey", label: "Grey", cls: "swatch-grey" },
            { id: "black", label: "Black", cls: "swatch-black" },
          ].map((c) => (
            <button
              key={c.id}
              type="button"
              className={`color-chip ${color === c.id ? "active" : ""}`}
              onClick={() => setColor(c.id)}
            >
              <span className={`color-swatch ${c.cls}`}></span>
              {c.label}
            </button>
          ))}
        </div>
      </div>
      <button type="submit" className="btn btn-primary btn-lg btn-block" style={{marginTop:4}}>
        {ctaLabel} <I.arrow />
      </button>
      <p className="legal">
        🔒 Your details are safe with us. No spam, ever.
        We'll call within <b>15 minutes</b>.
      </p>
    </form>
  );
};

/* ====== Hero side visual ====== */
const HeroVisual = () => (
  <div className="hero-side">
    <div className="hero-window">
      <div className="pane tree"></div>
      <div className="pane"></div>
      <div className="pane"></div>
      <div className="pane tree"></div>
    </div>
    <div className="hero-side-floater">
      <div>
        <div className="num">25K+</div>
        <div className="lab">Hours weather tested</div>
      </div>
    </div>
    <div className="hero-side-badge">
      <div className="seal" style={{background:'white',padding:4}}>
        <img src="assets/vtech-logo.png" alt="" style={{width:'100%',height:'100%',objectFit:'contain'}} />
      </div>
      <div>
        <div className="label">Subjected to extreme weather, surpasses</div>
        <div className="value">European quality standards →</div>
      </div>
    </div>
  </div>
);

/* ====== Stats strip ====== */
const Stats = () => (
  <div className="stats">
    <div className="stats-inner">
      {[
        { num: "1 Lakh+", lab: "Happy Customers" },
        { num: "200+", lab: "Projects Completed" },
        { num: "20+", lab: "Years of Experience" },
        { num: "5+", lab: "Quality Certifications" },
      ].map((s, i) => (
        <div className="stat" key={i}>
          <div className="num"><em>{s.num.match(/^[\d.]+/)?.[0]}</em>{s.num.replace(/^[\d.]+/, '')}</div>
          <div className="lab">{s.lab}</div>
        </div>
      ))}
    </div>
  </div>
);

/* ====== Why uPVC ====== */
const Why = () => {
  const benefits = [
    { icon: <I.thermo />, title: "Energy Efficient", desc: "Multi-chambered profiles + double glazing keep your home up to 8°C cooler, slashing AC bills." },
    { icon: <I.speaker />, title: "Soundproof", desc: "Up to 42dB sound insulation. Sleep better even on busy roads — perfect for Bangalore traffic." },
    { icon: <I.wind />, title: "Dust & Weather Proof", desc: "EPDM gasket seal blocks dust, monsoon water and pollen. Built for Indian climate extremes." },
    { icon: <I.shield />, title: "Maintenance Free", desc: "No painting, no rusting, no termites. Wipe with a damp cloth — looks new for decades." },
    { icon: <I.leaf />, title: "100% Lead Free", desc: "Made with European-grade raw material from Fortune 500 suppliers. Safe for your family." },
    { icon: <I.sparkle />, title: "Surpasses EU Standards", desc: "25,000+ hours of weather testing. Outperforms European quality benchmarks in every test." },
  ];
  return (
    <section id="why">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Why Choose uPVC</div>
          <h2>Six reasons families switch to <em>V-Tech uPVC</em></h2>
          <p>Wooden frames warp. Aluminium conducts heat. uPVC does neither — and it lasts 30+ years.</p>
        </div>
        <div className="why-grid">
          {benefits.map((b, i) => (
            <div className="benefit" key={i}>
              <div className="icon-square">{b.icon}</div>
              <div className="num">0{i+1}</div>
              <h3>{b.title}</h3>
              <p>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== Products ====== */
const Products = ({ onQuote }) => {
  const tabs = [
    { id: "all", label: "All", count: 9 },
    { id: "casement", label: "Casement", count: 4 },
    { id: "sliding", label: "Sliding", count: 4 },
    { id: "doors", label: "Doors", count: 2 },
  ];
  const [active, setActive] = useState("all");

  const items = [
    { id: 1, cat: "casement", name: "Inward / Outward Opening", desc: "Classic side-hinged windows. Opens fully for maximum airflow.", img: IMG.prodInwardOutward, badge: "Best Seller" },
    { id: 2, cat: "casement", name: "Top Hung Casement", desc: "Hinged at the top, opens outward. Great for bathrooms & rain protection.", img: IMG.prodTopHung },
    { id: 3, cat: "casement", name: "Tilt & Turn Casement", desc: "Two ways to open — tilt for ventilation, turn for full access.", img: IMG.prodTiltTurn, badge: "Premium" },
    { id: 4, cat: "casement", name: "Fixed Glazing", desc: "Floor-to-ceiling fixed windows for unobstructed views.", img: IMG.prodFixedGlazing },
    { id: 5, cat: "sliding", name: "Two Track Sliding", desc: "Space-saving sliders with smooth rolling movement.", img: IMG.prodTwoTrack, badge: "Popular" },
    { id: 6, cat: "sliding", name: "Three Track Sliding", desc: "Wider openings, more glass. Perfect for living rooms & balconies.", img: IMG.prodThreeTrack },
    { id: 7, cat: "sliding", name: "Monorail Sliding", desc: "Premium single-track sliders for a clean, modern look.", img: IMG.prodMonorail },
    { id: 8, cat: "sliding", name: "Fly Mesh Sliding", desc: "Inbuilt mosquito mesh. Keep windows open without the bugs.", img: IMG.prodFlyMesh },
    { id: 9, cat: "doors", name: "French Doors", desc: "Elegant double doors for patios, balconies & garden access.", img: IMG.prodFrenchDoor, badge: "Elegant" },
    { id: 10, cat: "doors", name: "Multi Sliding Doors", desc: "Wide-span sliders for villas. Up to 4 panels.", img: IMG.prodMultiSliding },
  ];

  const visible = items.filter((i) => active === "all" || i.cat === active);

  return (
    <section id="products" className="products-section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Window &amp; Door Range</div>
          <h2>A <em>complete uPVC range</em> — engineered in Bangalore</h2>
          <p>From compact bathroom windows to wide-span villa doors, every system is custom-made to your opening.</p>
        </div>
        <div className="product-tabs">
          {tabs.map((t) => (
            <button
              key={t.id}
              className={`product-tab ${active === t.id ? "active" : ""}`}
              onClick={() => setActive(t.id)}
            >
              {t.label}<span className="count">({t.count})</span>
            </button>
          ))}
        </div>
        <div className="products-grid">
          {visible.slice(0,9).map((p) => (
            <ProductCard key={p.id} p={p} onQuote={onQuote} />
          ))}
        </div>
      </div>
    </section>
  );
};

const ProductCard = ({ p, onQuote }) => {
  return (
    <div className="product-card">
      <div className="product-img">
        {p.badge && <div className="badge">{p.badge}</div>}
        <img
          src={p.img}
          alt={p.name}
          loading="lazy"
          onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentElement.classList.add('img-fallback'); }}
        />
      </div>
      <div className="product-info">
        <h3>{p.name}</h3>
        <p>{p.desc}</p>
        <button className="link" onClick={onQuote}>
          Get Quote <I.arrow />
        </button>
      </div>
    </div>
  );
};

/* ====== Process ====== */
const Process = () => {
  const steps = [
    { ic: <I.step1 />, title: "Book Free Visit", desc: "Share your details. Our expert visits at a time that suits you." },
    { ic: <I.step2 />, title: "Site Measurement", desc: "Accurate laser measurement and design recommendations for every opening." },
    { ic: <I.step3 />, title: "Custom Manufacturing", desc: "We manufacture in our Bengaluru factory using European-grade profiles." },
    { ic: <I.step4 />, title: "Installation & Warranty", desc: "Clean installation by our team + 10-year manufacturer warranty." },
  ];
  return (
    <section id="process" className="process">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">From quote to install in 21 days</div>
          <h2>How it <em>works</em></h2>
          <p>A simple four-step process. We handle measurement, design, manufacturing and installation — all in-house.</p>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div className="process-step" key={i}>
              <div className="num-big">0{i+1}</div>
              <div className="step-icon">{s.ic}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== Finishes ====== */
const Finishes = () => {
  const finishes = [
    { lab: "Classic White", desc: "Timeless. The most popular choice.", img: IMG.finishWhite, dark: false },
    { lab: "Golden Oak", desc: "Warm wood-grain laminate.", img: IMG.finishOak, dark: true },
    { lab: "Dark Walnut", desc: "Rich teak-like finish.", img: IMG.finishWalnut, dark: true },
    { lab: "Anthracite Grey", desc: "Modern, architectural look.", img: IMG.finishGrey, dark: true },
  ];
  return (
    <section className="finishes-section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Color & Texture Options</div>
          <h2>Choose a finish that <em>fits your home</em></h2>
          <p>Premium foil-laminated finishes that won't fade, peel or need repainting.</p>
        </div>
        <div className="finish-grid">
          {finishes.map((f, i) => (
            <div className={`finish-card ${f.dark ? "" : "finish-light"}`} key={i}>
              <img src={f.img} alt={f.lab} className="finish-img" loading="lazy" />
              <div className="finish-overlay"></div>
              <div className="lab">{f.lab}</div>
              <div className="desc">{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== Gallery: real installations ====== */
const Gallery = () => {
  const shots = [
    { img: IMG.gallery1, cap: "Modern home exterior, Bangalore", tag: "Casement + Fixed" },
    { img: IMG.gallery2, cap: "Premium tower balcony, Hebbal", tag: "Multi-Sliding Doors" },
    { img: IMG.gallery3, cap: "Independent villa, Sarjapur Rd", tag: "Casement + Fixed" },
    { img: IMG.gallery4, cap: "High-rise apartment, Indiranagar", tag: "Fixed Glazing" },
    { img: IMG.gallery5, cap: "Garden-facing villa, Whitefield", tag: "French Door" },
    { img: IMG.gallery6, cap: "Bedroom installation, Bangalore", tag: "Soundproof Casement" },
  ];
  return (
    <section className="gallery-section" id="gallery">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Recent Installations</div>
          <h2>200+ projects across <em>Bangalore &amp; beyond</em></h2>
          <p>A glimpse of real V-Tech windows installed in Bangalore homes &amp; commercial spaces.</p>
        </div>
        <div className="gallery-grid">
          {shots.map((s, i) => (
            <a className="gallery-card" key={i} href="#" onClick={(e) => e.preventDefault()}>
              <img src={s.img} alt={s.cap} loading="lazy" />
              <div className="gallery-meta">
                <div className="gallery-tag">{s.tag}</div>
                <div className="gallery-cap">{s.cap}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== Clients ====== */
const Clients = () => {
  // Real V-Tech client logos hot-linked from their own CDN.
  const clients = [
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture1.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture2.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture3.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture4.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture5.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture7.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture8.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture9.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture10.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture11.png",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture13.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture14.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture15.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture16.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture17.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture18.png",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture19.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture20.jpg",
    "https://vtechwindows.com/wp-content/uploads/2026/01/Picture21.png",
    "https://vtechwindows.com/wp-content/uploads/2026/01/logo-dayananda-college.png",
  ];
  return (
    <section className="clients">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Trusted by India's Best</div>
          <h2>Specified by <em>200+ leading</em> builders &amp; institutions</h2>
          <p>From luxury residential towers to hospitals, malls and IT parks across India.</p>
        </div>
        <div className="clients-grid">
          {clients.map((src, i) => (
            <div className="client-logo" key={i}>
              <img src={src} alt="Client logo" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Multi-color "G" mark used by Google Reviews widgets. */
const GoogleG = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-label="Google">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.23 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/>
    <path fill="#FBBC05" d="M5.84 14.11A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.11V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/>
  </svg>
);

/* ====== Reviews — Google-Reviews style ====== */
const Reviews = () => {
  const reviews = [
    { name: "Priya Sharma", place: "Whitefield", when: "2 weeks ago", color: "#1a73e8", q: "The traffic noise on Old Airport Road used to keep us up. After V-Tech installed sliding windows in the bedroom, it's completely silent. Genuine quality." },
    { name: "Anand Reddy", place: "HSR Layout", when: "a month ago", color: "#34a853", q: "Got quotes from 3 vendors. V-Tech wasn't the cheapest but the build quality, German hardware, and 10-year warranty made the choice easy. Installation was super clean." },
    { name: "Meera Iyer", place: "Sarjapur Road", when: "3 weeks ago", color: "#ea4335", q: "Monsoon used to flood our balcony. We replaced 11 windows and the French door with V-Tech. Zero leakage in two monsoons. Highly recommend." },
    { name: "Karthik V.", place: "Indiranagar", when: "5 days ago", color: "#fbbc05", q: "The tilt-and-turn windows are a game changer. Easy to clean from inside, locks properly, and the wooden finish looks premium. Worth every rupee." },
    { name: "Sunita Rao", place: "Jayanagar", when: "2 months ago", color: "#9c27b0", q: "Their site visit was on time, the quote was transparent — no hidden costs. Factory tour convinced us. AC bills came down nearly 30% after installation." },
    { name: "Rohan Mehta", place: "Hebbal", when: "a month ago", color: "#0e4b8c", q: "I had aluminium windows before and they used to rust every monsoon. Switched to V-Tech uPVC across the villa. Two years in — looks brand new." },
  ];
  return (
    <section id="reviews" className="reviews">
      <div className="container">
        <div className="reviews-head">
          <div className="reviews-rating">
            <GoogleG size={28} />
            <div>
              <div className="reviews-score">
                <span className="num">4.8</span>
                <span className="g-stars">★★★★★</span>
              </div>
              <div className="reviews-meta">Based on <b>1,250+ Google reviews</b></div>
            </div>
          </div>
          <a className="reviews-link" href="#" onClick={(e)=>e.preventDefault()}>
            See all reviews <I.arrow />
          </a>
        </div>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <div className="review" key={i} data-comment-anchor={i === 2 ? "cc-6" : undefined}>
              <div className="review-head">
                <div className="avatar" style={{ background: r.color }}>{r.name.charAt(0)}</div>
                <div className="review-id">
                  <div className="name">{r.name}</div>
                  <div className="sub">
                    <span className="local-guide">Local Guide</span>
                    <span className="dot-sep">·</span>
                    <span>{r.place}</span>
                  </div>
                </div>
                <div className="review-g" aria-hidden="true"><GoogleG size={16} /></div>
              </div>
              <div className="review-stars-row">
                <span className="g-stars">★★★★★</span>
                <span className="when">{r.when}</span>
              </div>
              <p className="quote">{r.q}</p>
              <div className="review-foot">
                <button className="helpful" type="button">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                  Helpful
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== FAQ ====== */
const FAQ = () => {
  const items = [
    { q: "How long does the entire process take?", a: "From your first site visit to final installation, the typical timeline is 18–21 days. This includes measurement, design approval, custom manufacturing in our Bengaluru factory, and on-site installation by our certified team." },
    { q: "Are V-Tech uPVC windows costlier than aluminium?", a: "On day one, uPVC windows are about 10–20% costlier than aluminium. But over a 15-year period, the lower energy bills (better insulation), zero maintenance, and longer lifespan make uPVC significantly cheaper. We provide a transparent ROI calculation during your site visit." },
    { q: "What warranty do you provide?", a: "We offer a 10-year manufacturer warranty on the uPVC profile and 2 years on hardware (locks, hinges, rollers). Glass is covered against manufacturing defects. Our team also provides free annual service for the first two years." },
    { q: "Can I see your products before deciding?", a: "Yes! Visit our showroom at M.N.S. Arcade, Rajajinagar, Bangalore — Dr. Rajkumar Road, 6th Block. You can also tour our manufacturing facility at Kalenahalli. We strongly recommend visiting before finalizing." },
    { q: "Do you handle removal of old windows?", a: "Absolutely. Our installation team safely removes existing windows, disposes of debris, and installs the new ones — no separate contractor needed. We also fix any wall damage post-installation." },
    { q: "Which areas do you serve?", a: "We serve all of Bangalore — Whitefield, Sarjapur, Electronic City, HSR, Indiranagar, Hebbal, Jayanagar, Rajajinagar and surroundings. We also undertake large projects across Karnataka and pan-India through our developer network." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Frequently Asked</div>
          <h2>Everything you wanted to <em>ask about uPVC</em></h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {it.q}
                <span className="plus">+</span>
              </button>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== Final CTA + Contact ====== */
const FinalCTA = ({ data, onQuote }) => (
  <section className="final-cta" id="contact">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow" style={{color:'var(--accent)'}}>Ready to upgrade?</div>
        <h2>Book your <em style={{color:'var(--accent)'}}>free site consultation</em> today</h2>
        <p>Our expert will visit, measure your openings, suggest the right window system, and give you a transparent quote — no obligation.</p>
        <div style={{marginTop:28,display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
          <button className="btn btn-primary btn-lg" onClick={onQuote}>Book Free Site Visit <I.arrow /></button>
          <a href={`tel:${data.phone1.replace(/\s/g,'')}`} className="btn btn-ghost btn-lg" style={{background:'transparent',color:'white',borderColor:'rgba(255,255,255,0.25)'}}>
            <I.call /> Call {data.phone1}
          </a>
        </div>
      </div>

      <div className="contact-grid">
        <div className="contact-card">
          <h3>Showroom</h3>
          <div className="label-line">Visit us in Rajajinagar</div>
          <div className="contact-line">
            <span className="ic"><I.map /></span>
            <div>
              <div className="lbl">Address</div>
              <div className="val">No. 693, M.N.S Arcade, East Facing 3rd Floor,<br/>Dr. Rajkumar Rd, 6th Block, Rajajinagar,<br/>Bangalore, Karnataka — 560010</div>
            </div>
          </div>
          <div className="contact-line">
            <span className="ic"><I.phone /></span>
            <div>
              <div className="lbl">Phone</div>
              <div className="val">
                <a href={`tel:${data.phone1.replace(/\s/g,'')}`}>{data.phone1}</a><br/>
                <a href={`tel:${data.phone2.replace(/\s/g,'')}`}>{data.phone2}</a>
              </div>
            </div>
          </div>
          <div className="contact-line">
            <span className="ic"><I.mail /></span>
            <div>
              <div className="lbl">Email</div>
              <div className="val"><a href={`mailto:${data.email}`}>{data.email}</a></div>
            </div>
          </div>
        </div>

        <div className="contact-card">
          <h3>Factory</h3>
          <div className="label-line">State-of-the-art manufacturing</div>
          <div className="contact-line">
            <span className="ic"><I.map /></span>
            <div>
              <div className="lbl">Address</div>
              <div className="val">4GW7+P2Q, Kalenahalli,<br/>Bengaluru, Karnataka — 560089</div>
            </div>
          </div>
          <div className="contact-line">
            <span className="ic"><I.clock /></span>
            <div>
              <div className="lbl">Hours</div>
              <div className="val">Open 24/7 • Mon–Sun</div>
            </div>
          </div>
          <div className="contact-line">
            <span className="ic"><I.sparkle /></span>
            <div>
              <div className="lbl">Capacity</div>
              <div className="val">10,000+ uPVC units / year</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ====== Footer ====== */
const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <div style={{background:'white',borderRadius:8,padding:4,display:'inline-flex'}}>
          <VTechLogo size={36} />
        </div>
        <div>
          <div style={{color:'white',fontWeight:700}}>V-Tech Building Systems Pvt. Ltd</div>
          <div style={{fontSize:12,opacity:0.7}}>© 2026 • All rights reserved</div>
        </div>
      </div>
      <div className="social">
        <a href="#" aria-label="Facebook"><I.fb /></a>
        <a href="#" aria-label="Instagram"><I.ig /></a>
        <a href="https://www.linkedin.com/company/v-tech-building-systems-pvt-ltd" aria-label="LinkedIn"><I.ln /></a>
      </div>
    </div>
  </footer>
);

/* ====== Mobile floating CTA ====== */
const FloatingCTA = ({ data, onQuote }) => (
  <div className="float-cta">
    <a href={`tel:${data.phone1.replace(/\s/g,'')}`} className="btn btn-dark"><I.call /> Call Now</a>
    <button className="btn btn-primary" onClick={onQuote}>Free Quote <I.arrow /></button>
  </div>
);

Object.assign(window, {
  TopBar, Header, Hero, HeroVisual, Stats, Why, Products, Process,
  Finishes, Gallery, Clients, Reviews, FAQ, FinalCTA, Footer, FloatingCTA,
});