// FAQ, Areas, About, Contact/CTA, Footer
const { useState: useStateS3 } = React;

const FAQ = () => {
  const qs = [
    { q:"How fast can you really close?", a:"Our average is 14 days; we've closed in as few as 7. Because we pay cash, there's no bank, no appraisal delay, and no financing that falls through. You pick the date that works for you." },
    { q:"How do you come up with your offer price?", a:"We look at recent comparable sales in your neighborhood, the estimated cost to bring the house to resale condition, and current market conditions. You'll see the math, it's not a mystery." },
    { q:"Do I really pay zero fees?", a:"Correct. No commission, no closing costs, no repair credits, no inspection fees. The number on our offer is the number that hits your account." },
    { q:"What if the house is in bad shape?", a:"Perfect. We specialize in houses nobody else wants, fire, mold, hoarder situations, foundation, tenants still living there. Take what you want, leave the rest." },
    { q:"Will you pressure me to sell?", a:"Never. Our offer is no-obligation. We'd rather you walk away happy than sign something you'll regret. Sometimes we even point people toward a traditional listing if the math is better for them." },
    { q:"I'm already in foreclosure. Is it too late?", a:"Not until the auction day. Call us the moment you get a Notice of Default. In NY you typically have around 120 days, the earlier we talk, the more we can do (short sale, modification, or a cash close before the hammer drops)." },
  ];
  const [open, setOpen] = useStateS3(0);
  return (
    <section className="section">
      <div className="container two-col" style={{display:"grid", gridTemplateColumns:"1fr 1.5fr", gap:80, alignItems:"start"}}>
        <div style={{position:"sticky", top:120}}>
          <span className="eyebrow">Straight answers</span>
          <h2 style={{fontSize:"clamp(40px, 4.5vw, 60px)", marginTop:20, letterSpacing:"-0.03em"}}>
            Questions<br/><em style={{fontStyle:"italic"}}>we get a lot.</em>
          </h2>
          <p style={{fontSize:16, color:"var(--ink-soft)", marginTop:20, lineHeight:1.55}}>
            Nothing on this page? Call us directly. We answer the phone ourselves, no call center.
          </p>
          <a href="tel:5188173726" style={{display:"inline-flex", alignItems:"center", gap:10, marginTop:20, fontFamily:"var(--font-mono)", fontSize:13, color:"var(--navy-900)", borderBottom:"1px solid var(--navy-900)", paddingBottom:2}}>
            (518) 817-3726 <ArrowRight size={14}/>
          </a>
        </div>

        <div>
          {qs.map((f, i) => (
            <div key={i} style={{borderTop:"1px solid var(--line)", padding:"24px 0"}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{width:"100%", display:"flex", justifyContent:"space-between", alignItems:"center", textAlign:"left"}}>
                <span style={{fontFamily:"var(--font-display)", fontSize:24, letterSpacing:"-0.02em", color:"var(--navy-900)"}}>{f.q}</span>
                <span style={{
                  width:36, height:36, borderRadius:"50%",
                  border:"1px solid var(--line-strong)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  flexShrink:0, marginLeft:24,
                  transform: open===i ? "rotate(45deg)" : "none",
                  transition:"transform .25s ease",
                  background: open===i ? "var(--navy-900)" : "transparent",
                  color: open===i ? "var(--cream)" : "var(--ink)",
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5 V19 M5 12 H19"/></svg>
                </span>
              </button>
              <div style={{
                maxHeight: open===i ? 300 : 0,
                overflow:"hidden",
                transition:"max-height .35s ease, margin .35s ease",
                marginTop: open===i ? 16 : 0,
              }}>
                <p style={{fontSize:16, lineHeight:1.6, color:"var(--ink-soft)", maxWidth:620}}>{f.a}</p>
              </div>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}/>
        </div>
      </div>
    </section>
  );
};

const Areas = () => {
  const counties = [
    { n:"Albany County", cities:["Albany", "Colonie", "Guilderland", "Cohoes", "Watervliet", "Bethlehem"], cx: 52, cy: 55 },
    { n:"Saratoga County", cities:["Saratoga Springs", "Clifton Park", "Ballston Spa", "Malta", "Mechanicville"], cx: 48, cy: 28 },
    { n:"Schenectady County", cities:["Schenectady", "Rotterdam", "Niskayuna", "Scotia", "Glenville"], cx: 32, cy: 50 },
    { n:"Rensselaer County", cities:["Troy", "Rensselaer", "East Greenbush", "Averill Park", "Castleton"], cx: 70, cy: 60 },
  ];
  const [hover, setHover] = useStateS3(0);
  return (
    <section className="section" style={{background:"var(--cream)"}}>
      <div className="container">
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:80, alignItems:"center"}}>
          <div>
            <span className="eyebrow">Where we buy</span>
            <h2 style={{fontSize:"clamp(40px, 4.5vw, 60px)", marginTop:20, letterSpacing:"-0.03em"}}>
              The whole<br/><em style={{fontStyle:"italic"}}>Capital Region.</em>
            </h2>
            <p style={{fontSize:18, color:"var(--ink-soft)", marginTop:20, lineHeight:1.6, maxWidth:520}}>
              We live here. We raised our families here. We know what a house on Delaware Ave sells for and we know what a fixer in Mechanicville is worth. Four counties, every zip code.
            </p>

            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12, marginTop:36}}>
              {counties.map((c, i) => (
                <button key={i} onMouseEnter={()=>setHover(i)} style={{
                  textAlign:"left", padding:"18px 20px", borderRadius:14,
                  background: hover===i ? "var(--navy-900)" : "var(--paper)",
                  color: hover===i ? "var(--cream)" : "var(--ink)",
                  border:"1px solid var(--line)",
                  transition:"all .2s ease",
                  cursor:"pointer",
                }}>
                  <div style={{fontFamily:"var(--font-display)", fontSize:22, letterSpacing:"-0.02em"}}>{c.n}</div>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.08em", textTransform:"uppercase", color: hover===i ? "var(--gold-300)" : "var(--ink-mute)", marginTop:6}}>
                    {c.cities.slice(0, 3).join(" · ")} +{c.cities.length-3}
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Stylized map */}
          <div style={{position:"relative", aspectRatio:"1/1", background:"var(--paper)", borderRadius:28, border:"1px solid var(--line)", padding:36, boxShadow:"var(--shadow-md)"}}>
            <svg viewBox="0 0 100 100" style={{width:"100%", height:"100%"}}>
              {/* river */}
              <path d="M62 5 Q58 30 64 55 Q68 80 60 98" stroke="#7FB3D4" strokeWidth="2" fill="none" strokeLinecap="round" opacity=".6"/>
              {/* county blobs */}
              {counties.map((c, i) => {
                const active = hover===i;
                return (
                  <g key={i} onMouseEnter={()=>setHover(i)}>
                    <circle cx={c.cx} cy={c.cy} r={active ? 14 : 11} fill={active ? "#D4A24C" : "rgba(11, 27, 43, .1)"} style={{transition:"all .3s ease", cursor:"pointer"}}/>
                    <circle cx={c.cx} cy={c.cy} r={active ? 4 : 3} fill={active ? "#0B1B2B" : "#0B1B2B"} style={{transition:"all .3s ease"}}/>
                    {active && (
                      <circle cx={c.cx} cy={c.cy} r="20" fill="none" stroke="#D4A24C" strokeWidth=".5" opacity=".4">
                        <animate attributeName="r" from="14" to="22" dur="1.5s" repeatCount="indefinite"/>
                        <animate attributeName="opacity" from=".6" to="0" dur="1.5s" repeatCount="indefinite"/>
                      </circle>
                    )}
                    <text x={c.cx} y={c.cy-17} textAnchor="middle" fontSize="3.5" fontFamily="var(--font-mono)" fill={active?"#0B1B2B":"#6B7A8C"} style={{letterSpacing:".05em", transition:"all .2s"}}>
                      {c.n.replace(" County", "").toUpperCase()}
                    </text>
                  </g>
                );
              })}
            </svg>
            <div style={{position:"absolute", bottom:20, left:20, right:20, display:"flex", justifyContent:"space-between", fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.1em", color:"var(--ink-mute)", textTransform:"uppercase"}}>
              <span>↑ N</span><span>Capital Region · NY</span><span>Hudson River →</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const About = () => {
  return (
    <section id="about" className="section">
      <div className="container">
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:72, alignItems:"center"}}>
          <div style={{position:"relative"}}>
            <div style={{
              borderRadius:28, overflow:"hidden",
              background:"linear-gradient(180deg, #F5E1B0, #EFCF89)",
              aspectRatio:"4/5", border:"1px solid var(--line)", boxShadow:"var(--shadow-lg)",
              display:"flex", alignItems:"flex-end", justifyContent:"center",
              position:"relative",
            }}>
              <FamilyScene width={500}/>
              <div style={{
                position:"absolute", top:20, left:20,
                background:"var(--navy-900)", color:"var(--gold-300)",
                padding:"8px 14px", borderRadius:999,
                fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase",
              }}>Family-owned · Locally rooted</div>
            </div>
            <div style={{
              position:"absolute", bottom:-28, right:-20, zIndex:2,
              background:"var(--paper)", padding:"18px 22px", borderRadius:16,
              boxShadow:"var(--shadow-lg)", border:"1px solid var(--line)", maxWidth:260,
            }}>
              <div style={{fontFamily:"var(--font-display)", fontSize:42, letterSpacing:"-0.03em", color:"var(--navy-900)", lineHeight:1}}>400+</div>
              <div style={{fontSize:13, color:"var(--ink-soft)", marginTop:6}}>neighbors helped through life's hardest housing moments</div>
            </div>
          </div>

          <div>
            <span className="eyebrow">About Capital Home Solutions</span>
            <h2 style={{fontSize:"clamp(40px, 4.5vw, 60px)", marginTop:20, letterSpacing:"-0.03em"}}>
              We're your neighbors, <br/><em style={{fontStyle:"italic"}}>not some 1-800 hotline.</em>
            </h2>
            <p style={{fontSize:17, color:"var(--ink-soft)", marginTop:24, lineHeight:1.65}}>
              Capital Home Solutions was founded on a simple idea: homeowners in the Capital Region deserve better than getting cold-called by out-of-state investors who've never seen an Albany winter. We live here, we invest here, and we show up in person, coffee in hand, to every house we look at.
            </p>
            <p style={{fontSize:17, color:"var(--ink-soft)", marginTop:16, lineHeight:1.65}}>
              When the situation calls for something other than a sale, we say so. That's why we've helped seniors keep their homes with reverse mortgages, walked families through short sales, and connected folks with mortgage counselors, even when it meant we didn't buy the house.
            </p>

            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20, marginTop:36}}>
              {[
                ["No hidden fees", "What we offer is what you get. No 'closing adjustments.'"],
                ["Honest advice", "Sometimes we say 'don't sell.' That's how you know to trust us."],
                ["Local roots", "Born, raised, and investing right here in the Capital Region."],
                ["Fast communication", "We pick up the phone. Same-day offers. Real humans."],
              ].map(([t, d]) => (
                <div key={t} style={{paddingLeft:16, borderLeft:"2px solid var(--gold-500)"}}>
                  <div style={{fontFamily:"var(--font-display)", fontSize:20, letterSpacing:"-0.015em"}}>{t}</div>
                  <div style={{fontSize:14, color:"var(--ink-soft)", marginTop:6, lineHeight:1.5}}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ContactCTA = () => {
  const [form, setForm] = useStateS3({ name:"", address:"", phone:"", email:"", situation:"" });
  const [sent, setSent] = useStateS3(false);
  return (
    <section id="contact" className="section" style={{background:"var(--navy-900)", color:"var(--cream)", position:"relative", overflow:"hidden"}}>
      <div aria-hidden className="hero-ornament" style={{position:"absolute", top:-200, left:"50%", transform:"translateX(-50%)", width:900, height:900, borderRadius:"50%", background:"radial-gradient(closest-side, rgba(212, 162, 76, .12), transparent)"}}/>
      <div className="container" style={{position:"relative"}}>
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"start"}}>
          <div>
            <span className="eyebrow" style={{color:"var(--gold-300)"}}>Get your offer</span>
            <h2 style={{fontSize:"clamp(44px, 5.5vw, 76px)", marginTop:20, letterSpacing:"-0.035em"}}>
              One honest conversation.<br/>
              <em style={{fontStyle:"italic", color:"var(--gold-400)"}}>That's all we're asking for.</em>
            </h2>
            <p style={{fontSize:18, color:"rgba(245, 238, 223, .78)", marginTop:24, lineHeight:1.6, maxWidth:520}}>
              Fill out the form or call us. We'll listen first, look at the house, and come back with the right solution, a fair cash offer, an MLS listing for top dollar, a mortgage modification, or whatever actually fits your situation.
            </p>

            <div style={{display:"grid", gap:20, marginTop:44}}>
              <ContactRow icon={<PhoneIcon/>} label="Main line · 24/7" value="(518) 817-3726" href="tel:5188173726"/>
              <ContactRow icon={<PhoneIcon/>} label="Niko, text friendly" value="(518) 225-5350" href="tel:5182255350"/>
              <ContactRow icon={<MailIcon/>} label="Email" value="nikosmithchs@gmail.com" href="mailto:nikosmithchs@gmail.com"/>
              <ContactRow icon={<MapIcon/>} label="We cover" value="Albany · Saratoga · Schenectady · Rensselaer"/>
            </div>
          </div>

          <form onSubmit={e=>{e.preventDefault(); setSent(true);}} style={{
            background:"var(--paper)", color:"var(--ink)",
            borderRadius:24, padding:36,
            boxShadow:"var(--shadow-lg)",
          }}>
            {sent ? (
              <div style={{textAlign:"center", padding:"40px 0"}}>
                <div style={{width:64, height:64, borderRadius:"50%", background:"var(--leaf)", color:"white", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 20px"}}>
                  <CheckIcon size={28} color="white"/>
                </div>
                <h3 style={{fontSize:28, letterSpacing:"-0.02em"}}>Got it, we'll call you within the hour.</h3>
                <p style={{fontSize:15, color:"var(--ink-soft)", marginTop:12}}>Keep an eye out for a (518) area code. We don't call from blocked numbers.</p>
              </div>
            ) : (
              <>
                <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--ink-mute)"}}>No-obligation · Free consultation</div>
                <h3 style={{fontSize:30, letterSpacing:"-0.025em", marginTop:6, marginBottom:24}}>Tell us your situation.</h3>

                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}>
                  <LabeledField label="Full name" value={form.name} onChange={v=>setForm(f=>({...f, name:v}))}/>
                  <LabeledField label="Phone" value={form.phone} onChange={v=>setForm(f=>({...f, phone:v}))}/>
                </div>
                <LabeledField label="Property address" value={form.address} onChange={v=>setForm(f=>({...f, address:v}))} full/>
                <LabeledField label="Email" value={form.email} onChange={v=>setForm(f=>({...f, email:v}))} full/>
                <LabeledField label="Tell us your situation" value={form.situation} onChange={v=>setForm(f=>({...f, situation:v}))} full textarea/>

                <button type="submit" className="btn btn-primary" style={{width:"100%", justifyContent:"center", padding:"18px", fontSize:16, marginTop:18}}>
                  Get my options <ArrowRight/>
                </button>
                <p style={{fontSize:12, color:"var(--ink-mute)", marginTop:14, textAlign:"center"}}>
                  We respond within an hour during business hours. Your information stays private.
                </p>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

const LabeledField = ({label, value, onChange, full, textarea}) => (
  <label style={{display:"block", marginTop:14, gridColumn: full ? "1/-1" : "auto"}}>
    <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--ink-mute)", marginBottom:6}}>{label}</div>
    {textarea ? (
      <textarea value={value} onChange={e=>onChange(e.target.value)} rows={3}
        style={{width:"100%", border:"1px solid var(--line)", borderRadius:10, padding:"12px 14px", fontFamily:"inherit", fontSize:14, background:"var(--ivory)", outline:"none", resize:"vertical"}}/>
    ) : (
      <input value={value} onChange={e=>onChange(e.target.value)}
        style={{width:"100%", border:"1px solid var(--line)", borderRadius:10, padding:"12px 14px", fontFamily:"inherit", fontSize:14, background:"var(--ivory)", outline:"none"}}/>
    )}
  </label>
);

const ContactRow = ({icon, label, value, href}) => {
  const inner = (
    <>
      <div style={{width:44, height:44, borderRadius:12, background:"rgba(212, 162, 76, .14)", color:"var(--gold-400)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0}}>{icon}</div>
      <div>
        <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase", color:"rgba(245, 238, 223, .55)"}}>{label}</div>
        <div style={{fontFamily:"var(--font-display)", fontSize:22, letterSpacing:"-0.02em", marginTop:4, color:"var(--cream)"}}>{value}</div>
      </div>
    </>
  );
  const wrap = {display:"flex", alignItems:"center", gap:16, padding:"10px 0"};
  return href ? <a href={href} style={wrap}>{inner}</a> : <div style={wrap}>{inner}</div>;
};

const PhoneIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.9 2Z"/></svg>);
const MailIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 7l10 7 10-7"/></svg>);
const MapIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>);

const Footer = () => (
  <footer style={{background:"var(--navy-950)", color:"rgba(245, 238, 223, .7)", padding:"56px 0 32px"}}>
    <div className="container">
      <div style={{display:"grid", gridTemplateColumns:"1.5fr 1fr 1fr 1fr", gap:40, paddingBottom:40, borderBottom:"1px solid rgba(245, 238, 223, .12)"}}>
        <div>
          <div style={{display:"flex", alignItems:"center", gap:12}}>
            <div style={{width:40, height:40, borderRadius:10, background:"var(--gold-500)", display:"flex", alignItems:"center", justifyContent:"center"}}>
              <HouseIcon size={22} color="#0B1B2B"/>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--cream)"}}>Capital Home Solutions</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", marginTop:2}}>Any house · Any condition · Any situation</div>
            </div>
          </div>
          <p style={{fontSize:14, marginTop:20, lineHeight:1.6, maxWidth:380}}>
            A family-owned real estate solutions company helping homeowners across New York's Capital Region sell fast, stop foreclosure, and find the path that fits their life.
          </p>
        </div>
        <FooterCol title="Services" items={["Cash home offer", "Pre-foreclosure help", "Short sale", "Reverse mortgage referral", "Rental property buyout"]}/>
        <FooterCol title="Company" items={["About us", "How it works", "Testimonials", "FAQ", "Contact"]}/>
        <FooterCol title="Areas" items={["Albany County", "Saratoga County", "Schenectady County", "Rensselaer County"]}/>
      </div>
      <div style={{paddingTop:24, display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:16, fontSize:12}}>
        <div>© 2026 Capital Home Solutions · The Capital Region, NY</div>
        <div style={{display:"flex", gap:24}}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({title, items}) => (
  <div>
    <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.15em", textTransform:"uppercase", color:"var(--gold-300)", marginBottom:16}}>{title}</div>
    <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:10}}>
      {items.map(i => <li key={i}><a href="#" style={{fontSize:14}}>{i}</a></li>)}
    </ul>
  </div>
);

Object.assign(window, { FAQ, Areas, About, ContactCTA, Footer });
