// Pre-foreclosure, Situations, Testimonials
const PreForeclosure = () => {
  const paths = [
    {
      label: "Behind on payments",
      title: "Mortgage modification",
      body: "Still want to keep the house? We'll connect you with our network of housing counselors and help negotiate a lower payment, a lower rate, or a new loan term directly with your lender.",
      how: [
        "We pull your hardship details (job loss, medical, income drop)",
        "Our HUD-approved counselors build the package with you",
        "The bank reviews for a lower rate, longer term, or payment rollback",
        "You keep the house. Arrears get folded into the loan.",
      ],
      icon: <DocIcon size={22}/>,
      tag: "Keep the house",
      accent: "var(--leaf)",
    },
    {
      label: "Owe more than it's worth",
      title: "Short sale (no cost to you)",
      body: "Underwater and need out? We negotiate directly with your bank to accept less than what's owed. You pay nothing. The bank pays the commissions, closing, and in most cases forgives the shortfall.",
      how: [
        "$0 out of pocket, the bank covers fees, commissions, and title",
        "We handle the hardship letter, BPO, and lender negotiation",
        "Far less credit damage than a full foreclosure (often 2 years vs 7)",
        "Walk away clean. No deficiency chased in most NY cases.",
      ],
      icon: <HandIcon size={22}/>,
      tag: "Protect your credit",
      accent: "var(--gold-500)",
    },
    {
      label: "62 or older",
      title: "Reverse mortgage",
      body: "Love your home and don't want to leave? A reverse mortgage turns your equity into tax-free monthly income or a lump sum. You stay in the house for life with zero monthly mortgage payment.",
      how: [
        "Must be 62+ and have equity in your primary residence",
        "FHA-insured HECM program, you always own your home",
        "No monthly mortgage payment, ever, while you live there",
        "Use the funds to stop foreclosure, pay medical, or just live",
      ],
      icon: <HeartIcon size={22}/>,
      tag: "Stay in your home",
      accent: "var(--brick)",
    },
  ];

  return (
    <section id="foreclosure" className="section" style={{background:"var(--navy-900)", color:"var(--cream)", position:"relative", overflow:"hidden"}}>
      {/* Ornament */}
      <div aria-hidden className="hero-ornament" style={{position:"absolute", top:-200, right:-200, width:700, height:700, borderRadius:"50%", background:"radial-gradient(closest-side, rgba(184, 92, 60, .18), transparent)"}}/>
      <div aria-hidden className="hero-ornament" style={{position:"absolute", bottom:-150, left:-150, width:500, height:500, borderRadius:"50%", background:"radial-gradient(closest-side, rgba(47, 93, 75, .18), transparent)"}}/>

      <div className="container" style={{position:"relative"}}>
        {/* URGENT BANNER */}
        <div style={{
          display:"inline-flex", alignItems:"center", gap:14,
          padding:"10px 18px", borderRadius:999,
          background:"rgba(184, 92, 60, .18)",
          border:"1px solid rgba(184, 92, 60, .45)",
          color:"#FFB79A",
          fontFamily:"var(--font-mono)", fontSize:12, letterSpacing:"0.14em", textTransform:"uppercase",
          marginBottom:28,
        }}>
          <span style={{width:8, height:8, borderRadius:"50%", background:"#FF8159", animation:"pulseDot 1.6s infinite"}}/>
          Urgent · Time-sensitive · Act now
        </div>

        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1.1fr .9fr", gap:72, alignItems:"end", marginBottom:56}}>
          <div>
            <span className="eyebrow" style={{color:"var(--gold-300)"}}>Facing foreclosure</span>
            <h2 style={{fontSize:"clamp(44px, 5.4vw, 76px)", marginTop:20, letterSpacing:"-0.03em", lineHeight:1}}>
              DON'T LOSE<br/>
              <span style={{color:"#FF8159"}}>YOUR HOUSE</span><br/>
              <em style={{fontStyle:"italic", color:"var(--gold-400)", fontSize:"0.72em"}}>to the bank.</em>
            </h2>
          </div>
          <div>
            <p style={{fontSize:19, color:"rgba(245, 238, 223, .88)", lineHeight:1.55, maxWidth:520, fontWeight:500}}>
              A foreclosure doesn't just take your house. It <strong style={{color:"#FFB79A"}}>ruins your credit for 7 years</strong>, follows you onto every rental and job application, and often ends in <strong style={{color:"#FFB79A"}}>bankruptcy</strong>. You don't have to let that happen.
            </p>
            <p style={{fontSize:16, color:"rgba(245, 238, 223, .72)", lineHeight:1.6, maxWidth:520, marginTop:18}}>
              There are three real paths to stop it, and the bank is never going to tell you about all three. We will. Free consultation. No obligation. No fee, ever.
            </p>
          </div>
        </div>

        {/* WHAT YOU LOSE - consequence strip */}
        <div style={{
          display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:1,
          background:"rgba(184, 92, 60, .3)",
          border:"1px solid rgba(184, 92, 60, .3)",
          borderRadius:16, overflow:"hidden",
          marginBottom:56,
        }} className="consequence-grid">
          {[
            { n: "7 yrs", l: "Credit damaged" },
            { n: "20–160", l: "Point FICO drop" },
            { n: "Yes", l: "Can force bankruptcy" },
            { n: "Public", l: "Record. Forever." },
          ].map((c,i) => (
            <div key={i} style={{
              background:"var(--navy-800)", padding:"22px 20px",
              display:"flex", flexDirection:"column", gap:4,
            }}>
              <div style={{fontFamily:"var(--font-display)", fontSize:32, color:"#FF8159", letterSpacing:"-0.02em", lineHeight:1}}>{c.n}</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:"rgba(245,238,223,.6)"}}>{c.l}</div>
            </div>
          ))}
        </div>

        {/* SOLUTION HEADER */}
        <div style={{marginBottom:28, display:"flex", alignItems:"baseline", gap:20, flexWrap:"wrap"}}>
          <h3 style={{fontSize:"clamp(28px, 3.2vw, 42px)", letterSpacing:"-0.025em", color:"var(--cream)"}}>
            Three ways we <em style={{color:"var(--gold-400)"}}>save it.</em>
          </h3>
          <span style={{fontFamily:"var(--font-mono)", fontSize:12, color:"rgba(245,238,223,.55)", letterSpacing:"0.1em", textTransform:"uppercase"}}>
            All free to you · Pick the one that fits
          </span>
        </div>

        <div className="three-col" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:20}}>
          {paths.map((p, i) => (
            <article key={i} style={{
              background:"rgba(245, 238, 223, .04)",
              border:"1px solid rgba(245, 238, 223, .12)",
              borderRadius:24, padding:"32px 28px",
              position:"relative", overflow:"hidden",
              transition:"transform .25s ease, background .25s ease, border .25s ease",
              display:"flex", flexDirection:"column",
            }} onMouseEnter={e=>{e.currentTarget.style.background="rgba(245, 238, 223, .07)"; e.currentTarget.style.transform="translateY(-4px)"; e.currentTarget.style.borderColor="rgba(212, 162, 76, .4)"}}
               onMouseLeave={e=>{e.currentTarget.style.background="rgba(245, 238, 223, .04)"; e.currentTarget.style.transform="translateY(0)"; e.currentTarget.style.borderColor="rgba(245, 238, 223, .12)"}}>
              <div style={{
                position:"absolute", top:0, left:0, right:0, height:3,
                background: p.accent,
              }}/>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:28}}>
                <div style={{
                  width:54, height:54, borderRadius:14,
                  background:"rgba(212, 162, 76, .14)", color:"var(--gold-400)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                }}>{p.icon}</div>
                <span style={{
                  fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase",
                  padding:"6px 10px", borderRadius:999,
                  border:"1px solid rgba(245, 238, 223, .2)", color:"var(--gold-300)",
                }}>{p.tag}</span>
              </div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"rgba(245, 238, 223, .55)", marginBottom:10}}>
                If you're · {p.label}
              </div>
              <h3 style={{fontSize:28, letterSpacing:"-0.025em", marginBottom:14, color:"var(--cream)", lineHeight:1.05}}>{p.title}</h3>
              <p style={{fontSize:14.5, lineHeight:1.6, color:"rgba(245, 238, 223, .72)"}}>{p.body}</p>

              {/* How it works */}
              <div style={{marginTop:22, paddingTop:22, borderTop:"1px dashed rgba(245, 238, 223, .14)"}}>
                <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--gold-400)", marginBottom:12}}>How it works</div>
                <ul style={{listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10}}>
                  {p.how.map((h, k) => (
                    <li key={k} style={{display:"flex", gap:10, fontSize:13, color:"rgba(245,238,223,.82)", lineHeight:1.45}}>
                      <span style={{
                        flexShrink:0, marginTop:4,
                        width:14, height:14, borderRadius:"50%",
                        background: p.accent, color:"var(--navy-900)",
                        display:"flex", alignItems:"center", justifyContent:"center",
                        fontSize:9, fontWeight:700,
                      }}>{k+1}</span>
                      <span>{h}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </div>

        {/* Timeline strip */}
        <div style={{
          marginTop:48, padding:"28px 32px", borderRadius:20,
          background:"rgba(184, 92, 60, .12)", border:"1px solid rgba(184, 92, 60, .35)",
          display:"flex", alignItems:"center", gap:20, flexWrap:"wrap", justifyContent:"space-between",
        }}>
          <div style={{display:"flex", alignItems:"center", gap:16}}>
            <div style={{width:40, height:40, borderRadius:"50%", background:"#FF8159", color:"var(--navy-900)", display:"flex", alignItems:"center", justifyContent:"center"}}>
              <ClockIcon size={20}/>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontSize:22}}>Got a Notice of Default?</div>
              <div style={{fontSize:14, color:"rgba(245, 238, 223, .75)"}}>In NY you have roughly 120 days before the auction. Every week you wait, options disappear. Call now.</div>
            </div>
          </div>
          <a href="tel:5182255350" className="btn btn-primary"><CashIcon size={16}/> Call (518) 225-5350</a>
        </div>
      </div>
    </section>
  );
};

