/* Shared primitives, icons, layout chrome, constants */
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;
const { motion, AnimatePresence } = window.Motion || window.FramerMotion || {};

// Minimal inline SVG icon set (original). Fallback "dot" renders if name not found.
const ICONS = {
  "arrow-right":   <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
  "arrow-left":    <><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></>,
  "chevron-right": <path d="m9 6 6 6-6 6"/>,
  "chevron-down":  <path d="m6 9 6 6 6-6"/>,
  "chevron-up":    <path d="m6 15 6-6 6 6"/>,
  "chevrons-left-right": <><path d="m9 7-5 5 5 5"/><path d="m15 7 5 5-5 5"/></>,
  "plus":          <><path d="M12 5v14"/><path d="M5 12h14"/></>,
  "check":         <path d="M20 6 9 17l-5-5"/>,
  "check-circle-2":<><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
  "circle-check":  <><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></>,
  "shield-check":  <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></>,
  "badge-check":   <><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.73 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.74 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.75Z"/><path d="m9 12 2 2 4-4"/></>,
  "lock":          <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
  "clock":         <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
  "calendar":      <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
  "calendar-range":<><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18M8 14h4M14 18h4"/></>,
  "zap":           <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z"/>,
  "compass":       <><circle cx="12" cy="12" r="10"/><path d="m16.2 7.8-2.9 6.3-6.3 2.9 2.9-6.3 6.3-2.9Z"/></>,
  "home":          <><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M9 22V12h6v10"/></>,
  "line-chart":    <><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></>,
  "sparkles":      <><path d="M12 3 13.5 9 19 10.5 13.5 12 12 18 10.5 12 5 10.5 10.5 9Z"/><path d="M19 3v4M21 5h-4"/></>,
  "star":          <path d="M12 2.5 14.95 8.5 21.5 9.45 16.75 14 17.9 20.5 12 17.45 6.1 20.5 7.25 14 2.5 9.45 9.05 8.5Z" fill="currentColor"/>,
  "map-pin":       <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
  "handshake":     <><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3 1 11h-2"/><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/><path d="M3 4h8"/></>,
  "hammer":        <><path d="m15 12-8.5 8.5a2.12 2.12 0 1 1-3-3L12 9"/><path d="M17.64 15 22 10.64"/><path d="m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91"/></>,
  "banknote":      <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></>,
  "mail":          <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></>,
  "printer":       <><path d="M6 9V2h12v7"/><rect x="6" y="14" width="12" height="8"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/></>,
  "info":          <><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></>,
  "upload":        <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8 12 3 7 8"/><path d="M12 3v12"/></>,
  "loader-2":      <path d="M21 12a9 9 0 1 1-6.2-8.6"/>,
  "phone":         <path d="M22 16.92V21a1 1 0 0 1-1.1 1 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 3.07 4.18 1 1 0 0 1 4.06 3H8a1 1 0 0 1 1 .75 12.84 12.84 0 0 0 .7 2.81 1 1 0 0 1-.22 1L7.91 9.09a16 16 0 0 0 6 6l1.52-1.57a1 1 0 0 1 1-.22 12.84 12.84 0 0 0 2.81.7 1 1 0 0 1 .76 1Z"/>,
  "message-square":<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/>,
  "message-circle":<><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5Z"/></>,
  "x":             <><path d="M18 6 6 18"/><path d="M6 6l12 12"/></>,
};
function Icon({ name, size = 18, className = "", strokeWidth = 1.75 }) {
  const node = ICONS[name];
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round"
      className={"inline-block shrink-0 " + className}
      aria-hidden="true"
    >
      {node ? <g>{node}</g> : <circle cx="12" cy="12" r="2" fill="currentColor"/>}
    </svg>
  );
}

// Buttons
function Button({ children, variant = "primary", size = "md", as = "button", className = "", ...rest }) {
  const base = "inline-flex items-center justify-center gap-2 font-medium rounded-full transition-all duration-200 select-none whitespace-nowrap";
  const sizes = {
    sm: "px-4 py-2 text-sm",
    md: "px-5 py-3 text-[15px]",
    lg: "px-7 py-4 text-base",
  };
  const variants = {
    primary: "bg-primary text-white hover:bg-primary-soft shadow-soft",
    accent: "bg-accent text-primary hover:brightness-95 shadow-soft",
    outline: "bg-transparent text-primary border border-primary/20 hover:border-primary/40 hover:bg-primary/5",
    ghost: "bg-transparent text-primary hover:bg-primary/5",
    white: "bg-white text-primary border border-line hover:shadow-soft",
  };
  const Cmp = as;
  return <Cmp className={`${base} ${sizes[size]} ${variants[variant]} ${className}`} {...rest}>{children}</Cmp>;
}

