// Dedicated Cash Offer section, sits between Pre-foreclosure and Situations.

const CashOffer = () => {
  const steps = [
    { t: "Property walk", d: "In person or virtual, takes about 20 minutes. No lockboxes, no showings." },
    { t: "Offer in writing", d: "Fair number based on comps and as-is condition. Clear math, not a lowball." },
    { t: "You decide", d: "Review with family or an attorney. We never pressure a signature." },
    { t: "Close when ready", d: "7 days, 30 days, 70 days. Your timeline, wired to your account." },
  ];

  const fits = [
    "You need to move fast (relocation, new job, medical)",
    "The house needs work and you don't want to do any of it",
    "You inherited a property and don't want the burden",
    "You're facing foreclosure and need certainty, not a maybe",
    "Tenants in place you'd rather not manage",
    "You value privacy over strangers walking through showings",
  ];

  return (
    <section id="cash-offer" className="section" style={{background:"var(--ivory)", position:"relative", overflow:"hidden"}}>
      {/* soft gold ornament */}
      <div aria-hidden className="hero-ornament" style={{position:"absolute", top:-160, right:-160, width:520, height:520, 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:80, alignItems:"end", marginBottom:64}}>
          <div>
            <span className="eyebrow">Cash offer, when it's the right fit</span>
            <h2 style={{fontSize:"clamp(42px, 5vw, 68px)", marginTop:20, letterSpacing:"-0.03em"}}>
              A clean,<br/><em style={{fontStyle:"italic", color:"var(--navy-900)"}}>certain close.</em>
            </h2>
          </div>
          <p style={{fontSize:18, color:"var(--ink-soft)", lineHeight:1.6, maxWidth:520, justifySelf:"end"}}>
            <strong style={{color:"var(--navy-900)"}}>Facing foreclosure?</strong> We can purchase the property outright, as-is, in cash, and put real money in your pocket instead of watching you lose everything to the bank. No showings. No repairs. No financing contingencies that fall apart at the last minute. When speed and certainty matter more than squeezing the last dollar out of a listing, this is the simplest path out.
          </p>
        </div>

        {/* Main card */}
        <div style={{
          background:"var(--paper)", borderRadius:28, overflow:"hidden",
          border:"1px solid var(--line)", boxShadow:"var(--shadow-lg)",
          display:"grid", gridTemplateColumns:"1.1fr 1fr",
        }} className="two-col">
          {/* Left, what you get */}
          <div style={{padding:"48px 44px", borderRight:"1px solid var(--line)"}}>
            <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--ink-mute)"}}>
              What the cash offer includes
            </div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, marginTop:28, borderTop:"1px solid var(--line)"}}>
              {[
                ["$0", "Commission"],
                ["$0", "Closing costs"],
                ["$0", "Repairs or cleaning"],
                ["As is", "House condition"],
                ["7 to 70", "Days to close"],
                ["Yours", "Moving date"],
              ].map(([v, l], i) => (
                <div key={i} style={{
                  padding:"22px 4px",
                  borderBottom: i < 4 ? "1px solid var(--line)" : "none",
                  borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                }}>
                  <div style={{fontFamily:"var(--font-display)", fontSize:34, letterSpacing:"-0.03em", color:"var(--navy-900)", lineHeight:1}}>
                    {v}
                  </div>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--ink-mute)", marginTop:8}}>
                    {l}
                  </div>
                </div>
              ))}
            </div>

            <div style={{marginTop:32, padding:"20px 22px", background:"var(--cream)", borderRadius:16, border:"1px solid var(--line)"}}>
              <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--leaf)"}}>
                The guarantee
              </div>
              <p style={{fontSize:14.5, color:"var(--ink-soft)", marginTop:8, lineHeight:1.55}}>
                If the math on a traditional MLS listing is better for your situation, we'll tell you. Honestly. We have a real estate license and we'll list it ourselves for top dollar if that's the smarter move.
              </p>
            </div>
          </div>

          {/* Right, process timeline */}
          <div style={{padding:"48px 44px", background:"linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%)"}}>
            <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--ink-mute)"}}>
              The 4 step process
            </div>
            <div style={{marginTop:24, position:"relative"}}>
              {/* vertical line */}
              <div style={{position:"absolute", left:15, top:12, bottom:12, width:2, background:"linear-gradient(180deg, var(--gold-500), var(--gold-300) 60%, rgba(212,162,76,.1))"}}/>
              {steps.map((s, i) => (
                <div key={i} style={{display:"flex", gap:22, paddingBottom: i === steps.length - 1 ? 0 : 28, position:"relative"}}>
                  <div style={{
                    flexShrink:0, width:32, height:32, borderRadius:"50%",
                    background: i === 0 ? "var(--navy-900)" : "var(--paper)",
                    color: i === 0 ? "var(--gold-400)" : "var(--navy-900)",
                    border: i === 0 ? "none" : "2px solid var(--gold-500)",
                    display:"flex", alignItems:"center", justifyContent:"center",
                    fontFamily:"var(--font-mono)", fontSize:12, fontWeight:600,
                    zIndex:1,
                  }}>{i + 1}</div>
                  <div style={{paddingTop:3}}>
                    <div style={{fontFamily:"var(--font-display)", fontSize:20, letterSpacing:"-0.02em", color:"var(--navy-900)"}}>{s.t}</div>
                    <p style={{fontSize:14, color:"var(--ink-soft)", marginTop:4, lineHeight:1.5, maxWidth:340}}>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* When it's the right fit */}
        <div style={{marginTop:56, display:"grid", gridTemplateColumns:"1fr 1.3fr", gap:48, alignItems:"start"}} className="two-col">
          <div>
            <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--gold-500)"}}>When cash is the right call</div>
            <h3 style={{fontSize:30, letterSpacing:"-0.025em", marginTop:12, color:"var(--navy-900)"}}>
              A direct sale makes sense when<em style={{fontStyle:"italic", color:"var(--ink-mute)"}}>…</em>
            </h3>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"14px 28px"}}>
            {fits.map((f, i) => (
              <div key={i} style={{display:"flex", gap:12, alignItems:"flex-start", fontSize:15, color:"var(--ink-soft)", lineHeight:1.5}}>
                <span style={{flexShrink:0, width:22, height:22, borderRadius:"50%", background:"rgba(47,93,75,.14)", color:"#2F5D4B", display:"flex", alignItems:"center", justifyContent:"center", marginTop:1}}>
                  <CheckIcon size={12} color="#2F5D4B"/>
                </span>
                {f}
              </div>
            ))}
          </div>
        </div>

        {/* CTA strip */}
        <div style={{
          marginTop:56, padding:"32px 36px", borderRadius:20,
          background:"var(--navy-900)", color:"var(--cream)",
          display:"flex", gap:24, alignItems:"center", justifyContent:"space-between", flexWrap:"wrap",
        }}>
          <div>
            <div style={{fontFamily:"var(--font-display)", fontSize:26, letterSpacing:"-0.02em"}}>Ready to see a real number?</div>
            <div style={{fontSize:14, color:"rgba(245,238,223,.72)", marginTop:6}}>No obligation, no pressure, no data sold. Written offer inside of 24 hours.</div>
          </div>
          <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
            <a href="tel:5188173726" className="btn" style={{background:"transparent", color:"var(--cream)", border:"1px solid rgba(245,238,223,.3)"}}>
              <svg width="16" height="16" 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.6a2 2 0 0 1-.4 2.1L8 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg> (518) 817-3726
            </a>
            <a href="#offer" className="btn btn-primary">Get my offer <ArrowRight/></a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CashOffer });
