/* ============ FOUNDER / ABOUT ============ */
function About() {
  const pillars = [
    { ic:"building", k:"22+ Completed Projects",
      d:"For over 25 years we have actively shaped Vizag's residential skyline — building homes that stand as monuments to our integrity." },
    { ic:"check", k:"100% Institutional Backing",
      d:"Every project is fully scrutinised and financed by India's premier banks — State Bank of India (SBI), Bank of Baroda (BOB) and Karur Vysya Bank (KVB) — ensuring flawless legal compliance and complete financial security." },
    { ic:"calendar", k:"An Unbending Promise on Time",
      d:"We honour timelines like sacred commitments. Our flagship broke ground in September 2025 and moves on a strict 30-month schedule — your keys, exactly when promised." },
  ];
  return (
    <section className="about section-pad" id="about">
      <img className="about-deity" src={SITE.images.venkateswara} alt="" aria-hidden="true"/>
      <div className="wrap about-grid">
        <div className="about-portrait reveal">
          <img className="wm-logo" src={SITE.images.logoMark} alt="" aria-hidden="true"/>
          <div className="frame"><img src={SITE.images.founder} alt="Parupudi Madhusudhan Rao, Founder & Director"/></div>
        </div>
        <div className="about-body reveal">
          <span className="eyebrow">A Message From The Founder</span>
          <h2 className="section-title">For 35 years, my job was to<br/>safeguard your trust.</h2>
          <p className="founder-lead">For over 35 years at Vijaya Bank and Bank of Baroda, my work wasn&apos;t just about managing money — it was about safeguarding your hard-earned trust. In three decades of banking, I learned that credibility is not given; it is earned, penny by penny, day by day.</p>
          <p>In 1999, I chose to bring that exact same institutional discipline, absolute financial transparency and uncompromising precision into the real estate landscape of Vizag. When you buy a home, you aren&apos;t just investing your life savings — you are placing your family&apos;s dreams into my hands. I take that responsibility personally.</p>
          <blockquote className="about-quote">For over two decades, I have never cut a corner, never delayed a promise, and never compromised on quality.</blockquote>
          <div className="founder-sign">
            <b>Parupudi Madhusudhan Rao</b>
            <span>Founder &amp; Director</span>
          </div>
        </div>
      </div>

      <div className="wrap pillars-wrap reveal">
        <div className="sec-head center" style={{marginInline:"auto"}}>
          <span className="eyebrow center">The Pillars of Our Legacy</span>
          <h2 className="section-title">Built on credibility, quality &amp; time</h2>
        </div>
        <div className="pillars">
          {pillars.map((p,i)=>(
            <div className="pillar" key={i}>
              <span className="ic"><Icon name={p.ic} size={28} stroke={1.4}/></span>
              <b>{p.k}</b>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
        <div className="usp-banner">
          <span className="usp-k">Our USP</span>
          <span className="usp-v">Credibility · Quality · Timely Delivery</span>
          <span className="usp-s">We don&apos;t just build concrete structures — we deliver on the promises we make to your family.</span>
        </div>
      </div>
    </section>
  );
}

/* ============ LEGACY WALL ============ */
function LegacyWall() {
  const [f, setF] = React.useState("all");
  const filters = [
    { k:"all", t:"All Projects" },
    { k:"Visakhapatnam", t:"Visakhapatnam" },
    { k:"Vizianagaram", t:"Vizianagaram" },
    { k:"layout", t:"Layout Projects" },
  ];
  const list = SITE.projects.filter(p =>
    f==="all" ? true : f==="layout" ? p.layout : p.city===f
  );
  return (
    <section className="legacy section-pad" id="legacy">
      <div className="wrap">
        <div className="legacy-top reveal">
          <div className="sec-head" style={{marginBottom:0}}>
            <span className="eyebrow">The Legacy Wall</span>
            <h2 className="section-title">Over two decades,<br/>one consistent promise.</h2>
          </div>
          <div className="filters">
            {filters.map(ft=>(
              <button key={ft.k} className={`filter ${f===ft.k?"active":""}`} onClick={()=>setF(ft.k)}>{ft.t}</button>
            ))}
          </div>
        </div>
        <div className="proj-grid reveal">
          {list.map((p,i)=>{
            const era = SITE.eras[p.firm];
            return (
              <article className={`proj-card ${p.featured?"featured":""}`} key={p.name+i} style={{"--era-color":era.color}}>
                <span className="era">{era.label}</span>
                <h4>{p.name}</h4>
                <div className="area">{p.area}</div>
                <div className="facts">
                  <div className="f"><b>{p.layout?"Plots":p.units}</b><span>{p.layout?"Layout":"Units"}</span></div>
                  <div className="f" style={{textAlign:"right"}}><b>{p.year}</b><span>Completed</span></div>
                </div>
              </article>
            );
          })}
        </div>
        <div className="legacy-note reveal">
          <Icon name="download" size={18} style={{color:"var(--maroon)"}}/>
          <span>The full list of completed projects is available to download in the footer.</span>
        </div>
      </div>
    </section>
  );
}

/* ============ CURRENT PROJECTS ============ */
function CurrentProjects() {
  return (
    <section className="current section-pad" id="current">
      <Motif className="current-wm"/>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow light">Available Now</span>
          <h2 className="section-title">Current Projects</h2>
          <p>Two homes ready for their next chapter — one rising in Vizag, one ready to move in Vizianagaram.</p>
        </div>
        <div className="cur-grid reveal">
          {SITE.current.map((c,i)=>(
            <article className="cur-card" key={i}>
              <div className="cur-media">
                <img src={c.img} alt={c.name}/>
                <span className={`cur-status ${c.statusClass}`}>{c.status}</span>
              </div>
              <div className="cur-body">
                <h3>{c.name}</h3>
                <div className="loc-line"><Icon name="pin" size={14}/> {c.loc}</div>
                <p>{c.desc}</p>
                <div className="cur-specs">
                  {c.specs.map((s,j)=>(<div className="f" key={j}><b>{s.b}</b><span>{s.s}</span></div>))}
                </div>
                <a className="btn btn-gold" href="#contact">Enquire Now <Icon name="arrow" size={15}/></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, LegacyWall, CurrentProjects });