// Input
function Field({ label, hint, error, children, optional }) {
  return (
    <label className="block">
      {label && (
        <span className="flex items-baseline justify-between mb-1.5">
          <span className="text-sm font-medium text-ink">{label}</span>
          {optional && <span className="text-xs text-muted">Optional</span>}
        </span>
      )}
      {children}
      {hint && !error && <span className="block mt-1.5 text-xs text-muted">{hint}</span>}
      {error && <span className="block mt-1.5 text-xs text-warn">{error}</span>}
    </label>
  );
}

function TextInput({ className = "", ...rest }) {
  return (
    <input
      className={"w-full h-12 px-4 rounded-lg bg-white border hairline text-ink placeholder:text-muted focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition " + className}
      {...rest}
    />
  );
}

// Badge / Pill
function Pill({ children, tone = "neutral", className = "" }) {
  const tones = {
    neutral: "bg-primary/5 text-primary",
    accent:  "bg-accent/20 text-primary",
    success: "bg-success/10 text-success",
    warn:    "bg-warn/10 text-warn",
    gold:    "bg-gradient-to-b from-accent-soft to-accent/70 text-primary",
    outline: "bg-transparent text-muted border hairline",
  };
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11.5px] font-medium tracking-wide ${tones[tone]} ${className}`}>
      {children}
    </span>
  );
}

// Logo mark
function Logo({ className = "" }) {
  return (
    <span className={"inline-flex items-center gap-2 " + className}>
      <span className="relative inline-flex items-center justify-center w-8 h-8 rounded-[9px] bg-primary text-white">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 11.5 12 4l9 7.5" />
          <path d="M5 10.5V20h14v-9.5" />
          <circle cx="12" cy="14" r="2.3" />
        </svg>
      </span>
      <span className="font-display text-[20px] font-semibold tracking-tight text-primary">SellerScope</span>
    </span>
  );
}

// NavBar — only on landing
function NavBar({ onStart, onNavigate }) {
  return (
    <header className="w-full sticky top-0 z-30 backdrop-blur bg-bg/75 border-b hairline">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-[72px] flex items-center justify-between">
        <a href="#" onClick={(e)=>{e.preventDefault(); onNavigate && onNavigate('landing');}}><Logo/></a>
        <nav className="hidden md:flex items-center gap-9 text-[14.5px] text-ink/80">
          <a href="#how" className="hover:text-primary transition">How it works</a>
          <a href="#paths" className="hover:text-primary transition">The three paths</a>
          <a href="#trust" className="hover:text-primary transition">Why homeowners trust us</a>
          <a href="#faq" className="hover:text-primary transition">FAQ</a>
        </nav>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm" className="hidden md:inline-flex">Sign in</Button>
          <Button variant="primary" size="sm" onClick={onStart}>Get your home analysis</Button>
        </div>
      </div>
    </header>
  );
}

// Flow progress bar
function FlowBar({ step = 1, total = 4, onExit }) {
  const pct = Math.min(100, (step / total) * 100);
  return (
    <div className="sticky top-0 z-30 bg-bg/80 backdrop-blur border-b hairline">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-[64px] flex items-center justify-between">
        <button onClick={onExit} className="inline-flex items-center gap-2 text-sm text-muted hover:text-primary">
          <Logo/>
        </button>
        <div className="flex items-center gap-4 w-full max-w-[480px] mx-6">
          <span className="text-xs text-muted whitespace-nowrap tnum">Step {step} of {total}</span>
          <div className="flex-1 h-1.5 rounded-full bg-primary/10 overflow-hidden">
            <div className="h-full bg-primary transition-all duration-500" style={{ width: `${pct}%` }}/>
          </div>
        </div>
        <button onClick={onExit} className="text-sm text-muted hover:text-primary">Save & exit</button>
      </div>
    </div>
  );
}

// Footer
function Footer() {
  return (
    <footer className="border-t hairline mt-24">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-14">
        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-10">
          <div className="max-w-sm">
            <Logo/>
            <p className="mt-4 text-sm text-muted leading-relaxed">
              A calm, honest way to understand what your home is worth — and what to do next.
            </p>
            <p className="mt-3 text-xs text-muted">Proudly built in Wichita, Kansas.</p>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-8 text-sm">
            <div>
              <div className="text-xs uppercase tracking-[0.08em] text-muted mb-3">Company</div>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-primary">About</a></li>
                <li><a href="#" className="hover:text-primary">Contact</a></li>
                <li><a href="#" className="hover:text-primary">Careers</a></li>
              </ul>
            </div>
            <div>
              <div className="text-xs uppercase tracking-[0.08em] text-muted mb-3">Legal</div>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-primary">Privacy</a></li>
                <li><a href="#" className="hover:text-primary">Terms</a></li>
                <li><a href="#" className="hover:text-primary">Licenses</a></li>
              </ul>
            </div>
            <div>
              <div className="text-xs uppercase tracking-[0.08em] text-muted mb-3">For pros</div>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-primary">Agents</a></li>
                <li><a href="#" className="hover:text-primary">Investors</a></li>
                <li><a href="#" className="hover:text-primary">Contractors</a></li>
              </ul>
            </div>
            <div>
              <div className="text-xs uppercase tracking-[0.08em] text-muted mb-3">Help</div>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-primary">FAQ</a></li>
                <li><a href="#" className="hover:text-primary">How it works</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="mt-12 pt-6 border-t hairline flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-xs text-muted">
          <p className="max-w-2xl leading-relaxed">
            All figures shown are estimates based on publicly available MLS data and property records. Estimates are not appraisals and are not guaranteed. Final sale outcomes depend on market conditions at time of sale.
          </p>
          <p>© 2026 SellerScope, Inc.</p>
        </div>
      </div>
    </footer>
  );
}

// House illustration — original SVG (simple, not copying any brand)
function HouseScene({ className = "" }) {
  return (
    <div className={"relative w-full h-full overflow-hidden rounded-[18px] " + className}>
      {/* warm sky + ground */}
      <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, #F4E7CF 0%, #EAD6B3 55%, #CDB88B 100%)" }}/>
      {/* distant trees */}
      <svg viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 w-full h-full">
        <defs>
          <linearGradient id="roofG" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#3E5B57"/><stop offset="1" stopColor="#2A4340"/>
          </linearGradient>
          <linearGradient id="sideG" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#F6ECD7"/><stop offset="1" stopColor="#E6D5B0"/>
          </linearGradient>
        </defs>
        {/* sun */}
        <circle cx="930" cy="180" r="90" fill="#F3D8A2" opacity="0.7"/>
        {/* trees */}
        <g opacity="0.85">
          <ellipse cx="120" cy="460" rx="110" ry="60" fill="#6B8A73"/>
          <ellipse cx="240" cy="470" rx="80" ry="45" fill="#7C9981"/>
          <ellipse cx="1040" cy="470" rx="130" ry="55" fill="#6B8A73"/>
          <ellipse cx="1180" cy="480" rx="90" ry="40" fill="#7C9981"/>
        </g>
        {/* ground */}
        <rect x="0" y="520" width="1200" height="200" fill="#A9935F"/>
        <rect x="0" y="520" width="1200" height="200" fill="url(#grassG)" opacity="0.4"/>
        {/* house */}
        <g>
          {/* roof */}
          <polygon points="360,330 600,200 840,330" fill="url(#roofG)"/>
          {/* side wing roof */}
          <polygon points="800,330 920,270 1020,330" fill="#2A4340"/>
          {/* body */}
          <rect x="380" y="330" width="440" height="200" fill="url(#sideG)"/>
          {/* side wing body */}
          <rect x="820" y="330" width="200" height="200" fill="#EBD9B4"/>
          {/* chimney */}
          <rect x="700" y="230" width="36" height="80" fill="#3E5B57"/>
          {/* windows */}
          <g fill="#E4B363" stroke="#2A4340" strokeWidth="3">
            <rect x="420" y="370" width="70" height="90" rx="4"/>
            <rect x="530" y="370" width="70" height="90" rx="4"/>
            <rect x="860" y="370" width="55" height="70" rx="3"/>
            <rect x="940" y="370" width="55" height="70" rx="3"/>
          </g>
          {/* door */}
          <rect x="665" y="405" width="70" height="125" fill="#0F3D3E"/>
          <circle cx="725" cy="470" r="3" fill="#E4B363"/>
          {/* porch */}
          <rect x="620" y="520" width="160" height="10" fill="#7A5E34"/>
        </g>
        {/* path */}
        <path d="M680 700 L700 530 L700 530 L700 530 L680 700 Z" fill="#B9A172"/>
        <polygon points="600,700 700,530 800,700" fill="#C6AE7A" opacity="0.6"/>
      </svg>
    </div>
  );
}

// Price badge for hero
function FloatingPriceBadge({ label, value, delay = 0, className = "" }) {
  const MotionDiv = motion.div;
  return (
    <MotionDiv
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      className={"absolute bg-white/95 backdrop-blur rounded-xl shadow-soft-lg px-4 py-3 border hairline " + className}
    >
      <div className="text-[11px] uppercase tracking-[0.08em] text-muted">{label}</div>
      <div className="font-display text-xl font-semibold text-primary tnum mt-0.5">{value}</div>
    </MotionDiv>
  );
}

// Card
function Card({ className = "", ...rest }) {
  return <div className={"bg-surface rounded-xl border hairline shadow-card " + className} {...rest}/>;
}

// Stat (for report cards)
function Stat({ label, value, sub, className = "" }) {
  return (
    <div className={className}>
      <div className="text-[11px] uppercase tracking-[0.08em] text-muted">{label}</div>
      <div className="mt-1 font-display text-[22px] font-semibold text-primary tnum">{value}</div>
      {sub && <div className="text-[12px] text-muted mt-0.5">{sub}</div>}
    </div>
  );
}

// expose
Object.assign(window, {
  Icon, Button, Field, TextInput, Pill, Logo, NavBar, FlowBar, Footer, HouseScene, FloatingPriceBadge, Card, Stat, motion, AnimatePresence,
});