Home Valuation

<HomeValuation
  layout="inline"
  design={{
    background: "oklch(0.19 0 0)",
    surface: "oklch(0.24 0 0)",
    border: "oklch(1 0 0 / 0.14)",
    accent: "oklch(0.8 0.11 85)",
    shape: "square",
    align: "center",
    search: { style: "underline", shadow: "none", button: "label", buttonLabel: await getText({ id: "valuation-search-button", label: "Valuation · Search · Button", text: "Get my estimate" }) },
    report: { layout: "split", style: "flat" },
  }}
  form={form}
  initialValuation={initialValuation}
/>

<HomeValuationRoot open={{ mode: "sheet", size: "lg" }} gate="after-results">
  <section className="grid min-h-[70vh] place-items-center bg-muted px-6">
    <ValuationSteps />
  </section>
</HomeValuationRoot>

<HomeValuationRoot gate="none">
  <div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[360px_1fr]">
    <ValuationSearch />
    <ValuationReport />
  </div>
</HomeValuationRoot>

<HomeValuationRoot gate="before-results" showMap>
  {/* The input stays; ValuationLeadForm and ValuationReport render only on their step. */}
  <ValuationSearchInput className="mx-auto max-w-xl" />
  <ValuationLeadForm />
  <ValuationReport className="mx-auto max-w-3xl">
    <ValuationReportHeader />
    <div className="grid gap-6 lg:grid-cols-2">
      <ValuationEstimateCard />
      <ValuationCompsMap height="320px" />
    </div>
    <ValuationComps />
  </ValuationReport>
</HomeValuationRoot>

"use client"
import { HomeValuationRoot, ValuationReport, ValuationCompsMap, ValuationEstimateCard, ValuationMarketStats, ValuationTrendChart, ValuationComps, useValuationReport } from "@pandaidx/widgets/client"

const Range = () => {
  const report = useValuationReport()
  const estimate = report?.valuation.estimate
  if (!report || !estimate) return null
  const { formatCurrency } = report
  return (
    <div className="flex justify-between text-sm"><span>Min {formatCurrency(estimate.low)}</span><span>Max {formatCurrency(estimate.high)}</span></div>
  )
}

export const CmaMap = ({ valuation }) => (
  <HomeValuationRoot gate="none" initialValuation={valuation} compHops={false}>
    <ValuationReport again={false} className="relative h-dvh gap-0">
      {/* The map fills the screen; the panel floats over it. Same pill for the home as for the comparables. */}
      <ValuationCompsMap height="100%" frame={false} className="min-h-0 flex-1" marker="pill" radius="9999px" subject="pill" onSelect="popup" renderPopup={(comp) => (<div className="rounded-xl bg-background p-3 shadow-lg">{comp.address}</div>)} />
      <aside className="absolute inset-y-4 left-4 flex w-[22rem] max-w-[calc(100%-2rem)] flex-col gap-5 overflow-y-auto rounded-2xl bg-background p-5 shadow-xl">
        <ValuationEstimateCard />
        <Range />
        <ValuationMarketStats />
        <ValuationTrendChart />
        <ValuationComps />
      </aside>
    </ValuationReport>
  </HomeValuationRoot>
)

"use client"
import { useValuationReport } from "@pandaidx/widgets/client"

export const BigNumber = () => {
  const report = useValuationReport()
  if (!report?.valuation.estimate) return null
  const { valuation, formatCurrency } = report
  return <p className="text-6xl font-semibold">{formatCurrency(valuation.estimate.value)}</p>
}
// <ValuationReport><BigNumber /><ValuationComps /></ValuationReport>

"use client"
import { useAddressSearch } from "@pandaidx/widgets/client"

// The site's own address search: its input, list and button in the site's style. Picking an address opens the CMA page.
export const AddressSearch = ({ placeholder, buttonLabel }: { placeholder: string; buttonLabel: string }) => {
  const { query, setQuery, suggestions, loading, pending, select, submit } = useAddressSearch({ href: "/home-market-analysis" })
  return (
    <div role="search" className="relative mx-auto w-full max-w-xl">
      <div className="flex items-center border-b border-foreground/30">
        <input
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          onKeyDown={(event) => event.key === "Enter" && submit()}
          placeholder={placeholder}
          aria-label={placeholder}
          autoComplete="off"
          className="h-14 flex-1 bg-transparent outline-none"
        />
        <button type="button" disabled={pending} onClick={() => submit()} className="px-4 text-sm uppercase tracking-wide">
          {buttonLabel}
        </button>
      </div>
      {suggestions.length ? (
        <ul className="absolute inset-x-0 top-full z-10 bg-background shadow-lg" aria-busy={loading}>
          {suggestions.map((suggestion) => (
            <li key={suggestion.placeId}>
              <button type="button" className="w-full px-4 py-3 text-left hover:bg-muted" onClick={() => select(suggestion)}>
                {suggestion.address}
              </button>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  )
}
// A unit typed in the input ("#4611", "Apt 4A") rides along: Google drops it from the predictions.

// app/home-market-analysis/page.tsx: the site's search on top, the CMA under it, an optional lead form after it
import { MarketAnalysis, PandaForm } from "@pandaidx/widgets/client"
import { fetchForm, fetchHomeValuation } from "@pandaidx/widgets/server"
import { AddressSearch } from "@/components/AddressSearch"
import { getText } from "@/lib/panda-text"

const config = { publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL }

export default async function Page({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  // Null without ?placeId= / ?listingId=: only the search shows.
  const [valuation, form] = await Promise.all([
    fetchHomeValuation({ ...config, searchParams: await searchParams }),
    fetchForm({ ...config, spot: "home-valuation" }),
  ])
  return (
    <main>
      <section className="px-6 py-20">
        <h1 className="text-center text-4xl">{await getText({ id: "cma-title", label: "CMA · Heading · Title", text: "What is your home worth?" })}</h1>
        <AddressSearch placeholder={await getText({ id: "cma-placeholder", label: "CMA · Search · Placeholder", text: "Enter your address" })} buttonLabel={await getText({ id: "cma-button", label: "CMA · Search · Button", text: "Analyze" })} />
      </section>
      <MarketAnalysis valuation={valuation} design={{ report: { layout: "split" } }} />
      {valuation && form ? (
        <section className="mx-auto max-w-xl px-6 py-16">
          <PandaForm form={form} source="home-valuation" contextData={{ address: valuation.address, estimate: valuation.valuation?.estimate?.value }} />
        </section>
      ) : null}
    </main>
  )
}

<section className="bg-muted px-6 py-24">
  <h2 className="mb-8 text-center text-3xl">{await getText({ id: "home-cma-title", label: "Home · CMA · Title", text: "See what homes like yours sold for" })}</h2>
  <AddressSearch placeholder={await getText({ id: "home-cma-placeholder", label: "Home · CMA · Placeholder", text: "Enter your address" })} buttonLabel={await getText({ id: "home-cma-button", label: "Home · CMA · Button", text: "Analyze" })} />
</section>
// AddressSearch uses useAddressSearch({ href: "/home-market-analysis" }): picking an address opens the page with the report.