/* Landing page */
const { useState: useStateL } = React;

function Hero({ onStart }) {
  const MotionH1 = motion.h1, MotionP = motion.p, MotionDiv = motion.div;
  return (
    <section className="relative">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 pt-20 md:pt-28 pb-24 md:pb-32">
        <div className="grid md:grid-cols-12 gap-10 md:gap-14 items-center">
          <div className="md:col-span-6">
            <Pill tone="outline" className="mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-success inline-block"/> Now analyzing homes in Wichita, KS
            </Pill>
            <MotionH1
              initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}
              className="font-display text-[44px] md:text-[64px] leading-[1.02] tracking-[-0.02em] text-primary font-[500]"
            >
              Know what your home is really worth —
              <span className="italic font-[500] text-primary-soft"> every way you can sell it.</span>
            </MotionH1>
            <MotionP
              initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.1 }}
              className="mt-6 text-[18px] md:text-[19px] leading-[1.55] text-muted max-w-[560px]"
            >
              A free, personalized comparison of three ways to sell your home, built on real data from your neighborhood.
            </MotionP>
            <MotionDiv
              initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.2 }}
              className="mt-8 flex flex-wrap items-center gap-4"
            >
              <Button size="lg" onClick={onStart}>
                Get your home analysis
                <Icon name="arrow-right" size={18}/>
              </Button>
              <a href="#how" className="text-[15px] text-primary hover:text-primary-soft inline-flex items-center gap-1.5">
                See how it works <Icon name="chevron-right" size={16}/>
              </a>
            </MotionDiv>
            <div className="mt-8 flex items-center gap-6 text-[13px] text-muted">
              <span className="inline-flex items-center gap-2"><Icon name="shield-check" size={16} className="text-success"/> No spam, no pressure</span>
              <span className="inline-flex items-center gap-2"><Icon name="clock" size={16} className="text-primary"/> 90 seconds</span>
              <span className="inline-flex items-center gap-2"><Icon name="badge-check" size={16} className="text-primary"/> Free, always</span>
            </div>
          </div>

          <div className="md:col-span-6 relative">
            <div className="relative aspect-[5/4] w-full">
              <div className="absolute inset-0 rounded-[18px] shadow-soft-lg overflow-hidden">
                <HouseScene/>
              </div>
              {/* floating price badges */}
              <FloatingPriceBadge label="Sell As-Is" value="$187,000" delay={0.5} className="left-[-18px] top-[22%] w-[170px]"/>
              <FloatingPriceBadge label="Fix & List" value="$208,000" delay={1.0} className="right-[-12px] top-[10%] w-[180px] ring-1 ring-accent/40"/>
              <FloatingPriceBadge label="Cash Offer" value="$158,000" delay={1.5} className="right-[10%] bottom-[-22px] w-[170px]"/>
              {/* small label */}
              <div className="absolute left-5 bottom-5 text-[11px] text-white/90 bg-primary/60 backdrop-blur px-2.5 py-1 rounded-full">
                Sample — 1423 N Oliver St, Wichita
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", title: "Tell us about your home", body: "Address, a few quick questions, and optional photos. Ninety seconds.", icon: "home" },
    { n: "02", title: "We analyze real local data", body: "MLS comps, property records, and market signals from your neighborhood.", icon: "line-chart" },
    { n: "03", title: "You see a clear recommendation", body: "Three paths, one plain-language analysis, and a suggested next step.", icon: "compass" },
  ];
  return (
    <section id="how" className="bg-bg">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-[96px]">
        <div className="max-w-2xl">
          <Pill tone="neutral">How it works</Pill>
          <h2 className="mt-4 font-display text-[36px] md:text-[44px] leading-[1.1] tracking-[-0.01em] text-primary">
            A calm, considered look at your options.
          </h2>
          <p className="mt-3 text-[16.5px] text-muted leading-relaxed">
            No appointments. No sales calls. You'll see what the numbers look like first — then decide what, if anything, to do next.
          </p>
        </div>
        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {steps.map((s, i) => (
            <Card key={i} className="p-7 flex flex-col gap-4">
              <div className="flex items-center justify-between">
                <div className="w-11 h-11 rounded-full bg-primary/5 text-primary inline-flex items-center justify-center">
                  <Icon name={s.icon} size={20}/>
                </div>
                <span className="font-display text-muted/80 text-[22px]">{s.n}</span>
              </div>
              <h3 className="font-display text-[22px] text-primary leading-tight">{s.title}</h3>
              <p className="text-[14.5px] text-muted leading-relaxed">{s.body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function ThreePathsPreview({ onStart }) {
  const [hover, setHover] = useStateL(null);
  const paths = [
    { key: "asis", label: "Sell As-Is", net: "$187,000", sub: "45 days · medium effort",  body: "List with a traditional agent, no renovation." },
    { key: "fix",  label: "Fix & List", net: "$208,000", sub: "90 days · higher effort",  body: "Invest in focused updates, then list.", recommended: true },
    { key: "cash", label: "Cash Offer", net: "$158,000", sub: "14 days · lowest effort",   body: "Accept an offer from a vetted investor." },
  ];
  return (
    <section id="paths" className="relative">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-[96px]">
        <div className="max-w-2xl">
          <Pill tone="neutral">The three paths</Pill>
          <h2 className="mt-4 font-display text-[36px] md:text-[44px] leading-[1.1] tracking-[-0.01em] text-primary">
            Every home has more than one way to sell.
          </h2>
          <p className="mt-3 text-[16.5px] text-muted leading-relaxed">
            Here's what a side-by-side analysis looks like for a real home in Wichita.
          </p>
        </div>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {paths.map((p) => {
            const isRec = p.recommended;
            const isHover = hover === p.key;
            return (
              <div
                key={p.key}
                onMouseEnter={() => setHover(p.key)}
                onMouseLeave={() => setHover(null)}
                className={"relative rounded-xl bg-surface border shadow-card p-7 transition-all duration-300 " +
                  (isRec ? "border-accent/70 ring-1 ring-accent/30 " : "hairline ") +
                  (isHover ? " -translate-y-0.5 shadow-soft-lg " : "")
                }
              >
                {isRec && (
                  <span className="absolute -top-3 left-7 inline-flex items-center gap-1.5 bg-gradient-to-b from-accent-soft to-accent/80 text-primary text-[11px] font-semibold tracking-wide px-2.5 py-1 rounded-full shadow-soft">
                    <Icon name="sparkles" size={12}/> Recommended
                  </span>
                )}
                <div className="flex items-start justify-between">
                  <div>
                    <div className="text-[12px] uppercase tracking-[0.1em] text-muted">{p.label}</div>
                    <div className="mt-2 font-display text-[40px] leading-none text-primary tnum font-[600]">{p.net}</div>
                    <div className="mt-1 text-[13px] text-muted">Projected net proceeds</div>
                  </div>
                  <div className="w-10 h-10 rounded-full bg-primary/5 text-primary inline-flex items-center justify-center">
                    <Icon name={p.key === "asis" ? "handshake" : p.key === "fix" ? "hammer" : "banknote"} size={18}/>
                  </div>
                </div>
                <div className="mt-5 pt-5 border-t hairline">
                  <p className="text-[14.5px] text-ink leading-relaxed">{p.body}</p>
                  <p className="mt-2 text-[13px] text-muted">{p.sub}</p>
                </div>
                <div className={"mt-5 text-[13.5px] text-primary-soft flex items-center gap-1.5 transition-opacity " + (isHover ? "opacity-100" : "opacity-70")}>
                  Which is right for you? <Icon name="arrow-right" size={14}/>
                </div>
              </div>
            );
          })}
        </div>

        <div className="mt-10">
          <Button size="md" onClick={onStart}>See your own analysis <Icon name="arrow-right" size={16}/></Button>
        </div>
      </div>
    </section>
  );
}

function Trust() {
  const testimonials = [
    { quote: "I was sure I'd have to renovate. The report showed me the updates that would actually pay back — and the ones that wouldn't.", name: "Margaret R.", city: "Riverside, Wichita" },
    { quote: "Honest numbers, no pressure. I went with the cash path because I needed to move fast for my mom. It was the right call.", name: "David K.", city: "College Hill, Wichita" },
    { quote: "My agent used the SellerScope analysis as a starting point. We listed in three weeks and closed above asking.", name: "Teresa M.", city: "Eastborough, Wichita" },
  ];
  const signals = ["Local MLS data", "No spam, no pressure", "Free, always", "Licensed Kansas partners"];
  return (
    <section id="trust" className="bg-[#F4EFE2]/60 border-y hairline">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-20 md:py-[96px]">
        <div className="max-w-2xl">
          <Pill tone="neutral">Trust</Pill>
          <h2 className="mt-4 font-display text-[36px] md:text-[44px] leading-[1.1] tracking-[-0.01em] text-primary">
            Why homeowners trust us.
          </h2>
          <p className="mt-3 text-[16.5px] text-muted leading-relaxed">
            We work for the homeowner first. Always.
          </p>
        </div>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {testimonials.map((t, i) => (
            <Card key={i} className="p-7 flex flex-col gap-5">
              <div className="flex gap-0.5 text-accent">
                {[0,1,2,3,4].map(n => <Icon key={n} name="star" size={14} />)}
              </div>
              <p className="font-display text-[19px] leading-[1.4] text-ink">"{t.quote}"</p>
              <div className="mt-auto flex items-center gap-3">
                <AvatarInitials name={t.name} />
                <div>
                  <div className="text-[14px] font-medium text-ink">{t.name}</div>
                  <div className="text-[12.5px] text-muted">{t.city}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        <div className="mt-12 flex flex-wrap items-center gap-x-8 gap-y-3 text-[13.5px] text-muted">
          {signals.map((s, i) => (
            <span key={i} className="inline-flex items-center gap-2">
              <Icon name="check" size={14} className="text-success"/> {s}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function AvatarInitials({ name }) {
  const initials = name.split(' ').map(s => s[0]).slice(0,2).join('');
  const palette = ["#0F3D3E", "#1D5759", "#E4B363", "#C76E3E", "#2E8B57"];
  const color = palette[(name.charCodeAt(0) + name.length) % palette.length];
  return (
    <div
      className="w-10 h-10 rounded-full inline-flex items-center justify-center text-white font-medium text-[13px]"
      style={{ background: color }}
    >{initials}</div>
  );
}

function FAQ() {
  const items = [
    {
      q: "Is this really free?",
      a: "Yes. The analysis is free and will always be. If you choose to connect with an expert (an agent, investor, contractor, or lender), we earn a small referral fee from them — never from you.",
    },
    {
      q: "Do I have to talk to anyone?",
      a: "No. You can read your report and never hear from us again. If you'd like to be connected with a vetted local expert, you can request that on your own terms.",
    },
    {
      q: "How accurate are the numbers?",
      a: "Our estimates use recent MLS comparables, property records, and local market trends. They are estimates — not appraisals — but they're built on the same signals a good agent uses to price a home.",
    },
    {
      q: "Where do the cash offers come from?",
      a: "From a small network of vetted investors licensed to operate in Kansas. We only include investors who meet our disclosure and fairness standards.",
    },
    {
      q: "What happens to my information?",
      a: "It stays with us unless you ask to be connected with an expert. We never sell or rent your information, and you can delete it from our records at any time.",
    },
  ];
  const [open, setOpen] = useStateL(0);
  return (
    <section id="faq">
      <div className="max-w-[900px] mx-auto px-6 md:px-10 py-20 md:py-[96px]">
        <div className="max-w-2xl">
          <Pill tone="neutral">Questions</Pill>
          <h2 className="mt-4 font-display text-[36px] md:text-[44px] leading-[1.1] tracking-[-0.01em] text-primary">
            Fair questions. Honest answers.
          </h2>
        </div>
        <div className="mt-10 divide-y hairline border-y hairline">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i}>
                <button
                  aria-expanded={isOpen}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full py-5 flex items-center justify-between gap-6 text-left"
                >
                  <span className="font-display text-[20px] md:text-[22px] text-primary leading-tight">{it.q}</span>
                  <span className={"shrink-0 w-9 h-9 rounded-full border hairline inline-flex items-center justify-center text-primary transition-transform " + (isOpen ? "rotate-45" : "")}>
                    <Icon name="plus" size={16}/>
                  </span>
                </button>
                <div className={"overflow-hidden transition-all duration-300 " + (isOpen ? "max-h-48 pb-6" : "max-h-0")}>
                  <p className="text-[15.5px] text-muted leading-[1.65] max-w-[680px]">{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CTAStrip({ onStart }) {
  return (
    <section>
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 pb-20">
        <div className="rounded-[20px] bg-primary text-white p-10 md:p-14 flex flex-col md:flex-row md:items-center md:justify-between gap-8 overflow-hidden relative">
          <div className="absolute -right-20 -bottom-20 w-[320px] h-[320px] rounded-full bg-accent/20 blur-2xl"/>
          <div className="relative max-w-xl">
            <h3 className="font-display text-[30px] md:text-[38px] leading-tight">
              Ready to see your home's three paths?
            </h3>
            <p className="mt-3 text-white/75 text-[15.5px] leading-relaxed">
              Your personalized analysis is ninety seconds away.
            </p>
          </div>
          <div className="relative flex flex-wrap gap-3">
            <Button variant="accent" size="lg" onClick={onStart}>
              Get your home analysis
              <Icon name="arrow-right" size={18}/>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function LandingPage({ onStart, onNavigate }) {
  return (
    <>
      <NavBar onStart={onStart} onNavigate={onNavigate}/>
      <main>
        <Hero onStart={onStart}/>
        <HowItWorks/>
        <ThreePathsPreview onStart={onStart}/>
        <Trust/>
        <FAQ/>
        <CTAStrip onStart={onStart}/>
      </main>
      <Footer/>
    </>
  );
}

Object.assign(window, { LandingPage });