// How it Works, Comparison, Before/After slider
const { useState: useStateS2, useRef: useRefS2 } = React;

const HowItWorks = () => {
  const steps = [
    {
      n: "01",
      title: "Tell us your situation",
      body: "Fill out our quick form or give us a call. Two minutes, no pressure, no info sold. The more we know, the better the solution we can build.",
      icon: <DocIcon size={22}/>,
      time: "~2 min",
    },
    {
      n: "02",
      title: "We map out your options",
      body: "A fair cash offer if that's the right move. Or a mortgage modification, short sale, probate strategy, or MLS listing, whichever actually fits. You see every path side-by-side.",
      icon: <CashIcon size={22}/>,
      time: "24 hrs",
    },
    {
      n: "03",
      title: "You pick. We handle it.",
      body: "Close in 7 days or 70. Keep the house. List for top dollar. Whatever you decide, we run point on the paperwork, the lender, the title work, so you don't have to.",
      icon: <KeyIcon size={22}/>,
      time: "You choose",
    },
  ];
  return (
    <section id="how" className="section">
      <div className="container">
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1fr 1.3fr", gap:80, alignItems:"end", marginBottom:64}}>
          <div>
            <span className="eyebrow">How it works</span>
            <h2 style={{fontSize:"clamp(40px, 4.5vw, 64px)", marginTop:20, letterSpacing:"-0.03em"}}>
              Three steps.<br/><em style={{fontStyle:"italic", color:"var(--ink-mute)"}}>Zero surprises.</em>
            </h2>
          </div>
          <p style={{fontSize:18, color:"var(--ink-soft)", lineHeight:1.55, maxWidth:520, justifySelf:"end"}}>
            Most buyers only have a hammer, so everything looks like a cash sale. We carry a whole toolkit, cash, mortgage modification, short sale, MLS listing, and we'll tell you straight up which one is right, even when it's not us buying.
          </p>
        </div>

        <div className="three-col" style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:24}}>
          {steps.map((s, i) => (
            <div key={i} style={{
              position:"relative",
              background: i === 1 ? "var(--navy-900)" : "var(--paper)",
              color: i === 1 ? "var(--cream)" : "var(--ink)",
              border: i === 1 ? "none" : "1px solid var(--line)",
              borderRadius:24, padding:"36px 32px 32px",
              minHeight: 360, display:"flex", flexDirection:"column", justifyContent:"space-between",
              boxShadow: i === 1 ? "var(--shadow-lg)" : "var(--shadow-sm)",
              overflow:"hidden",
            }}>
              {i === 1 && (
                <div aria-hidden className="hero-ornament" style={{position:"absolute", right:-80, bottom:-80, width:260, height:260, borderRadius:"50%", background:"radial-gradient(closest-side, rgba(212, 162, 76, .3), transparent)"}}/>
              )}
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", position:"relative"}}>
                <div style={{
                  fontFamily:"var(--font-display)", fontSize:72, letterSpacing:"-0.04em",
                  color: i === 1 ? "var(--gold-400)" : "var(--navy-900)", opacity: i === 1 ? 1 : .15,
                  lineHeight:.8,
                }}>{s.n}</div>
                <div style={{
                  width:52, height:52, borderRadius:14,
                  background: i === 1 ? "rgba(212, 162, 76, .18)" : "var(--navy-900)",
                  color: i === 1 ? "var(--gold-400)" : "var(--gold-400)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                }}>{s.icon}</div>
              </div>
              <div style={{position:"relative"}}>
                <h3 style={{fontSize:28, letterSpacing:"-0.02em", marginBottom:12}}>{s.title}</h3>
                <p style={{fontSize:15, lineHeight:1.55, color: i === 1 ? "rgba(245, 238, 223, .78)" : "var(--ink-soft)"}}>{s.body}</p>
                <div style={{
                  marginTop:22, display:"inline-flex", alignItems:"center", gap:8,
                  fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase",
                  color: i === 1 ? "var(--gold-300)" : "var(--ink-mute)",
                }}>
                  <ClockIcon size={14} color={i===1?"#EFCF89":"#6B7A8C"}/> {s.time}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Comparison = () => {
  const rows = [
    ["Commissions & fees", "0%", "6% (≈$18, 000)"],
    ["Repairs & cleaning", "None, as-is", "$10K, $40K out of pocket"],
    ["Showings & open houses", "Zero", "20+ strangers in your home"],
    ["Appraisal & inspection", "Waived", "Can kill the deal"],
    ["Time to close", "7, 21 days", "60, 90 days average"],
    ["Financing fall-through risk", "None (cash)", "~30% of deals collapse"],
    ["Moving date", "You pick", "Dictated by buyer"],
    ["Paperwork", "We handle it", "You chase it"],
  ];
  return (
    <section id="compare" className="section" style={{background:"var(--cream)"}}>
      <div className="container">
        <div style={{textAlign:"center", marginBottom:56}}>
          <span className="eyebrow" style={{margin:"0 auto"}}>When a cash sale is the right fit</span>
          <h2 style={{fontSize:"clamp(40px, 4.5vw, 64px)", marginTop:20, letterSpacing:"-0.03em"}}>
            The honest math.
          </h2>
          <p style={{fontSize:18, color:"var(--ink-soft)", marginTop:16, maxWidth:680, marginLeft:"auto", marginRight:"auto"}}>
            Cash isn't always the answer, but when speed, certainty, or an as-is sale matters most, here's what it actually saves you. On a $300, 000 home, traditional sellers leave <strong>$30, 000+</strong> on the table. If an MLS listing is a better fit for your situation, we'll tell you that too, and help you list.
          </p>
        </div>

        <div style={{
          background:"var(--paper)", borderRadius:28, overflow:"hidden",
          border:"1px solid var(--line)", boxShadow:"var(--shadow-lg)",
        }}>
          {/* Header */}
          <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr", background:"var(--navy-900)", color:"var(--cream)"}}>
            <div style={{padding:"22px 32px", fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"var(--gold-300)"}}>
              What you get
            </div>
            <div style={{padding:"22px 32px", display:"flex", alignItems:"center", gap:10, borderLeft:"1px solid rgba(245, 238, 223, .1)"}}>
              <div style={{width:36, height:36, borderRadius:10, background:"var(--gold-500)", display:"flex", alignItems:"center", justifyContent:"center"}}>
                <HouseIcon size={18} color="#0B1B2B"/>
              </div>
              <div>
                <div style={{fontFamily:"var(--font-display)", fontSize:18, letterSpacing:"-0.02em"}}>Capital Home Solutions</div>
                <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--gold-300)"}}>DIRECT CASH BUYER</div>
              </div>
            </div>
            <div style={{padding:"22px 32px", borderLeft:"1px solid rgba(245, 238, 223, .1)"}}>
              <div style={{fontFamily:"var(--font-display)", fontSize:18, letterSpacing:"-0.02em", color:"rgba(245, 238, 223, .7)"}}>Traditional MLS listing</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"rgba(245, 238, 223, .55)"}}>REALTOR / AGENT</div>
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr",
              borderTop:"1px solid var(--line)",
            }}>
              <div style={{padding:"22px 32px", fontSize:15, color:"var(--ink-soft)"}}>{r[0]}</div>
              <div style={{padding:"22px 32px", display:"flex", alignItems:"center", gap:10, borderLeft:"1px solid var(--line)", background:"rgba(212, 162, 76, .06)"}}>
                <span style={{
                  width:24, height:24, borderRadius:"50%", background:"#2F5D4B",
                  display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0,
                }}>
                  <CheckIcon size={12} color="#F5EEDF"/>
                </span>
                <span style={{fontSize:15, fontWeight:500, color:"var(--navy-900)"}}>{r[1]}</span>
              </div>
              <div style={{padding:"22px 32px", display:"flex", alignItems:"center", gap:10, borderLeft:"1px solid var(--line)"}}>
                <span style={{
                  width:24, height:24, borderRadius:"50%", background:"rgba(184, 92, 60, .14)",
                  display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0,
                }}>
                  <XIcon size={12} color="#B85C3C"/>
                </span>
                <span style={{fontSize:15, color:"var(--ink-mute)"}}>{r[2]}</span>
              </div>
            </div>
          ))}
          {/* Footer total */}
          <div style={{
            display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr",
            borderTop:"1px solid var(--line)", background:"var(--cream)",
          }}>
            <div style={{padding:"26px 32px", fontFamily:"var(--font-display)", fontSize:22}}>Estimated net</div>
            <div style={{padding:"26px 32px", borderLeft:"1px solid var(--line)", background:"rgba(212, 162, 76, .12)"}}>
              <div style={{fontFamily:"var(--font-display)", fontSize:32, letterSpacing:"-0.03em", color:"var(--navy-900)"}}>$287, 400</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--leaf)", marginTop:2}}>IN YOUR POCKET</div>
            </div>
            <div style={{padding:"26px 32px", borderLeft:"1px solid var(--line)"}}>
              <div style={{fontFamily:"var(--font-display)", fontSize:32, letterSpacing:"-0.03em", color:"var(--ink-mute)", textDecoration:"line-through"}}>~$252, 000</div>
              <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--ink-mute)", marginTop:2}}>AFTER FEES &amp; REPAIRS</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const BeforeAfter = () => {
  const [pos, setPos] = useStateS2(50);
  const wrapRef = useRefS2(null);
  const dragging = useRefS2(false);

  const move = (clientX) => {
    const el = wrapRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
    setPos((x / rect.width) * 100);
  };

  return (
    <section className="section" style={{paddingBottom:140}}>
      <div className="container">
        <div className="two-col" style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:64, alignItems:"center"}}>
          <div>
            <span className="eyebrow">Before &amp; After</span>
            <h2 style={{fontSize:"clamp(40px, 4.5vw, 60px)", marginTop:20, letterSpacing:"-0.03em"}}>
              The ones that scare other buyers off? That's our specialty.
            </h2>
            <p style={{fontSize:18, color:"var(--ink-soft)", marginTop:20, lineHeight:1.55}}>
              Mold. Fire damage. Hoarder situation. Inherited from a relative you haven't been inside in years? Any condition is a condition we have a solution for. You don't have to clean, fix, or even sweep. Leave what you don't want and take what you do.
            </p>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginTop:32}}>
              {[
                "Fire / water / mold damage",
                "Code violations & liens",
                "Hoarder homes",
                "Inherited / probate",
                "Tenants still in place",
                "Foundation issues",
              ].map(t => (
                <div key={t} style={{display:"flex", alignItems:"center", gap:10, fontSize:14, color:"var(--ink-soft)"}}>
                  <CheckIcon size={14} color="#2F5D4B"/> {t}
                </div>
              ))}
            </div>
            <div style={{marginTop:32, display:"flex", gap:24, alignItems:"center"}}>
              <button className="btn btn-dark">See more examples <ArrowRight/></button>
              <span style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--ink-mute)", letterSpacing:"0.1em", textTransform:"uppercase"}}>↔ Drag the slider</span>
            </div>
          </div>

          <div
            ref={wrapRef}
            onMouseDown={e=>{dragging.current=true; move(e.clientX);}}
            onMouseMove={e=>{if(dragging.current) move(e.clientX);}}
            onMouseUp={()=>dragging.current=false}
            onMouseLeave={()=>dragging.current=false}
            onTouchStart={e=>{dragging.current=true; move(e.touches[0].clientX);}}
            onTouchMove={e=>move(e.touches[0].clientX)}
            onTouchEnd={()=>dragging.current=false}
            style={{
              position:"relative",
              aspectRatio:"4 / 3",
              borderRadius:24, overflow:"hidden",
              background: "linear-gradient(135deg, #7A715A, #3A3428)",
              cursor:"ew-resize",
              userSelect:"none",
              boxShadow:"var(--shadow-lg)",
              border:"1px solid var(--line)",
            }}>
            {/* Rehabbed (after), bottom layer */}
            <div style={{
              position:"absolute", inset:0,
              background:"linear-gradient(135deg, #D4B88E, #8BA76E 70%, #2F5D4B)",
              display:"flex", alignItems:"center", justifyContent:"center",
            }}>
              <IsoHouse fill variant="rehabbed"/>
              <div style={{position:"absolute", top:20, right: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"}}>
                After · We rehab
              </div>
            </div>
            {/* Distressed (before), clipped top layer */}
            <div style={{
              position:"absolute", inset:0,
              clipPath:`polygon(0 0, ${pos}% 0, ${pos}% 100%, 0 100%)`,
              background:"linear-gradient(135deg, #8A7760, #3A3428)",
              display:"flex", alignItems:"center", justifyContent:"center",
            }}>
              <IsoHouse fill variant="distressed"/>
              <div style={{position:"absolute", top:20, left:20, background:"var(--paper)", color:"var(--navy-900)", padding:"8px 14px", borderRadius:999, fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase"}}>
                Before · You sell as-is
              </div>
            </div>
            {/* Handle */}
            <div style={{
              position:"absolute", top:0, bottom:0, left:`${pos}%`,
              width:2, background:"var(--gold-500)", transform:"translateX(-50%)",
              boxShadow:"0 0 20px rgba(212, 162, 76, .6)",
              pointerEvents:"none",
            }}/>
            <div style={{
              position:"absolute", top:"50%", left:`${pos}%`, transform:"translate(-50%, -50%)",
              width:56, height:56, borderRadius:"50%",
              background:"var(--gold-500)", color:"var(--navy-900)",
              display:"flex", alignItems:"center", justifyContent:"center",
              boxShadow:"0 8px 24px rgba(0, 0, 0, .25)",
              pointerEvents:"none",
            }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M8 8 L4 12 L8 16 M16 8 L20 12 L16 16"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks, Comparison, BeforeAfter });
