/* ============ Icon library (simple line icons, currentColor) ============ */
const ICON_PATHS = {
  phone: '<path d="M5 4h3l1.5 4-2 1.5a12 12 0 005.5 5.5l1.5-2 4 1.5v3a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/>',
  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>',
  pin: '<path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/>',
  arrow: '<path d="M5 12h14"/><path d="M13 6l6 6-6 6"/>',
  chevron: '<path d="M9 6l6 6-6 6"/>',
  download: '<path d="M12 4v11"/><path d="M8 11l4 4 4-4"/><path d="M5 19h14"/>',
  check: '<path d="M5 12l4 4 10-10"/>',
  calendar: '<rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/>',
  whatsapp: '<path d="M12 3a9 9 0 00-7.7 13.6L3 21l4.6-1.2A9 9 0 1012 3z"/><path d="M8.5 8.5c0 4 3 7 7 7"/>',
  instagram: '<rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/>',
  facebook: '<path d="M14 8.5h2.2V5.3c-.4-.05-1.5-.18-2.8-.18-2.8 0-4.7 1.7-4.7 4.8V12H6v3.4h2.7V22h3.3v-6.6h2.6l.4-3.4h-3V10c0-1 .3-1.5 1.3-1.5z"/>',
  sound: '<path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M16 9a4 4 0 010 6"/>',
  // trust
  years: '<path d="M12 3l2.3 4.7 5.2.8-3.8 3.6.9 5.1L12 14.8 7.4 17.2l.9-5.1L4.5 8.5l5.2-.8z"/>',
  building: '<rect x="5" y="3" width="14" height="18" rx="1"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3"/>',
  families: '<circle cx="8" cy="8" r="2.4"/><circle cx="16" cy="8" r="2.4"/><path d="M4 19c0-2.5 1.8-4.5 4-4.5s4 2 4 4.5M12 19c0-2.5 1.8-4.5 4-4.5s4 2 4 4.5"/>',
  map: '<path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/>',
  // amenities
  gym: '<path d="M4 9v6M7 7v10M17 7v10M20 9v6M7 12h10"/>',
  garden: '<path d="M12 21v-7M12 14c-3 0-5-2-5-5 3 0 5 2 5 5zM12 14c3 0 5-2 5-5-3 0-5 2-5 5z"/>',
  yoga: '<circle cx="12" cy="5" r="2"/><path d="M12 7v5M5 10h14M12 12l-4 7M12 12l4 7"/>',
  bbq: '<path d="M6 9h12l-1.5 6a3 3 0 01-3 2h-3a3 3 0 01-3-2L6 9z"/><path d="M9 17l-1 4M15 17l1 4M10 6c0-1 1-1 1-2s-1-1-1-2M14 6c0-1 1-1 1-2s-1-1-1-2"/>',
  star: '<path d="M12 3l2.3 4.7 5.2.8-3.8 3.6.9 5.1L12 14.8 7.4 17.2l.9-5.1L4.5 8.5l5.2-.8z"/>',
  gazebo: '<path d="M5 10l7-5 7 5M6 10v9M18 10v9M4 10h16M9 19v-5h6v5"/>',
  track: '<path d="M4 18c4 0 4-4 8-4s4 4 8 4"/><circle cx="8" cy="7" r="1.5"/><path d="M7.5 9l-1 4M9 9l2 3"/>',
  // specs
  structure: '<rect x="4" y="4" width="16" height="16"/><path d="M4 4l16 16M20 4L4 20"/>',
  floor: '<rect x="3" y="3" width="18" height="18"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>',
  door: '<rect x="6" y="3" width="12" height="18" rx="1"/><circle cx="14.5" cy="12" r="1"/>',
  window: '<rect x="4" y="4" width="16" height="16" rx="1"/><path d="M12 4v16M4 12h16"/>',
  kitchen: '<rect x="4" y="4" width="16" height="16" rx="1"/><path d="M8 4v6M8 7H6M8 7h2M16 4c-1 2-1 4 0 6v10"/>',
  toilet: '<path d="M6 4v6a4 4 0 004 4v6M6 10h8a2 2 0 010 4"/>',
  electrical: '<path d="M13 3l-7 10h5l-1 8 7-11h-5z"/>',
  plumbing: '<path d="M7 4v6a3 3 0 003 3h4a3 3 0 013 3v4M5 4h4M15 18h4"/>',
  paint: '<rect x="4" y="3" width="12" height="7" rx="1"/><path d="M16 6h3v4l-5 2v4M12 16v5"/>',
  common: '<rect x="6" y="3" width="12" height="18" rx="1"/><path d="M10 3v18M14 3v18M6 7h4M6 11h4M6 15h4"/>',
  // devotion / misc
  diya: '<path d="M5 14c0 2.5 3.1 4 7 4s7-1.5 7-4H5z"/><path d="M12 14c0-2 1.5-3 1.5-5S12 6 12 4c0 2-1.5 3-1.5 5S12 12 12 14z"/>',
  lotus: '<path d="M12 20c-4 0-7-2.5-7-2.5M12 20c4 0 7-2.5 7-2.5M12 20c0-4-2-7-2-7M12 20c0-4 2-7 2-7M12 20c0-5 0-9 0-9"/>',
  flower: '<circle cx="12" cy="12" r="2"/><path d="M12 4a3 3 0 010 6M12 14a3 3 0 010 6M4 12a3 3 0 016 0M14 12a3 3 0 016 0"/>',
};
function Icon({ name, size = 22, stroke = 1.6, fill = "none", style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}
      dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] || "" }} />
  );
}

