Bicycle shopBicycle shop

1import { useState, type ReactNode } from "react";2import { Icon } from "./Icon";3import type { Link, Section, Visual } from "./types";4 5type Of<K extends Section["kind"]> = Extract<Section, { kind: K }>;6 7function Container({ children, className = "" }: { children: ReactNode; className?: string }) {8  return <div className={`mx-auto w-full max-w-6xl px-5 sm:px-8 ${className}`}>{children}</div>;9}10 11function Eyebrow({ children }: { children?: ReactNode }) {12  if (!children) return null;13  return <p className="mb-3 text-sm font-semibold tracking-wide text-accent">{children}</p>;14}15 16function Heading({ eyebrow, title, text, center }: { eyebrow?: string; title: string; text?: string; center?: boolean }) {17  return (18    <div className={center ? "mx-auto max-w-2xl text-center" : "max-w-2xl"}>19      <Eyebrow>{eyebrow}</Eyebrow>20      <h2 className="font-heading text-3xl font-semibold leading-tight tracking-tight sm:text-4xl">{title}</h2>21      {text ? <p className="mt-4 text-lg leading-relaxed text-muted">{text}</p> : null}22    </div>23  );24}25 26export function Button({ link, variant = "primary" }: { link: Link; variant?: "primary" | "secondary" }) {27  const base = "inline-flex h-11 items-center justify-center gap-2 rounded-card px-5 text-[15px] font-medium transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";28  return (29    <a href={link.href} className={variant === "primary" ? `${base} bg-accent text-accent-fg hover:opacity-90` : `${base} border border-line bg-bg text-fg hover:bg-surface`}>30      {link.label}31    </a>32  );33}34 35/** Soft light falloff so flat colour blocks read as surfaces, not swatches. */36const SHADE = "radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.16))";37 38function VisualBlock({ visual }: { visual: Visual }) {39  if (visual.type === "none") return null;40  if (visual.type === "tiles") {41    const [a, b, c, d] = visual.tones;42    return (43      <figure className="grid aspect-[5/4] grid-cols-6 grid-rows-6 gap-3">44        <div className="col-span-4 row-span-4 rounded-card" style={{ background: `${SHADE}, ${a}` }} />45        <div className="col-span-2 row-span-3 rounded-card" style={{ background: `${SHADE}, ${b ?? a}` }} />46        <div className="col-span-2 row-span-3 rounded-card" style={{ background: `${SHADE}, ${c ?? b ?? a}` }} />47        <div className="col-span-4 row-span-2 flex items-end rounded-card p-4" style={{ background: `${SHADE}, ${d ?? c ?? a}` }}>48          {visual.caption ? <figcaption className="text-sm font-medium text-white/90">{visual.caption}</figcaption> : null}49        </div>50      </figure>51    );52  }53  if (visual.type === "card") {54    return (55      <figure className="flex aspect-[5/4] flex-col justify-end rounded-card p-7 text-white" style={{ background: `${SHADE}, ${visual.tone}` }}>56        <p className="font-heading text-2xl font-semibold">{visual.title}</p>57        <ul className="mt-4 space-y-2 text-[15px] text-white/85">58          {visual.lines.map((l) => (59            <li key={l} className="flex items-center gap-2">60              <Icon name="check" className="h-4 w-4" /> {l}61            </li>62          ))}63        </ul>64      </figure>65    );66  }67  return (68    <figure className="overflow-hidden rounded-card border border-line bg-bg shadow-[0_24px_60px_-28px_rgba(0,0,0,0.35)]">69      <div className="flex items-center gap-1.5 border-b border-line px-4 py-3">70        <span className="h-2.5 w-2.5 rounded-full bg-line" />71        <span className="h-2.5 w-2.5 rounded-full bg-line" />72        <span className="h-2.5 w-2.5 rounded-full bg-line" />73        <span className="ml-3 text-sm font-medium">{visual.title}</span>74      </div>75      <ul className="divide-y divide-line">76        {visual.rows.map((r) => (77          <li key={r.label} className="flex items-center justify-between gap-4 px-5 py-3.5 text-[15px]">78            <span className="flex items-center gap-3">79              <span className="h-2 w-2 rounded-full" style={{ background: r.tone ?? "var(--color-accent)" }} />80              {r.label}81            </span>82            <span className="font-medium tabular-nums">{r.value}</span>83          </li>84        ))}85      </ul>86      {visual.footer ? <figcaption className="border-t border-line bg-surface px-5 py-3 text-sm text-muted">{visual.footer}</figcaption> : null}87    </figure>88  );89}90 91function Hero({ s }: { s: Of<"hero"> }) {92  const actions = (93    <div className="mt-8 flex flex-wrap gap-3">94      <Button link={s.primary} />95      {s.secondary ? <Button link={s.secondary} variant="secondary" /> : null}96    </div>97  );98  if (s.variant === "center") {99    return (100      <section className="pb-16 pt-16 sm:pt-24">101        <Container className="text-center">102          <Eyebrow>{s.eyebrow}</Eyebrow>103          <h1 className="mx-auto max-w-3xl font-heading text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl">{s.title}</h1>104          <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-muted sm:text-xl">{s.text}</p>105          <div className="flex justify-center">{actions}</div>106          {s.note ? <p className="mt-4 text-sm text-muted">{s.note}</p> : null}107          {s.visual.type !== "none" ? (108            <div className="mx-auto mt-14 max-w-4xl text-left">109              <VisualBlock visual={s.visual} />110            </div>111          ) : null}112        </Container>113      </section>114    );115  }116  if (s.variant === "editorial") {117    return (118      <section className="pb-12 pt-14 sm:pt-20">119        <Container>120          <Eyebrow>{s.eyebrow}</Eyebrow>121          <h1 className="max-w-5xl font-heading text-5xl font-medium leading-[0.98] tracking-tight sm:text-7xl">{s.title}</h1>122          <div className="mt-10 grid gap-10 border-t border-line pt-8 md:grid-cols-[1fr_1.4fr]">123            <div>124              <p className="text-lg leading-relaxed text-muted">{s.text}</p>125              {actions}126            </div>127            <VisualBlock visual={s.visual} />128          </div>129        </Container>130      </section>131    );132  }133  return (134    <section className="pb-16 pt-12 sm:pt-20">135      <Container className="grid items-center gap-12 lg:grid-cols-[1.05fr_1fr]">136        <div>137          <Eyebrow>{s.eyebrow}</Eyebrow>138          <h1 className="font-heading text-4xl font-semibold leading-[1.05] tracking-tight sm:text-[3.4rem]">{s.title}</h1>139          <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted">{s.text}</p>140          {actions}141          {s.note ? <p className="mt-4 text-sm text-muted">{s.note}</p> : null}142        </div>143        <VisualBlock visual={s.visual} />144      </Container>145    </section>146  );147}148 149function Band({ id, children, tinted }: { id?: string; children: ReactNode; tinted?: boolean }) {150  return (151    <section id={id} className={`scroll-mt-20 py-20 sm:py-24 ${tinted ? "bg-surface" : ""}`}>152      <Container>{children}</Container>153    </section>154  );155}156 157function Features({ s }: { s: Of<"features"> }) {158  const cols = s.columns === 2 ? "sm:grid-cols-2" : s.columns === 4 ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-2 lg:grid-cols-3";159  return (160    <Band id={s.id}>161      <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />162      <ul className={`mt-12 grid gap-px overflow-hidden rounded-card border border-line bg-line ${cols}`}>163        {s.items.map((f) => (164          <li key={f.title} className="bg-bg p-7">165            <span className="grid h-10 w-10 place-items-center rounded-card bg-surface text-accent">166              <Icon name={f.icon} />167            </span>168            <h3 className="mt-5 text-lg font-semibold">{f.title}</h3>169            <p className="mt-2 leading-relaxed text-muted">{f.text}</p>170          </li>171        ))}172      </ul>173    </Band>174  );175}176 177function Split({ s }: { s: Of<"split"> }) {178  return (179    <Band id={s.id} tinted>180      <div className={`grid items-center gap-12 lg:grid-cols-2 ${s.reverse ? "lg:[&>*:first-child]:order-2" : ""}`}>181        <div>182          <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />183          <ul className="mt-8 space-y-3">184            {s.bullets.map((b) => (185              <li key={b} className="flex gap-3 text-[16px]">186                <span className="mt-0.5 text-accent">187                  <Icon name="check" />188                </span>189                {b}190              </li>191            ))}192          </ul>193        </div>194        <VisualBlock visual={s.visual} />195      </div>196    </Band>197  );198}199 200function Menu({ s }: { s: Of<"menu"> }) {201  return (202    <Band id={s.id} tinted>203      <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} center />204      <div className="mt-12 grid gap-10 md:grid-cols-2">205        {s.groups.map((g) => (206          <div key={g.name}>207            <h3 className="border-b border-line pb-3 font-heading text-xl font-semibold">{g.name}</h3>208            <ul className="mt-4 space-y-5">209              {g.items.map((i) => (210                <li key={i.name}>211                  <div className="flex items-baseline gap-3">212                    <span className="font-medium">{i.name}</span>213                    <span className="flex-1 border-b border-dotted border-line" />214                    <span className="font-medium tabular-nums">{i.price}</span>215                  </div>216                  {i.text ? <p className="mt-1 text-[15px] text-muted">{i.text}</p> : null}217                </li>218              ))}219            </ul>220          </div>221        ))}222      </div>223    </Band>224  );225}226 227function Pricing({ s }: { s: Of<"pricing"> }) {228  return (229    <Band id={s.id}>230      <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} center />231      <div className={`mt-12 grid gap-5 ${s.plans.length === 2 ? "mx-auto max-w-3xl md:grid-cols-2" : "md:grid-cols-3"}`}>232        {s.plans.map((p) => (233          <div key={p.name} className={`flex flex-col rounded-card border p-7 ${p.featured ? "border-accent shadow-[0_20px_50px_-30px_rgba(0,0,0,0.4)]" : "border-line"}`}>234            <div className="flex items-center justify-between">235              <h3 className="text-lg font-semibold">{p.name}</h3>236              {p.featured ? <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-accent-fg">Most popular</span> : null}237            </div>238            <p className="mt-4 flex items-baseline gap-1">239              <span className="font-heading text-4xl font-semibold tracking-tight">{p.price}</span>240              {p.period ? <span className="text-muted">{p.period}</span> : null}241            </p>242            <p className="mt-3 text-muted">{p.text}</p>243            <ul className="mt-6 flex-1 space-y-2.5 text-[15px]">244              {p.features.map((f) => (245                <li key={f} className="flex gap-2.5">246                  <span className="text-accent">247                    <Icon name="check" className="h-5 w-5" />248                  </span>249                  {f}250                </li>251              ))}252            </ul>253            <div className="mt-8 [&>a]:w-full">254              <Button link={p.cta} variant={p.featured ? "primary" : "secondary"} />255            </div>256          </div>257        ))}258      </div>259    </Band>260  );261}262 263function Gallery({ s }: { s: Of<"gallery"> }) {264  return (265    <Band id={s.id}>266      <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />267      <ul className="mt-12 grid grid-cols-2 gap-4 md:grid-cols-3">268        {s.items.map((g, i) => (269          <li key={g.title} className={i % 5 === 0 ? "md:row-span-2" : ""}>270            <figure className="flex h-full min-h-48 flex-col justify-end rounded-card p-5 text-white" style={{ background: `${SHADE}, ${g.tone}` }}>271              <figcaption>272                <p className="font-medium">{g.title}</p>273                {g.caption ? <p className="text-sm text-white/80">{g.caption}</p> : null}274              </figcaption>275            </figure>276          </li>277        ))}278      </ul>279    </Band>280  );281}282 283function Projects({ s }: { s: Of<"projects"> }) {284  return (285    <Band id={s.id}>286      <Heading eyebrow={s.eyebrow} title={s.title} />287      <ul className="mt-12 grid gap-x-6 gap-y-10 sm:grid-cols-2">288        {s.items.map((p) => (289          <li key={p.title}>290            <a href="#contact" className="group block">291              <div className="aspect-[4/3] rounded-card transition group-hover:opacity-90" style={{ background: `${SHADE}, ${p.tone}` }} />292              <div className="mt-4 flex items-baseline justify-between gap-4">293                <h3 className="text-lg font-semibold group-hover:underline">{p.title}</h3>294                <span className="text-sm tabular-nums text-muted">{p.year}</span>295              </div>296              <p className="text-muted">{p.tag}</p>297            </a>298          </li>299        ))}300      </ul>301    </Band>302  );303}304 305function Quotes({ s }: { s: Of<"quotes"> }) {306  return (307    <Band id={s.id} tinted>308      <Heading eyebrow={s.eyebrow} title={s.title} />309      <ul className="mt-12 grid gap-5 md:grid-cols-3">310        {s.items.map((q) => (311          <li key={q.name} className="flex flex-col rounded-card border border-line bg-bg p-7">312            <p className="flex-1 text-[16px] leading-relaxed">&ldquo;{q.quote}&rdquo;</p>313            <p className="mt-6 font-medium">{q.name}</p>314            <p className="text-sm text-muted">{q.role}</p>315          </li>316        ))}317      </ul>318    </Band>319  );320}321 322function Stats({ s }: { s: Of<"stats"> }) {323  return (324    <section id={s.id} className="border-y border-line py-12">325      <Container>326        <dl className="grid grid-cols-2 gap-8 md:grid-cols-4">327          {s.items.map((x) => (328            <div key={x.label}>329              <dd className="font-heading text-3xl font-semibold tracking-tight sm:text-4xl">{x.value}</dd>330              <dt className="mt-1 text-muted">{x.label}</dt>331            </div>332          ))}333        </dl>334      </Container>335    </section>336  );337}338 339function Steps({ s }: { s: Of<"steps"> }) {340  return (341    <Band id={s.id}>342      <Heading eyebrow={s.eyebrow} title={s.title} />343      <ol className="mt-12 grid gap-8 md:grid-cols-3">344        {s.items.map((x, i) => (345          <li key={x.title} className="border-t-2 border-fg pt-5">346            <span className="text-sm font-semibold tabular-nums text-accent">{String(i + 1).padStart(2, "0")}</span>347            <h3 className="mt-2 text-lg font-semibold">{x.title}</h3>348            <p className="mt-2 leading-relaxed text-muted">{x.text}</p>349          </li>350        ))}351      </ol>352    </Band>353  );354}355 356function Team({ s }: { s: Of<"team"> }) {357  return (358    <Band id={s.id}>359      <Heading eyebrow={s.eyebrow} title={s.title} />360      <ul className="mt-12 grid grid-cols-2 gap-6 md:grid-cols-4">361        {s.items.map((p) => (362          <li key={p.name}>363            <div className="grid aspect-square place-items-center rounded-card font-heading text-4xl font-semibold text-white/90" style={{ background: `${SHADE}, ${p.tone}` }}>364              {p.name365                .split(" ")366                .map((w) => w[0])367                .join("")}368            </div>369            <p className="mt-3 font-medium">{p.name}</p>370            <p className="text-sm text-muted">{p.role}</p>371          </li>372        ))}373      </ul>374    </Band>375  );376}377 378function Timeline({ s }: { s: Of<"timeline"> }) {379  return (380    <Band id={s.id} tinted>381      <Heading eyebrow={s.eyebrow} title={s.title} />382      <ol className="mt-10 divide-y divide-line border-y border-line">383        {s.items.map((t) => (384          <li key={t.title + t.period} className="grid gap-2 py-6 sm:grid-cols-[180px_1fr]">385            <span className="text-sm tabular-nums text-muted">{t.period}</span>386            <div>387              <h3 className="font-semibold">{t.title}</h3>388              <p className="mt-1 text-muted">{t.text}</p>389            </div>390          </li>391        ))}392      </ol>393    </Band>394  );395}396 397function Faq({ s }: { s: Of<"faq"> }) {398  return (399    <Band id={s.id}>400      <div className="grid gap-10 lg:grid-cols-[1fr_1.6fr]">401        <Heading eyebrow={s.eyebrow} title={s.title} />402        <div className="divide-y divide-line border-y border-line">403          {s.items.map((f) => (404            <details key={f.q} className="group py-5">405              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 font-medium">406                {f.q}407                <span className="text-muted transition group-open:rotate-45">+</span>408              </summary>409              <p className="mt-3 leading-relaxed text-muted">{f.a}</p>410            </details>411          ))}412        </div>413      </div>414    </Band>415  );416}417 418function Products({ s }: { s: Of<"products"> }) {419  const categories = ["All", ...Array.from(new Set(s.items.map((p) => p.category)))];420  const [filter, setFilter] = useState("All");421  const [cart, setCart] = useState<Record<string, number>>({});422  const [open, setOpen] = useState(false);423  const money = (n: number) => `${s.currency}${n.toFixed(2).replace(/\.00$/, "")}`;424  const count = Object.values(cart).reduce((a, b) => a + b, 0);425  const total = s.items.reduce((sum, p) => sum + (cart[p.name] ?? 0) * p.price, 0);426  const shown = filter === "All" ? s.items : s.items.filter((p) => p.category === filter);427  return (428    <Band id={s.id}>429      <div className="flex flex-wrap items-end justify-between gap-6">430        <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />431        <button type="button" onClick={() => setOpen(true)} className="inline-flex h-11 items-center gap-2 rounded-card border border-line px-4 font-medium hover:bg-surface">432          <Icon name="box" /> Cart <span className="rounded-full bg-accent px-2 text-sm text-accent-fg tabular-nums">{count}</span>433        </button>434      </div>435      <div className="mt-8 flex flex-wrap gap-2" role="group" aria-label="Filter products">436        {categories.map((c) => (437          <button key={c} type="button" onClick={() => setFilter(c)} aria-pressed={filter === c} className={`h-9 rounded-full px-4 text-sm font-medium ${filter === c ? "bg-fg text-bg" : "border border-line hover:bg-surface"}`}>438            {c}439          </button>440        ))}441      </div>442      <ul className="mt-8 grid grid-cols-2 gap-x-5 gap-y-10 lg:grid-cols-4">443        {shown.map((p) => (444          <li key={p.name} className="flex flex-col">445            <div className="relative aspect-[4/5] rounded-card" style={{ background: `${SHADE}, ${p.tone}` }}>446              {p.badge ? <span className="absolute left-3 top-3 rounded-full bg-bg px-2.5 py-1 text-xs font-medium">{p.badge}</span> : null}447            </div>448            <h3 className="mt-4 font-medium">{p.name}</h3>449            <p className="mt-1 flex-1 text-sm text-muted">{p.text}</p>450            <div className="mt-3 flex items-center justify-between">451              <span className="font-semibold tabular-nums">{money(p.price)}</span>452              <button type="button" onClick={() => setCart((c) => ({ ...c, [p.name]: (c[p.name] ?? 0) + 1 }))} className="h-9 rounded-card bg-accent px-3.5 text-sm font-medium text-accent-fg hover:opacity-90">453                Add to cart454              </button>455            </div>456          </li>457        ))}458      </ul>459      {open ? (460        <div className="fixed inset-0 z-50 flex justify-end bg-black/30" onClick={() => setOpen(false)}>461          <aside className="flex h-full w-full max-w-sm flex-col bg-bg p-6 shadow-2xl" onClick={(e) => e.stopPropagation()} aria-label="Cart">462            <div className="flex items-center justify-between">463              <h3 className="font-heading text-xl font-semibold">Your cart</h3>464              <button type="button" onClick={() => setOpen(false)} className="text-muted hover:text-fg" aria-label="Close cart">465                ✕466              </button>467            </div>468            <ul className="mt-6 flex-1 divide-y divide-line overflow-auto">469              {s.items470                .filter((p) => cart[p.name])471                .map((p) => (472                  <li key={p.name} className="flex items-center justify-between gap-3 py-4">473                    <span>474                      {p.name}475                      <span className="block text-sm text-muted">476                        {cart[p.name]} × {money(p.price)}477                      </span>478                    </span>479                    <button type="button" className="text-sm text-muted underline" onClick={() => setCart(({ [p.name]: _, ...rest }) => rest)}>480                      Remove481                    </button>482                  </li>483                ))}484              {count === 0 ? <li className="py-8 text-center text-muted">Your cart is empty.</li> : null}485            </ul>486            <div className="border-t border-line pt-5">487              <p className="flex justify-between font-semibold">488                <span>Subtotal</span>489                <span className="tabular-nums">{money(total)}</span>490              </p>491              <button type="button" disabled={count === 0} className="mt-4 h-11 w-full rounded-card bg-accent font-medium text-accent-fg disabled:opacity-50">492                Checkout493              </button>494              <p className="mt-2 text-center text-xs text-muted">Demo store: connect Stripe or Razorpay to take payments.</p>495            </div>496          </aside>497        </div>498      ) : null}499    </Band>500  );501}502 503function Hours({ s }: { s: Of<"hours"> }) {504  return (505    <Band id={s.id}>506      <div className="grid gap-12 md:grid-cols-2">507        <div>508          <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />509          <ul className="mt-8 space-y-3 text-[16px]">510            <li className="flex gap-3">511              <span className="text-accent">512                <Icon name="pin" />513              </span>514              {s.address}515            </li>516            {s.phone ? (517              <li className="flex gap-3">518                <span className="text-accent">519                  <Icon name="phone" />520                </span>521                {s.phone}522              </li>523            ) : null}524            {s.email ? (525              <li className="flex gap-3">526                <span className="text-accent">527                  <Icon name="mail" />528                </span>529                {s.email}530              </li>531            ) : null}532          </ul>533        </div>534        <dl className="divide-y divide-line rounded-card border border-line">535          {s.rows.map((r) => (536            <div key={r.day} className="flex justify-between gap-4 px-6 py-4">537              <dt className="font-medium">{r.day}</dt>538              <dd className="tabular-nums text-muted">{r.time}</dd>539            </div>540          ))}541        </dl>542      </div>543    </Band>544  );545}546 547function Cta({ s }: { s: Of<"cta"> }) {548  return (549    <section id={s.id} className="py-16">550      <Container>551        <div className="rounded-card bg-fg px-8 py-14 text-center text-bg sm:px-16">552          <h2 className="mx-auto max-w-2xl font-heading text-3xl font-semibold tracking-tight sm:text-4xl">{s.title}</h2>553          <p className="mx-auto mt-4 max-w-xl text-lg opacity-75">{s.text}</p>554          <div className="mt-8 flex flex-wrap justify-center gap-3">555            <a href={s.primary.href} className="inline-flex h-11 items-center rounded-card bg-accent px-5 font-medium text-accent-fg hover:opacity-90">556              {s.primary.label}557            </a>558            {s.secondary ? (559              <a href={s.secondary.href} className="inline-flex h-11 items-center rounded-card border border-current/30 px-5 font-medium opacity-90 hover:opacity-100">560                {s.secondary.label}561              </a>562            ) : null}563          </div>564        </div>565      </Container>566    </section>567  );568}569 570const FIELD: Record<Of<"contact">["fields"][number], { label: string; type: string; autoComplete?: string }> = {571  name: { label: "Name", type: "text", autoComplete: "name" },572  email: { label: "Email", type: "email", autoComplete: "email" },573  phone: { label: "Phone", type: "tel", autoComplete: "tel" },574  date: { label: "Date", type: "date" },575  guests: { label: "Guests", type: "number" },576  company: { label: "Company", type: "text", autoComplete: "organization" },577  message: { label: "Message", type: "textarea" },578};579 580function Contact({ s }: { s: Of<"contact"> }) {581  const [sent, setSent] = useState(false);582  return (583    <Band id={s.id ?? "contact"} tinted>584      <div className="grid gap-12 lg:grid-cols-2">585        <Heading eyebrow={s.eyebrow} title={s.title} text={s.text} />586        {sent ? (587          <div className="rounded-card border border-line bg-bg p-8">588            <p className="font-heading text-xl font-semibold">Thank you</p>589            <p className="mt-2 text-muted">We have your message and will reply soon. (Demo form: connect an email service to receive these.)</p>590          </div>591        ) : (592          <form593            className="grid gap-4 rounded-card border border-line bg-bg p-7 sm:grid-cols-2"594            onSubmit={(e) => {595              e.preventDefault();596              setSent(true);597            }}598          >599            {s.fields.map((f) => {600              const d = FIELD[f];601              const id = `field-${f}`;602              return (603                <label key={f} htmlFor={id} className={`text-sm font-medium ${f === "message" ? "sm:col-span-2" : ""}`}>604                  {d.label}605                  {d.type === "textarea" ? (606                    <textarea id={id} rows={4} required className="mt-1.5 block w-full rounded-card border border-line bg-bg px-3 py-2.5 text-[15px] outline-none focus:border-accent" />607                  ) : (608                    <input id={id} type={d.type} autoComplete={d.autoComplete} required={f === "name" || f === "email"} className="mt-1.5 block h-11 w-full rounded-card border border-line bg-bg px-3 text-[15px] outline-none focus:border-accent" />609                  )}610                </label>611              );612            })}613            <button type="submit" className="h-11 rounded-card bg-accent font-medium text-accent-fg hover:opacity-90 sm:col-span-2">614              {s.button}615            </button>616          </form>617        )}618      </div>619    </Band>620  );621}622 623export function SectionView({ s }: { s: Section }) {624  switch (s.kind) {625    case "hero":626      return <Hero s={s} />;627    case "features":628      return <Features s={s} />;629    case "split":630      return <Split s={s} />;631    case "menu":632      return <Menu s={s} />;633    case "pricing":634      return <Pricing s={s} />;635    case "gallery":636      return <Gallery s={s} />;637    case "projects":638      return <Projects s={s} />;639    case "quotes":640      return <Quotes s={s} />;641    case "stats":642      return <Stats s={s} />;643    case "steps":644      return <Steps s={s} />;645    case "team":646      return <Team s={s} />;647    case "timeline":648      return <Timeline s={s} />;649    case "faq":650      return <Faq s={s} />;651    case "products":652      return <Products s={s} />;653    case "hours":654      return <Hours s={s} />;655    case "cta":656      return <Cta s={s} />;657    case "contact":658      return <Contact s={s} />;659  }660}