const Situations = () => {
  const items = [
    { t:"Inherited a house", d:"Out-of-state probate? We buy it, keep the memories, skip the drive.", icon:<HouseIcon size={22}/> },
    { t:"Going through a divorce", d:"Clean split, one cash check, no agent dragging it out.", icon:<HandIcon size={22}/> },
    { t:"Relocating for work", d:"Move on your new start date, not the buyer's financing timeline.", icon:<ArrowRight size={22}/> },
    { t:"Tired landlord", d:"Bad tenants included. You don't need to evict, we'll take it all.", icon:<KeyIcon size={22}/> },
    { t:"Medical or job loss", d:"Fast cash when you need it most. No credit check, no delays.", icon:<HeartIcon size={22}/> },
    { t:"Downsizing", d:"Empty nest or retiring? Skip showings. Pick your move-out day.", icon:<HouseIcon size={22}/> },
    { t:"Code violations", d:"Open permits, fines, liens, we take on whatever the city has flagged.", icon:<DocIcon size={22}/> },
    { t:"Hoarder home", d:"Don't lift a finger. We buy it full. Take what you want.", icon:<CashIcon size={22}/> },
  ];
  return (
    <section id="situations" className="section" style={{background:"var(--ivory)"}}>
      <div className="container">
        <div style={{textAlign:"center", maxWidth:720, margin:"0 auto 64px"}}>
          <span className="eyebrow" style={{margin:"0 auto"}}>Situations we solve for</span>
          <h2 style={{fontSize:"clamp(40px, 4.5vw, 64px)", marginTop:20, letterSpacing:"-0.03em"}}>
            If life happened, <br/><em style={{fontStyle:"italic"}}>we have a path forward.</em>
          </h2>
          <p style={{fontSize:18, color:"var(--ink-soft)", marginTop:20}}>
            We're not looking for perfect. We're looking for real. Here are the most common situations homeowners bring through our door, and a solution for each one.
          </p>
        </div>

        <div className="four-col" style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:16}}>
          {items.map((it, i) => (
            <div key={i} style={{
              background:"var(--paper)", border:"1px solid var(--line)", borderRadius:18,
              padding:"28px 24px", minHeight:200, display:"flex", flexDirection:"column",
              transition:"all .2s ease", cursor:"pointer",
            }} onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-4px)"; e.currentTarget.style.borderColor="var(--gold-500)"; e.currentTarget.style.boxShadow="var(--shadow-md)";}}
               onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)"; e.currentTarget.style.borderColor="var(--line)"; e.currentTarget.style.boxShadow="none";}}>
              <div style={{
                width:44, height:44, borderRadius:12,
                background:"rgba(11, 27, 43, .06)", color:"var(--navy-900)",
                display:"flex", alignItems:"center", justifyContent:"center",
                marginBottom:20,
              }}>{it.icon}</div>
              <h4 style={{fontSize:20, letterSpacing:"-0.02em", marginBottom:8}}>{it.t}</h4>
              <p style={{fontSize:13.5, color:"var(--ink-soft)", lineHeight:1.55}}>{it.d}</p>
            </div>
          ))}
        </div>

        <div style={{textAlign:"center", marginTop:48}}>
          <p style={{fontSize:15, color:"var(--ink-mute)"}}>Not on this list? <a href="#contact" style={{color:"var(--navy-900)", textDecoration:"underline", textUnderlineOffset:4}}>Tell us your situation</a>, we've probably got a solution for it.</p>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const quotes = [
    {
      q: "I inherited my mother's house in Schenectady and it was a mess. I live in Florida. Niko flew me out once, handled everything else, and I had a check in my account in 11 days. I don't know what I would have done without them.",
      n: "Denise R.",
      l: "Schenectady · Inherited sale",
      c: "$142, 000 · 11 days",
    },
    {
      q: "We were 3 months behind and the bank was starting the foreclosure paperwork. They walked us through a short sale, we didn't pay a dime, and it didn't destroy our credit like we feared. Real human beings.",
      n: "Mike &amp; Sarah T.",
      l: "Albany · Pre-foreclosure",
      c: "Short sale · Credit protected",
    },
    {
      q: "I'm 74 and I wasn't ready to leave my house of 38 years. They set me up with a reverse mortgage specialist instead of pressuring me to sell. I still live here. I get a check every month now.",
      n: "Robert H.",
      l: "Saratoga · Reverse mortgage",
      c: "Stayed in home",
    },
  ];
  return (
    <section className="section" style={{background:"var(--paper)"}}>
      <div className="container">
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:64, alignItems:"center", marginBottom:56}}>
          <div>
            <span className="eyebrow">Neighbors helping neighbors</span>
            <h2 style={{fontSize:"clamp(40px, 4.5vw, 60px)", marginTop:20, letterSpacing:"-0.03em"}}>
              400+ families.<br/>One phone call each.
            </h2>
          </div>
          <div style={{display:"flex", alignItems:"center", gap:48, justifySelf:"end"}}>
            <div>
              <div style={{display:"flex", gap:2}}>
                {[0, 1, 2, 3, 4].map(i => <StarIcon key={i}/>)}
              </div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:"var(--ink-mute)", marginTop:8}}>4.9 avg · 200+ reviews</div>
            </div>
          </div>
        </div>

        <div className="three-col" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:20}}>
          {quotes.map((t, i) => (
            <figure key={i} style={{
              background: i===1 ? "var(--cream)" : "var(--ivory)",
              border:"1px solid var(--line)", borderRadius:20, padding:"32px 30px",
              display:"flex", flexDirection:"column", justifyContent:"space-between", minHeight:380,
              margin:0,
            }}>
              <svg width="40" height="30" viewBox="0 0 40 30" fill="var(--gold-500)" style={{marginBottom:16}}>
                <path d="M8 0 C4 6 0 12 0 20 L0 30 L14 30 L14 16 L6 16 C6 10 10 6 14 4 Z M32 0 C28 6 24 12 24 20 L24 30 L38 30 L38 16 L30 16 C30 10 34 6 38 4 Z"/>
              </svg>
              <blockquote style={{fontSize:17, lineHeight:1.55, color:"var(--navy-900)", fontFamily:"var(--font-display)", fontWeight:400, letterSpacing:"-0.01em", margin:0}} dangerouslySetInnerHTML={{__html:`"${t.q}"`}}/>
              <figcaption style={{marginTop:28, paddingTop:24, borderTop:"1px solid var(--line)"}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <div>
                    <div style={{fontSize:14, fontWeight:500, color:"var(--navy-900)"}} dangerouslySetInnerHTML={{__html:t.n}}/>
                    <div style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--ink-mute)", letterSpacing:"0.08em", textTransform:"uppercase", marginTop:4}}>{t.l}</div>
                  </div>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--leaf)", textAlign:"right"}}>{t.c}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

const StarIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="#D4A24C">
    <path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18.2 22 12 18l-6.2 4 1.7-7.2L2 10l7.1-1.1z"/>
  </svg>
);

Object.assign(window, { PreForeclosure, Situations, Testimonials });