/* ============ FAQ + WHY THIS LOCALITY ============ */
function FAQItem({ q, a, open, onToggle }) {
  const ref = React.useRef(null);
  return (
    <div className={`faq-item ${open?"open":""}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <span className="pm">+</span>
      </button>
      <div className="faq-a" style={{maxHeight: open ? (ref.current ? ref.current.scrollHeight+4 : 600)+"px" : 0}}>
        <div className="faq-a-inner" ref={ref}>{a}</div>
      </div>
    </div>
  );
}
function FAQ() {
  const [open, setOpen] = React.useState(()=>new Set([0]));
  const toggle = (i)=> setOpen(prev=>{ const n=new Set(prev); n.has(i)?n.delete(i):n.add(i); return n; });
  const half = Math.ceil(SITE.faqs.length/2);
  const cols = [SITE.faqs.slice(0,half), SITE.faqs.slice(half)];
  return (
    <section className="faq section-pad" id="faq">
      <div className="wrap">
        <div className="sec-head center reveal" style={{marginInline:"auto"}}>
          <span className="eyebrow center">Buyer Questions</span>
          <h2 className="section-title">Frequently asked questions</h2>
          <p>Everything Vizag home-buyers ask us — about Srivari Empire, RERA, loans, possession and the Madhurawada locality.</p>
        </div>

        <div className="faq-grid reveal">
          {cols.map((col,ci)=>(
            <div key={ci}>
              {col.map((f,idx)=>{ const gi = ci*half+idx; return (
                <FAQItem key={gi} q={f.q} a={f.a} open={open.has(gi)} onToggle={()=>toggle(gi)} />
              );})}
            </div>
          ))}
        </div>

        <div className="why-loc reveal">
          <div className="sec-head" style={{maxWidth:"640px"}}>
            <span className="eyebrow">Why Madhurawada</span>
            <h2 className="section-title">Why this is the right address</h2>
            <p>Srivari Empire sits in one of Visakhapatnam&apos;s most promising neighbourhoods — here&apos;s why it&apos;s a smart place to live and to invest.</p>
          </div>
          <div className="why-grid">
            {SITE.whyLocality.map((w,i)=>(
              <div className="why-card" key={i}>
                <span className="num">{String(i+1).padStart(2,"0")}</span>
                <b>{w.t}</b>
                <p>{w.d}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="faq-cta reveal">
          <div>
            <h3>Still have a question?</h3>
            <p>Talk to our team directly on WhatsApp — we usually reply within the hour.</p>
          </div>
          <a className="btn btn-gold" href={waLink("Hello Sukruta Constructions, I have a question about Srivari Empire.")} target="_blank" rel="noopener noreferrer">
            <Icon name="whatsapp" size={16}/> Ask on WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
function Testimonials() {
  return (
    <section className="testi section-pad">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow center">In Their Words</span>
          <h2 className="section-title">Trusted, then trusted again.</h2>
        </div>
        <div className="testi-grid reveal">
          {SITE.testimonials.map((t,i)=>(
            <figure className="testi-card" key={i} style={{margin:0}}>
              <div className="qm">&ldquo;</div>
              <p>{t.q}</p>
              <figcaption className="who">
                <span className="av">{t.a}</span>
                <span><b>{t.n}</b><span>{t.p}</span></span>
              </figcaption>
            </figure>
          ))}
        </div>
        <p className="testi-banner reveal">Join <b>300+ families</b> who trusted Sukruta with their home.</p>
      </div>
    </section>
  );
}

/* ============ CONTACT ============ */
function Contact() {
  const [vals, setVals] = React.useState({ name:"", phone:"", email:"", interest:"", msg:"" });
  const [touched, setTouched] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k)=>(e)=>setVals(v=>({...v,[k]:e.target.value}));
  const errs = {
    name: vals.name.trim().length<2 ? "Please tell us your name" : "",
    phone: !/^[6-9]\d{9}$/.test(vals.phone.replace(/\s/g,"")) ? "Enter a valid 10-digit mobile number" : "",
  };
  const submit = (e)=>{
    e.preventDefault();
    setTouched({name:true,phone:true});
    if (!errs.name && !errs.phone){
      const lines = [
        "Hello Sukruta Constructions,",
        "",
        "I'd like to book a site visit for Srivari Empire.",
        "",
        `Name: ${vals.name}`,
        `Phone: ${vals.phone}`,
        vals.email    ? `Email: ${vals.email}`           : null,
        vals.interest ? `Interested in: ${vals.interest}` : null,
        vals.msg      ? `Message: ${vals.msg}`            : null,
      ].filter(Boolean).join("\n");
      const url = `https://wa.me/${SITE.whatsapp}?text=${encodeURIComponent(lines)}`;
      window.open(url, "_blank");
      setSent(true);
    }
  };
  return (
    <section className="contact section-pad" id="contact">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow center">Visit Us</span>
          <h2 className="section-title">Let&apos;s build your home together</h2>
        </div>
        <div className="contact-grid">
          <div className="contact-info reveal">
            <div className="ci-row">
              <span className="ic"><Icon name="whatsapp" size={22}/></span>
              <div className="phones" style={{flex:1}}>
                <span className="k">Call / WhatsApp</span>
                <a href={waLink()} target="_blank" rel="noopener noreferrer">+91 {SITE.phones[0]}</a>
                {SITE.phones.slice(1).map((p,i)=>(<a key={i} href={`tel:+91${p.replace(/\s/g,"")}`}>+91 {p}</a>))}
              </div>
            </div>
            <div className="ci-row">
              <span className="ic"><Icon name="mail" size={22}/></span>
              <div><span className="k">Email</span><a href={`mailto:${SITE.email}`} style={{fontSize:"1rem",wordBreak:"break-all"}}>{SITE.email}</a></div>
            </div>
            <div className="ci-row">
              <span className="ic"><Icon name="pin" size={22}/></span>
              <div>
                <span className="k">Site &amp; Office</span>
                <a href="https://maps.app.goo.gl/n3iEWwEkrNz1FuLj8" target="_blank" rel="noopener noreferrer"
                   style={{fontSize:"1.05rem",fontFamily:"var(--font-display)",color:"var(--ink)",display:"block"}}>
                  {SITE.address}
                </a>
                <span className="v" style={{fontSize:".9rem",color:"var(--ink-soft)"}}>{SITE.city}</span>
                <span style={{fontSize:".72rem",color:"var(--maroon)",letterSpacing:".06em",marginTop:"3px",display:"block"}}>↗ Open in Google Maps</span>
              </div>
            </div>
            <div className="ci-row">
              <span className="ic"><Icon name="calendar" size={22}/></span>
              <div><span className="k">Office Hours</span><span className="v" style={{fontSize:"1rem"}}>Mon–Sat · 9:30am – 7:00pm</span></div>
            </div>
            <div className="ci-row" style={{borderBottom:"none"}}>
              <span className="ic"><Icon name="instagram" size={22}/></span>
              <div style={{flex:1}}>
                <span className="k">Follow Us</span>
                <div className="ci-social">
                  <a href={SITE.social.instagram} target="_blank" rel="noopener noreferrer"><Icon name="instagram" size={18}/> Instagram</a>
                  <a href={SITE.social.facebook} target="_blank" rel="noopener noreferrer"><Icon name="facebook" size={18}/> Facebook</a>
                </div>
              </div>
            </div>
          </div>

          <form className="form reveal" onSubmit={submit} noValidate>
            <h3>Book a Site Visit</h3>
            <p className="fp">Share your details and we&apos;ll call you back within the day.</p>
            {sent ? (
              <div className="form-ok"><Icon name="check" size={20}/> Thank you — we&apos;ve opened WhatsApp with your details. Send the message and we&apos;ll call you back shortly.</div>
            ) : (
              <React.Fragment>
                <div className={`field ${touched.name&&errs.name?"invalid":""}`}>
                  <label>Your Name</label>
                  <input value={vals.name} onChange={set("name")} onBlur={()=>setTouched(t=>({...t,name:true}))} placeholder="Full name"/>
                  <span className="err">{errs.name}</span>
                </div>
                <div className={`field ${touched.phone&&errs.phone?"invalid":""}`}>
                  <label>Mobile Number</label>
                  <input value={vals.phone} onChange={set("phone")} onBlur={()=>setTouched(t=>({...t,phone:true}))} placeholder="10-digit mobile" inputMode="numeric"/>
                  <span className="err">{errs.phone}</span>
                </div>
                <div className="field">
                  <label>Email <span style={{textTransform:"none",letterSpacing:0,opacity:.6}}>(optional)</span></label>
                  <input value={vals.email} onChange={set("email")} placeholder="you@email.com" type="email"/>
                </div>
                <div className="field">
                  <label>I&apos;m interested in</label>
                  <select value={vals.interest} onChange={set("interest")}>
                    <option value="">Select a project</option>
                    <option>Srivari Empire — 3 BHK (Madhurawada)</option>
                    <option>A site visit</option>
                    <option>General enquiry</option>
                  </select>
                </div>
                <div className="field">
                  <label>Message <span style={{textTransform:"none",letterSpacing:0,opacity:.6}}>(optional)</span></label>
                  <textarea rows="3" value={vals.msg} onChange={set("msg")} placeholder="Anything you'd like us to know"></textarea>
                </div>
                <button className="btn btn-primary" type="submit" style={{width:"100%",justifyContent:"center"}}><Icon name="whatsapp" size={16}/> Send via WhatsApp</button>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <img src={SITE.images.logoMark} alt="Sukruta Constructions"/>
            <p className="foot-motto">{SITE.tagline}.</p>
            <p>Premium homes across Visakhapatnam, built with banking-grade transparency for over twenty-five years.</p>
            <div className="foot-social">
              <a href={SITE.social.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={18}/></a>
              <a href={SITE.social.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook"><Icon name="facebook" size={18}/></a>
              <a href={waLink()} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><Icon name="whatsapp" size={18}/></a>
            </div>
          </div>
          <div className="foot-col">
            <h5>Explore</h5>
            <a href="#srivari">Srivari Empire</a>
            <a href="#legacy">Our Legacy</a>
            <a href="#about">The Founder</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">Contact</a>
          </div>
          <div className="foot-col">
            <h5>Downloads</h5>
            <a href={SITE.brochure} download><Icon name="download" size={14} style={{display:"inline",verticalAlign:"-2px",marginRight:"6px"}}/>Srivari Empire Brochure</a>
            <a href={SITE.images.completedList} download><Icon name="download" size={14} style={{display:"inline",verticalAlign:"-2px",marginRight:"6px"}}/>Completed Projects List</a>
            <a href={waLink()} target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={14} style={{display:"inline",verticalAlign:"-2px",marginRight:"6px"}}/>Book a Site Visit</a>
          </div>
          <div className="foot-col">
            <h5>Reach Us</h5>
            <a href={waLink()} target="_blank" rel="noopener noreferrer">+91 {SITE.phones[0]}</a>
            {SITE.phones.slice(1).map((p,i)=>(<a key={i} href={`tel:+91${p.replace(/\s/g,"")}`}>+91 {p}</a>))}
            <a href={`mailto:${SITE.email}`} style={{wordBreak:"break-all"}}>{SITE.email}</a>
            <span className="li" style={{marginTop:"8px"}}>{SITE.address},<br/>{SITE.city}</span>
          </div>
        </div>

        <div className="foot-rera">
          <div className="foot-rera-badges">
            <img src={SITE.images.badgeRera} alt="Approved by AP RERA"/>
            <img src={SITE.images.badgeCredai} alt="Member of CREDAI Visakhapatnam"/>
          </div>
          <div className="foot-rera-no">
            <span>AP RERA Registered</span>
            <b>RERA No. {SITE.rera}</b>
          </div>
        </div>

        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Sukruta Constructions. All rights reserved.</span>
          <span>{SITE.tagline}.</span>
          <span className="gds-credit">
            Made with <span style={{color:"#e84545"}}>♥</span> by{" "}
            <a href="https://garuda-digital-solutions-ovq9qrayg-datta-eswars-projects.vercel.app/"
               target="_blank" rel="noopener noreferrer" style={{color:"var(--gold-bright)",textDecoration:"underline",textUnderlineOffset:"3px"}}>GDS</a>
            {" · "}
            <a href="https://wa.me/917731994359" target="_blank" rel="noopener noreferrer"
               aria-label="WhatsApp GDS developer" style={{color:"#25D366",display:"inline-flex",alignItems:"center",gap:"4px",verticalAlign:"middle"}}>
              <Icon name="whatsapp" size={14} style={{display:"inline",verticalAlign:"-1px"}}/>
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, FAQItem, Testimonials, Contact, Footer });