// Nav + Hero
const { useState, useEffect, useRef } = React;

const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);

  const links = [
    ["How it works", "#how"],
    ["Pre-foreclosure", "#foreclosure"],
    ["Cash Offer", "#cash-offer"],
    ["Situations", "#situations"],
    ["About", "#about"],
  ];

  return (
    <header style={{
      position:"fixed", top:0, left:0, right:0, zIndex:50,
      transition:"all .3s ease",
      padding: scrolled ? "14px 0" : "22px 0",
      background: scrolled || menuOpen ? "rgba(251, 247, 238, .92)" : "transparent",
      backdropFilter: scrolled || menuOpen ? "saturate(160%) blur(16px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
    }}>
      <div className="container" style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:12}}>
        <a href="#" style={{display:"flex", alignItems:"center", gap:12, minWidth:0, flex:"0 1 auto"}}>
          <div style={{
            width:40, height:40, borderRadius:10,
            background:"var(--navy-900)", position:"relative",
            display:"flex", alignItems:"center", justifyContent:"center",
            boxShadow:"0 4px 12px rgba(11, 27, 43, .2)",
            flexShrink:0,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D4A24C" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 11 L12 4 L21 11 L21 20 L14 20 L14 14 L10 14 L10 20 L3 20 Z"/>
            </svg>
          </div>
          <div style={{display:"flex", flexDirection:"column", lineHeight:1, minWidth:0}}>
            <span className="logo-name" style={{fontFamily:"var(--font-display)", fontSize:20, letterSpacing:"-0.02em", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>Capital Home Solutions</span>
            <span className="logo-sub" style={{fontFamily:"var(--font-mono)", fontSize:9.5, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--ink-mute)", marginTop:4}}>Capital Region · NY</span>
          </div>
        </a>
        <nav className="nav-links" style={{display:"flex", alignItems:"center", gap:36}}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{fontSize:14, color:"var(--ink-soft)"}}
               onMouseEnter={e=>e.currentTarget.style.color="var(--navy-900)"}
               onMouseLeave={e=>e.currentTarget.style.color="var(--ink-soft)"}
            >{label}</a>
          ))}
        </nav>
        <div style={{display:"flex", alignItems:"center", gap:10}}>
          <a href="tel:5188173726" className="nav-phone" style={{display:"flex", alignItems:"center", gap:8, fontFamily:"var(--font-mono)", fontSize:13}}>
            <span style={{width:8, height:8, borderRadius:"50%", background:"#2F5D4B", animation:"pulseDot 2s infinite"}}/>
            (518) 817-3726
          </a>
          <a href="#offer" className="btn btn-primary nav-cta" style={{padding:"10px 18px", fontSize:14}}>
            <span className="nav-cta-text">Get my options</span>
            <span className="nav-cta-short" style={{display:"none"}}>Options</span>
            <ArrowRight/>
          </a>
          <button
            className="nav-hamburger"
            aria-label="Menu"
            onClick={() => setMenuOpen(!menuOpen)}
            style={{
              display:"none",
              width:40, height:40, borderRadius:10,
              background:"var(--navy-900)", color:"var(--cream)",
              alignItems:"center", justifyContent:"center", flexShrink:0,
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {menuOpen ? <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></> : <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu drawer */}
      {menuOpen && (
        <div className="mobile-menu" style={{
          display:"none",
          background:"rgba(251, 247, 238, .98)",
          borderTop:"1px solid var(--line)",
          padding:"24px 0",
        }}>
          <div className="container" style={{display:"flex", flexDirection:"column", gap:4}}>
            {links.map(([label, href]) => (
              <a key={href} href={href} onClick={() => setMenuOpen(false)} style={{
                fontSize:18, fontFamily:"var(--font-display)", color:"var(--navy-900)",
                padding:"14px 0", borderBottom:"1px solid var(--line)",
                display:"flex", justifyContent:"space-between", alignItems:"center",
              }}>
                {label}
                <ArrowRight size={16}/>
              </a>
            ))}
            <a href="tel:5188173726" onClick={() => setMenuOpen(false)} style={{
              marginTop:16, padding:"14px 18px", borderRadius:12,
              background:"var(--navy-900)", color:"var(--cream)",
              display:"flex", alignItems:"center", gap:10, fontFamily:"var(--font-mono)", fontSize:14,
            }}>
              <span style={{width:8, height:8, borderRadius:"50%", background:"#7DD491"}}/>
              Call (518) 817-3726
            </a>
          </div>
        </div>
      )}
    </header>
  );
};

const Hero = () => {
  const [form, setForm] = useState({ address:"", name:"", phone:"" });
  const [submitted, setSubmitted] = useState(false);

  return (
    <section style={{position:"relative", paddingTop: 140, paddingBottom: 80, overflow:"hidden"}} className="noise">
      {/* Background ornament */}
      <div aria-hidden className="hero-ornament" style={{
        position:"absolute", top:-120, right:-120, width:640, height:640, borderRadius:"50%",
        background:"radial-gradient(closest-side, rgba(212, 162, 76, .22), rgba(212, 162, 76, 0))",
        pointerEvents:"none",
      }}/>
      <div aria-hidden className="hero-ornament" style={{
        position:"absolute", bottom:-200, left:-160, width:520, height:520, borderRadius:"50%",
        background:"radial-gradient(closest-side, rgba(47, 93, 75, .14), rgba(47, 93, 75, 0))",
        pointerEvents:"none",
      }}/>

      <div className="container hero-grid" style={{position:"relative", display:"grid", gridTemplateColumns:"1.05fr .95fr", gap:80, alignItems:"center"}}>
        <div className="hero-copy">
          <div className="pill" style={{marginBottom:24}}>
            <span className="pill-dot"/> Serving the Capital Region of NY
          </div>
          <h1 style={{fontSize:"clamp(52px, 6vw, 88px)", letterSpacing:"-0.035em"}}>
            A solution for<br/>
            <span style={{position:"relative", display:"inline-block"}}>
              <span style={{position:"relative", zIndex:1, fontStyle:"italic"}}>every situation.</span>
              <svg viewBox="0 0 300 14" preserveAspectRatio="none" style={{position:"absolute", left:0, right:0, bottom:-6, width:"100%", height:14, zIndex:0}}>
                <path d="M2 10 Q 75 2, 150 8 T 298 6" stroke="#D4A24C" strokeWidth="4" fill="none" strokeLinecap="round"/>
              </svg>
            </span>
          </h1>
          <p style={{marginTop:28, fontSize:20, color:"var(--ink-soft)", maxWidth:560, lineHeight:1.5}}>
            <strong style={{color:"var(--navy-900)"}}>Any house. Any condition. Any situation.</strong> Foreclosure 30 days out? We step in with a mortgage modification or short sale help. Probate headache? We buy as-is, full cash, 7-day close. Relocating Friday? Pick your closing date. Divorce, liens, code violations, hoarder home, behind on taxes. We've seen it, fixed it, closed it. And when an MLS listing gets you more money, we'll say so and list it ourselves. One call. Real answer in 24 hours. Close when you want to.
          </p>

          {/* Offer card */}
          <form id="offer" className="hero-form" onSubmit={e=>{e.preventDefault(); setSubmitted(true);}} style={{
            marginTop:36, background:"var(--paper)",
            border:"1px solid var(--line)",
            borderRadius:20, padding:22,
            boxShadow:"var(--shadow-lg)",
            display:"grid", gridTemplateColumns:"1.2fr 1fr .8fr auto", gap:10, alignItems:"stretch",
            maxWidth: 640,
          }}>
            <Field placeholder="Property address" value={form.address} onChange={v=>setForm(f=>({...f, address:v}))} icon={<HouseIcon size={16} color="#6B7A8C"/>}/>
            <Field placeholder="Your name" value={form.name} onChange={v=>setForm(f=>({...f, name:v}))}/>
            <Field placeholder="Phone" value={form.phone} onChange={v=>setForm(f=>({...f, phone:v}))}/>
            <button type="submit" className="btn btn-primary" style={{padding:"0 20px", whiteSpace:"nowrap"}}>
              {submitted ? "We'll call you ✓" : <>Get my options <ArrowRight/></>}
            </button>
            <div style={{gridColumn:"1 / -1", display:"flex", gap:20, alignItems:"center", marginTop:4, flexWrap:"wrap"}}>
              <MiniBadge><CheckIcon size={12} color="#2F5D4B"/> Free consultation</MiniBadge>
              <MiniBadge><CheckIcon size={12} color="#2F5D4B"/> Response in 24 hrs</MiniBadge>
              <MiniBadge><CheckIcon size={12} color="#2F5D4B"/> No obligation</MiniBadge>
            </div>
          </form>

          {/* Proof row */}
          <div className="stat-row" style={{display:"flex", gap:36, marginTop:44, alignItems:"center"}}>
            <Stat value="400+" label="Situations solved"/>
            <div style={{width:1, height:36, background:"var(--line)"}}/>
            <Stat value="24 hrs" label="To a real solution"/>
            <div style={{width:1, height:36, background:"var(--line)"}}/>
            <Stat value="0%" label="Fees, ever"/>
          </div>
        </div>

        {/* Right side: 3D scene */}
        <HeroScene/>
      </div>

      {/* Marquee */}
      <Marquee/>
    </section>
  );
};

const Field = ({ placeholder, value, onChange, icon }) => (
  <label style={{
    display:"flex", alignItems:"center", gap:10,
    background:"var(--ivory)",
    border:"1px solid var(--line)",
    borderRadius:12, padding:"14px 14px",
  }}>
    {icon}
    <input value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      style={{border:"none", background:"none", outline:"none", fontFamily:"inherit", fontSize:14, width:"100%", color:"var(--ink)"}}/>
  </label>
);

const MiniBadge = ({children}) => (
  <span style={{display:"inline-flex", alignItems:"center", gap:6, fontSize:12, color:"var(--ink-soft)"}}>
    {children}
  </span>
);

const Stat = ({value, label}) => (
  <div>
    <div style={{fontFamily:"var(--font-display)", fontSize:34, letterSpacing:"-0.03em", lineHeight:1}}>{value}</div>
    <div style={{fontFamily:"var(--font-mono)", fontSize:11, textTransform:"uppercase", letterSpacing:"0.1em", color:"var(--ink-mute)", marginTop:6}}>{label}</div>
  </div>
);

const HeroScene = () => {
  return (
    <div className="hero-scene" style={{position:"relative", height: 560, display:"flex", alignItems:"center", justifyContent:"center"}}>
      {/* Large soft plate */}
      <div style={{
        position:"absolute", inset:"10% 0",
        background:"linear-gradient(180deg, rgba(184, 92, 60, .10), rgba(184, 92, 60, .02))",
        borderRadius: 40,
        border:"1px solid rgba(184, 92, 60, .22)",
      }}/>

      {/* Foreclosure notice - red stamp style */}
      <div className="hero-notice" style={{
        position:"absolute", top:24, left:-10, zIndex:4,
        transform:"rotate(-6deg)",
        animation:"floatSlow 6s ease-in-out infinite",
      }}>
        <div style={{
          background:"#FBF7EE",
          border:"2px solid #B85C3C",
          padding:"14px 18px 16px",
          boxShadow:"0 14px 34px rgba(11,27,43,.22), 0 3px 10px rgba(11,27,43,.12)",
          position:"relative",
          maxWidth: 240,
        }}>
          {/* torn/aged feel - corner fold */}
          <div style={{
            position:"absolute", top:-1, right:-1, width:22, height:22,
            background:"linear-gradient(225deg, #E8DEC5 50%, transparent 50%)",
            borderLeft:"1px solid #B85C3C", borderBottom:"1px solid #B85C3C",
          }}/>
          <div style={{
            fontFamily:"var(--font-mono)", fontSize:9, letterSpacing:"0.22em",
            color:"#6B7A8C", textTransform:"uppercase", marginBottom:6,
          }}>Notice of Default</div>
          <div style={{
            fontFamily:"var(--font-display)", fontSize:22, letterSpacing:"-0.02em",
            color:"#B85C3C", lineHeight:1.05, fontStyle:"italic", fontWeight:500,
          }}>Foreclosure<br/>Pending</div>
          <div style={{
            marginTop:10, paddingTop:10, borderTop:"1px dashed rgba(11,27,43,.2)",
            fontFamily:"var(--font-mono)", fontSize:10, color:"var(--ink-soft)",
            letterSpacing:"0.05em",
          }}>You have <span style={{color:"#B85C3C", fontWeight:700}}>RIGHTS</span>. Act now.</div>
          {/* stamp */}
          <div style={{
            position:"absolute", bottom:-14, right:-12,
            width:64, height:64, borderRadius:"50%",
            border:"2.5px solid #B85C3C",
            display:"flex", alignItems:"center", justifyContent:"center",
            fontFamily:"var(--font-display)", fontSize:10, fontWeight:700,
            color:"#B85C3C", textAlign:"center", lineHeight:1.05,
            transform:"rotate(12deg)",
            background:"rgba(251, 247, 238, .95)",
            letterSpacing:"0.08em",
          }}>
            <div>URGENT<br/><span style={{fontSize:7, letterSpacing:"0.18em"}}>TIME SENSITIVE</span></div>
          </div>
        </div>
      </div>

      {/* Main house - distressed for urgency */}
      <div style={{position:"relative", zIndex:2, animation:"floatSlow 8s ease-in-out infinite"}}>
        <IsoHouse size={420} hero/>
      </div>

      {/* We can help card - solution card */}
      <div className="hero-solution" style={{
        position:"absolute", right:-4, bottom:30, zIndex:3,
        background:"var(--navy-900)",
        color:"var(--cream)",
        padding:"16px 18px",
        borderRadius:16,
        boxShadow:"0 18px 44px rgba(11,27,43,.3)",
        maxWidth:230,
        border:"1px solid rgba(212,162,76,.25)",
        animation:"floatSlow 7s ease-in-out infinite reverse",
      }}>
        <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:10}}>
          <span style={{width:8, height:8, borderRadius:"50%", background:"#7DD491", animation:"pulseDot 1.6s infinite"}}/>
          <span style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--gold-300)"}}>We can help</span>
        </div>
        <div style={{fontFamily:"var(--font-display)", fontSize:20, letterSpacing:"-0.02em", lineHeight:1.15, color:"#FBF7EE"}}>
          Stop the foreclosure.<br/>Save your credit.
        </div>
        <div style={{marginTop:10, fontSize:12, color:"rgba(251,247,238,.72)", lineHeight:1.4}}>
          Mortgage mods, short sales, cash offers. Free consultation in 24 hrs.
        </div>
      </div>

      {/* Tag */}
      <div style={{
        position:"absolute", bottom:10, left:16, zIndex:3,
        background:"var(--gold-500)", color:"var(--navy-900)",
        padding:"10px 16px", borderRadius:999,
        display:"flex", alignItems:"center", gap:10,
        fontFamily:"var(--font-mono)", fontSize:11, textTransform:"uppercase", letterSpacing:"0.1em",
        boxShadow:"0 10px 24px rgba(212,162,76,.35)",
        fontWeight:600,
      }}>
        <span style={{width:6, height:6, borderRadius:"50%", background:"#0B1B2B", animation:"pulseDot 1.6s infinite"}}/>
        Free · Confidential · No obligation
      </div>
    </div>
  );
};

const Marquee = () => {
  const items = [
    "400+ homeowners helped",
    "Cash offers for as-is sales",
    "MLS listings for top dollar",
    "Mortgage modifications",
    "Short sale navigation",
    "Probate and inherited homes",
    "Close in as little as 7 days",
    "A solution for every situation",
  ];
  const doubled = [...items, ...items];
  return (
    <div style={{
      marginTop:80, padding:"18px 0",
      borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
      background:"var(--cream)", overflow:"hidden",
    }}>
      <div style={{display:"flex", gap:48, animation:"marquee 40s linear infinite", whiteSpace:"nowrap"}}>
        {doubled.map((t, i) => (
          <span key={i} style={{display:"inline-flex", alignItems:"center", gap:18, fontFamily:"var(--font-mono)", fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--navy-900)"}}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#D4A24C" strokeWidth="2" strokeLinecap="round"><path d="M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z"/></svg>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Nav, Hero });