/* Decorative geometric mandala/arch motif (abstract ornament, not deity) */
function Motif({ style, className }) {
  return (
    <svg viewBox="0 0 200 200" className={className} style={style} fill="none" stroke="currentColor" strokeWidth="1">
      <circle cx="100" cy="100" r="78"/><circle cx="100" cy="100" r="60"/><circle cx="100" cy="100" r="30"/>
      {Array.from({length:24}).map((_,i)=>{const a=(i/24)*Math.PI*2;return(
        <line key={i} x1={100+30*Math.cos(a)} y1={100+30*Math.sin(a)} x2={100+60*Math.cos(a)} y2={100+60*Math.sin(a)}/>
      )})}
      {Array.from({length:12}).map((_,i)=>{const a=(i/12)*Math.PI*2;return(
        <path key={i} d={`M100 100 L${100+78*Math.cos(a)} ${100+78*Math.sin(a)}`} opacity="0.5"/>
      )})}
      <circle cx="100" cy="100" r="8" fill="currentColor" stroke="none"/>
    </svg>
  );
}

/* ============ NAV ============ */
function Nav({ onMenu }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll); onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Srivari Empire","#srivari"],["Our Legacy","#legacy"],["The Founder","#about"],["FAQ","#faq"],["Contact","#contact"]];
  return (
    <nav className={`nav on-dark ${scrolled ? "scrolled" : ""}`}>
      <a className="nav-brand" href="#top">
        <img src={SITE.images.logoMark} alt="Sukruta Constructions" />
        <span className="bw"><b>SUKRUTA</b><span>Constructions</span></span>
      </a>
      <div className="nav-links">
        {links.map(([t,h]) => <a key={h} href={h}>{t}</a>)}
      </div>
      <div className="nav-actions">
        <a className="nav-phone" href={waLink()} target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={16}/> {SITE.phones[0]}</a>
        <a className="btn btn-gold nav-cta" href={waLink()} target="_blank" rel="noopener noreferrer">Book a Site Visit</a>
        <button className="nav-burger" onClick={onMenu} aria-label="Menu"><span/><span/><span/></button>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-bg" style={{ backgroundImage:`url(${SITE.images.heroBg})` }} />
      <Motif className="hero-watermark" />
      <div className="wrap hero-inner">
        <span className="eyebrow light">Sukruta Constructions · Est. 1999 · Visakhapatnam</span>
        <h1 className="display">A Legacy of Trust,<br/><em>Crafted with Quality,</em><br/>Delivered on Time.</h1>
        <p className="sub">For over 25 years, Sukruta has built premium homes across Visakhapatnam with banking-grade transparency and uncompromising quality — every project fully backed by India&apos;s leading banks.</p>
        <div className="hero-stats">
          {SITE.stats.map((s,i)=>(
            <React.Fragment key={i}>
              {i>0 && <div className="dot" />}
              <div className="st"><b>{s.b}</b><span>{s.s}</span></div>
            </React.Fragment>
          ))}
        </div>
        <div className="hero-cta">
          <a className="btn btn-gold" href="#srivari">Explore Srivari Empire <Icon name="arrow" size={16} style={{marginLeft:2}}/></a>
          <a className="btn btn-ghost" href={waLink()} target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={16}/> Book a Site Visit</a>
        </div>
      </div>
      <a className="scroll-cue" href="#srivari"><span>Scroll</span><span className="ln"/></a>
    </header>
  );
}

/* ============ TRUST BAR ============ */
function TrustBar() {
  const items = [
    { ic:"years", b:"25+ Years", s:"Of Experience" },
    { ic:"building", b:"22+ Projects", s:"Completed & Delivered" },
    { ic:"families", b:"300+ Families", s:"Made At Home" },
    { ic:"check", b:"100% Bank-Backed", s:"SBI · BOB · KVB Financed" }
  ];
  return (
    <section className="trust">
      <div className="trust-grid">
        {items.map((it,i)=>(
          <div className="trust-item" key={i}>
            <span className="ic"><Icon name={it.ic} size={30} stroke={1.4}/></span>
            <div><b>{it.b}</b><span>{it.s}</span></div>
          </div>
        ))}
      </div>
      <ReraRibbon/>
    </section>
  );
}

/* ============ RERA + CREDAI trust ribbon (highlighted for credibility) ============ */
function ReraRibbon() {
  return (
    <div className="rera-ribbon">
      <div className="rera-badges">
        <div className="rera-badge">
          <img src={SITE.images.badgeRera} alt="Approved by AP RERA"/>
        </div>
        <div className="rera-badge">
          <img src={SITE.images.badgeCredai} alt="Member of CREDAI Visakhapatnam"/>
        </div>
        <div className="rera-badge naredco-badge">
          <div className="naredco-inner">
            <svg viewBox="0 0 48 48" width="42" height="42" aria-hidden="true">
              <polygon points="24,4 44,20 44,44 4,44 4,20" fill="#E8500A"/>
              <polygon points="24,4 38,16 38,28 24,16 10,28 10,16" fill="#fff" opacity="0.92"/>
              <rect x="18" y="28" width="12" height="16" fill="#fff" opacity="0.92"/>
            </svg>
            <div className="naredco-text">
              <b>NAREDCO</b>
              <span>Visakhapatnam</span>
            </div>
          </div>
        </div>
      </div>
      <div className="rera-text">
        <span className="rera-k">Government Approved &amp; Industry Verified</span>
        <div className="rera-no">RERA&nbsp;No. <b>{SITE.rera}</b></div>
        <p>Srivari Empire is registered with AP RERA. Sukruta Constructions is a proud member of CREDAI &amp; NAREDCO Visakhapatnam — your assurance of clear title, legal compliance and complete peace of mind.</p>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Motif, Nav, Hero, TrustBar, ReraRibbon });