Build a business website from INR 999 with AI-assisted planning.

import { Hero } from "@/components/Hero";
import { Services } from "@/components/Services";
import { LeadCapture } from "@/components/LeadCapture";

const copy = {
  "brand": "Service Business",
  "headline": "Service Business helps customers looking for service business in your area choose lead generation, service details and enquiry flow for a business website with confidence.",
  "subheadline": "A polished service business website for your area, India, built around lead generation, service details and enquiry flow for a business website, clear proof sections and conversion-focused CTAs.",
  "offer": "lead generation, service details and enquiry flow for a business website",
  "city": "your area",
  "industry": "Service business"
};

export default function ServiceBusinessHomepage() {
  return (
    <main className="site-shell">
      <Hero copy={copy} />
      <Services industry={copy.industry} offer={copy.offer} />
      <LeadCapture source="service" />
    </main>
  );
}

export function Hero({ copy }) {
  return (
    <section className="hero-grid">
      <div>
        <p className="eyebrow">Lead generation website for Service business in your area</p>
        <h1>{copy.headline}</h1>
        <p className="hero-copy">{copy.subheadline}</p>
        <div className="cta-row">
          <a className="primary-cta" href="#contact">Start enquiry</a>
          <a className="secondary-cta" href="#services">View services</a>
        </div>
      </div>
      <aside className="proof-panel">Built for {copy.city} buyers</aside>
    </section>
  );
}

export function LeadCapture() {
  return (
    <form className="lead-card">
      <input name="name" placeholder="Name" />
      <input name="phone" placeholder="Phone / WhatsApp" />
      <textarea name="requirement" placeholder="Tell us what you need" />
      <button>Send enquiry</button>
    </form>
  );
}

.site-shell { background: #f8fafc; color: #0f172a; }
.hero-grid { min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 48px; align-items: center; padding: 72px clamp(24px, 6vw, 96px); }
.eyebrow { color: #0f766e; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
h1 { max-width: 760px; font-size: clamp(44px, 6vw, 86px); line-height: .92; letter-spacing: 0; }
.hero-copy { max-width: 620px; color: #475569; font-size: 18px; line-height: 1.7; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.primary-cta, .secondary-cta { min-height: 48px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 22px; font-weight: 800; }
.primary-cta { background: #0f766e; color: white; }
.secondary-cta { border: 1px solid #0f766e; color: #0f766e; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; min-height: auto; } h1 { font-size: 44px; } }

export async function POST(request: Request) {
  const lead = await request.json();
  // Validate, store and notify the business owner.
  return Response.json({ ok: true, source: "service" });
}