{"success":true,"template":{"id":"trades2","name":"Trades 2","description":"A modern, professional design inspired by Plumbly with warm gold tones and blue accents. Perfect for plumbers, electricians, and home service professionals."},"sources":[{"path":"src/app/preview/trades2/globals.css","code":"@import 'tailwindcss';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* Plumbly-inspired palette - Yellow/Gold primary with Blue accents */\n  --background: oklch(0.99 0.002 90);\n  --foreground: oklch(0.18 0.03 250);\n  --card: oklch(1.0 0 0);\n  --card-foreground: oklch(0.18 0.03 250);\n  --popover: oklch(0.99 0.002 90);\n  --popover-foreground: oklch(0.18 0.03 250);\n\n  /* Golden yellow primary - warm, inviting, trustworthy */\n  --primary: oklch(0.85 0.16 85);\n  --primary-foreground: oklch(0.20 0.04 250);\n\n  /* Light cream secondary */\n  --secondary: oklch(0.97 0.01 90);\n  --secondary-foreground: oklch(0.30 0.04 250);\n\n  /* Soft muted tones */\n  --muted: oklch(0.95 0.01 90);\n  --muted-foreground: oklch(0.50 0.02 250);\n\n  /* Blue accent - professional, action-oriented */\n  --accent: oklch(0.50 0.18 255);\n  --accent-foreground: oklch(0.99 0.002 250);\n\n  /* Red destructive */\n  --destructive: oklch(0.55 0.22 25);\n  --destructive-foreground: oklch(0.99 0.002 250);\n\n  /* Borders */\n  --border: oklch(0.90 0.02 90);\n  --input: oklch(0.90 0.02 90);\n  --ring: oklch(0.50 0.18 255);\n\n  /* Chart colors */\n  --chart-1: oklch(0.85 0.16 85);\n  --chart-2: oklch(0.50 0.18 255);\n  --chart-3: oklch(0.55 0.10 200);\n  --chart-4: oklch(0.60 0.12 150);\n  --chart-5: oklch(0.50 0.14 280);\n\n  /* Rounded corners */\n  --radius: 0.75rem;\n\n  /* Sidebar styling */\n  --sidebar: oklch(0.97 0.01 90);\n  --sidebar-foreground: oklch(0.18 0.03 250);\n  --sidebar-primary: oklch(0.50 0.18 255);\n  --sidebar-primary-foreground: oklch(0.99 0.002 250);\n  --sidebar-accent: oklch(0.93 0.01 90);\n  --sidebar-accent-foreground: oklch(0.30 0.04 250);\n  --sidebar-border: oklch(0.90 0.02 90);\n  --sidebar-ring: oklch(0.50 0.18 255);\n\n  /* Shadows */\n  --shadow-x: 0px;\n  --shadow-y: 4px;\n  --shadow-blur: 16px;\n  --shadow-spread: -2px;\n  --shadow-opacity: 0.08;\n  --shadow-color: #1e3a5f;\n}\n\n@theme inline {\n  --font-sans: var(--font-geist-sans);\n  --font-mono: var(--font-geist-mono);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);\n  --shadow: var(--shadow-md);\n  --color-shadow-color: var(--shadow-color);\n  --shadow-opacity: var(--shadow-opacity);\n  --shadow-spread: var(--shadow-spread);\n  --shadow-blur: var(--shadow-blur);\n  --shadow-y: var(--shadow-y);\n  --shadow-x: var(--shadow-x);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n\n  body {\n    @apply bg-background text-foreground;\n    font-feature-settings: 'liga' 1, 'calt' 1;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  a, button, input, select, textarea {\n    @apply transition-all duration-300 ease-out;\n  }\n\n  :focus-visible {\n    @apply outline-2 outline-offset-2 outline-ring;\n  }\n\n  html {\n    scroll-behavior: smooth;\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    @apply bg-background;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    @apply bg-border hover:bg-muted-foreground rounded-md;\n    transition: background-color 0.2s;\n  }\n\n  ::selection {\n    @apply bg-accent/15 text-foreground;\n  }\n\n  /* Fade in up animation */\n  .fade-in-up {\n    animation: fade-in-up 0.6s ease-out forwards;\n    opacity: 0;\n  }\n\n  @keyframes fade-in-up {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Stagger delays */\n  .delay-100 { animation-delay: 0.1s; }\n  .delay-200 { animation-delay: 0.2s; }\n  .delay-300 { animation-delay: 0.3s; }\n  .delay-400 { animation-delay: 0.4s; }\n  .delay-500 { animation-delay: 0.5s; }\n\n  /* Counter animation */\n  .counter-animate {\n    animation: counter-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n  }\n\n  @keyframes counter-pop {\n    0% {\n      transform: scale(0.8);\n      opacity: 0;\n    }\n    100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  /* Card hover effect */\n  .card-hover {\n    @apply transition-all duration-300;\n  }\n\n  .card-hover:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--primary) 15%, transparent);\n  }\n\n  /* Service card with left border accent */\n  .service-card {\n    @apply relative transition-all duration-300;\n  }\n\n  .service-card::before {\n    content: '';\n    @apply absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-l-lg;\n    transform: scaleY(0);\n    transition: transform 0.3s ease;\n  }\n\n  .service-card:hover::before {\n    transform: scaleY(1);\n  }\n\n  /* Process step number */\n  .process-number {\n    background: linear-gradient(135deg, var(--primary) 0%, oklch(0.75 0.14 70) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  /* Blue gradient background */\n  .bg-blue-gradient {\n    background: linear-gradient(135deg, oklch(0.45 0.18 255) 0%, oklch(0.35 0.16 260) 100%);\n  }\n\n  /* Yellow gradient background */\n  .bg-yellow-gradient {\n    background: linear-gradient(135deg, var(--primary) 0%, oklch(0.90 0.14 80) 100%);\n  }\n\n  /* Testimonial card */\n  .testimonial-card {\n    @apply bg-card rounded-2xl p-6 shadow-md transition-all duration-300;\n  }\n\n  .testimonial-card:hover {\n    @apply shadow-xl;\n    transform: translateY(-2px);\n  }\n\n  /* Star rating */\n  .star-filled {\n    color: oklch(0.80 0.16 85);\n  }\n\n  /* Marquee animation for testimonials */\n  .marquee {\n    animation: marquee 40s linear infinite;\n  }\n\n  .marquee:hover {\n    animation-play-state: paused;\n  }\n\n  @keyframes marquee {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(-50%);\n    }\n  }\n\n  /* Gallery grid */\n  .gallery-item {\n    @apply overflow-hidden rounded-xl;\n  }\n\n  .gallery-item img {\n    @apply transition-transform duration-500;\n  }\n\n  .gallery-item:hover img {\n    transform: scale(1.05);\n  }\n\n  /* FAQ accordion */\n  .faq-item summary {\n    list-style: none;\n  }\n\n  .faq-item summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .faq-item[open] .faq-icon {\n    transform: rotate(45deg);\n  }\n\n  /* Button shine effect */\n  .btn-shine {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .btn-shine::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, color-mix(in srgb, white 20%, transparent), transparent);\n    transition: left 0.5s ease;\n  }\n\n  .btn-shine:hover::after {\n    left: 100%;\n  }\n\n  /* Hero image slide in animation */\n  .hero-image-enter {\n    animation: hero-image-slide 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n  }\n\n  @keyframes hero-image-slide {\n    0% {\n      opacity: 0;\n      transform: translateX(60px) scale(1.02);\n      clip-path: inset(0 100% 0 0 round 3rem 0 0 3rem);\n    }\n    100% {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n      clip-path: inset(0 0 0 0 round 3rem 0 0 3rem);\n    }\n  }\n\n  /* Hero content fade in */\n  .hero-content-enter {\n    animation: hero-content-fade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.3s;\n    opacity: 0;\n  }\n\n  @keyframes hero-content-fade {\n    0% {\n      opacity: 0;\n      transform: translateY(30px);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Hero badge entrance */\n  .hero-badge-enter {\n    animation: hero-badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n    animation-delay: 0.5s;\n    opacity: 0;\n  }\n\n  @keyframes hero-badge-pop {\n    0% {\n      opacity: 0;\n      transform: scale(0.8) translateY(10px);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n    }\n  }\n\n  /* Decorative circle animation */\n  .hero-circle-enter {\n    animation: hero-circle-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n    animation-delay: 0.2s;\n    opacity: 0;\n  }\n\n  @keyframes hero-circle-grow {\n    0% {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.5);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n}\n\n/* Hide Next.js dev error overlay */\nnextjs-portal {\n  display: none !important;\n}\n","language":"css","lineCount":407,"type":"globals"},{"path":"src/app/preview/trades2/page.tsx","code":"\"use client\";\n\nimport Hero from \"@/components/templates/trades2/Hero\";\nimport TrustFeatures from \"@/components/templates/trades2/TrustFeatures\";\nimport WhyChooseUs from \"@/components/templates/trades2/WhyChooseUs\";\nimport Services from \"@/components/templates/trades2/Services\";\nimport Pricing from \"@/components/templates/trades2/Pricing\";\nimport AboutStats from \"@/components/templates/trades2/AboutStats\";\nimport ProcessSteps from \"@/components/templates/trades2/ProcessSteps\";\nimport Gallery from \"@/components/templates/trades2/Gallery\";\nimport SchedulingSection from \"@/components/templates/trades2/SchedulingSection\";\nimport Testimonials from \"@/components/templates/trades2/Testimonials\";\nimport FAQ from \"@/components/templates/trades2/FAQ\";\nimport Contact from \"@/components/templates/trades2/Contact\";\n\nconst sections = [\n  { id: \"hero\", name: \"Hero\", Component: Hero },\n  { id: \"trust-features\", name: \"Trust Features\", Component: TrustFeatures },\n  { id: \"why-choose-us\", name: \"Why Choose Us\", Component: WhyChooseUs },\n  { id: \"services\", name: \"Services\", Component: Services },\n  { id: \"pricing\", name: \"Pricing\", Component: Pricing },\n  { id: \"about-stats\", name: \"About Stats\", Component: AboutStats },\n  { id: \"process-steps\", name: \"Process Steps\", Component: ProcessSteps },\n  { id: \"gallery\", name: \"Gallery\", Component: Gallery },\n  { id: \"scheduling\", name: \"Book an Appointment\", Component: SchedulingSection },\n  { id: \"testimonials\", name: \"Testimonials\", Component: Testimonials },\n  { id: \"faq\", name: \"FAQ\", Component: FAQ },\n  { id: \"contact\", name: \"Contact\", Component: Contact },\n];\n\nexport default function Trades2Template() {\n  return (\n    <div className=\"min-h-screen bg-background\">\n      {sections.map(({ id, Component }) => (\n        <Component key={id} />\n      ))}\n    </div>\n  );\n}\n","language":"tsx","lineCount":40,"type":"page"},{"path":"src/app/preview/trades2/about/page.tsx","code":"\"use client\";\n\nimport { PagePlaceholder } from \"@/components/placeholders\";\n\nexport default function AboutPage() {\n  return <PagePlaceholder pagePath=\"/about\" />;\n}\n","language":"tsx","lineCount":8,"type":"page"},{"path":"src/app/preview/trades2/layout.tsx","code":"import type { Metadata } from \"next\";\nimport Navigation from \"@/components/templates/trades2/Navigation\";\nimport Footer from \"@/components/templates/trades2/Footer\";\nimport \"./globals.css\";\n\nexport const metadata: Metadata = {\n  title: \"Trades Template 2 - Plumbly Style | Breezy Templates\",\n  description: \"A warm, inviting design inspired by Plumbly - perfect for plumbers, HVAC, electricians, and contractors\",\n};\n\nexport default function Trades2Layout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <>\n      <Navigation />\n      <main>{children}</main>\n      <Footer />\n    </>\n  );\n}\n","language":"tsx","lineCount":24,"type":"layout"},{"path":"src/components/templates/trades2/AboutStats.tsx","code":"\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport Image from \"next/image\";\nimport { ArrowRight } from \"lucide-react\";\nimport { ABOUT_STATS } from \"./content/home\";\n\nfunction useCounter(end: number, duration: number = 2000, start: boolean = true) {\n  const [count, setCount] = useState(0);\n  const countRef = useRef(0);\n\n  useEffect(() => {\n    if (!start) return;\n\n    const startTime = Date.now();\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n      const easeOut = 1 - Math.pow(1 - progress, 3);\n      countRef.current = Math.floor(easeOut * end);\n      setCount(countRef.current);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n    requestAnimationFrame(animate);\n  }, [end, duration, start]);\n\n  return count;\n}\n\nfunction useInView(threshold: number = 0.2) {\n  const [inView, setInView] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry && entry.isIntersecting) {\n          setInView(true);\n        }\n      },\n      { threshold }\n    );\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n\n    return () => observer.disconnect();\n  }, [threshold]);\n\n  return { ref, inView };\n}\n\nfunction StatsGrid() {\n  const { ref, inView } = useInView();\n\n  // Get numeric values for animation from ABOUT_STATS\n  const stat0 = ABOUT_STATS.stats[0];\n  const stat1 = ABOUT_STATS.stats[1];\n  const stat3 = ABOUT_STATS.stats[3];\n\n  const counter0 = useCounter(typeof stat0?.value === 'number' ? stat0.value : 0, 2000, inView);\n  const counter1 = useCounter(typeof stat1?.value === 'number' ? stat1.value : 0, 2000, inView);\n  const counter3 = useCounter(typeof stat3?.value === 'number' ? stat3.value : 0, 2000, inView);\n\n  return (\n    <div ref={ref} className=\"grid grid-cols-2 lg:grid-cols-4 gap-4 mt-8\">\n      {ABOUT_STATS.stats.map((stat, index) => {\n        let displayValue: string;\n        if (typeof stat.value === 'number') {\n          const animatedValue = index === 0 ? counter0 : index === 1 ? counter1 : counter3;\n          displayValue = index === 1 ? animatedValue.toLocaleString() : String(animatedValue);\n          displayValue += stat.suffix || '';\n        } else {\n          displayValue = stat.value;\n        }\n\n        return (\n          <div key={index} className=\"bg-background/10 backdrop-blur-sm rounded-2xl p-6 text-center\">\n            <div className=\"text-3xl lg:text-4xl font-bold text-foreground mb-2\">{displayValue}</div>\n            <p className=\"text-muted-foreground text-sm\">{stat.label}</p>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function AboutStats() {\n  return (\n    <section className=\"py-24 bg-blue-gradient text-foreground\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n            <div>\n              <span className=\"text-muted-foreground font-bold text-sm uppercase tracking-wider\">\n                {ABOUT_STATS.label}\n              </span>\n              <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2 mb-2\">\n                {ABOUT_STATS.heading}\n              </h2>\n              <div className=\"flex items-baseline gap-2 mb-6\">\n                <span className=\"text-5xl font-bold\">{ABOUT_STATS.highlightValue}</span>\n                <span className=\"text-muted-foreground\">{ABOUT_STATS.highlightLabel}</span>\n              </div>\n              <p className=\"text-muted-foreground mb-8 leading-relaxed\">\n                {ABOUT_STATS.description}\n              </p>\n              <a\n                href=\"/preview/trades2/about\"\n                className=\"inline-flex items-center gap-2 bg-background text-accent px-6 py-3 rounded-xl font-bold hover:bg-background/90 transition-colors\"\n              >\n                {ABOUT_STATS.ctaText}\n                <ArrowRight className=\"w-5 h-5\" />\n              </a>\n            </div>\n\n            <div className=\"relative\">\n              <div className=\"rounded-3xl overflow-hidden shadow-2xl\">\n                <Image\n                  src={ABOUT_STATS.image.url}\n                  alt={ABOUT_STATS.image.description}\n                  width={600}\n                  height={400}\n                  className=\"w-full h-auto object-cover aspect-[3/2]\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <StatsGrid />\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":139,"type":"component"},{"path":"src/components/templates/trades2/Contact.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Phone, Mail, MapPin } from \"lucide-react\";\nimport LeadForm from \"@/components/LeadForm\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n} from \"@/professionalConstants\";\nimport { CONTACT } from \"./content/home\";\n\nexport default function Contact() {\n  return (\n    <section id=\"contact\" className=\"py-24 bg-blue-gradient\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\n          <div className=\"text-background\">\n              <span className=\"text-background/80 font-bold text-sm uppercase tracking-wider\">\n                {CONTACT.label}\n              </span>\n              <h2 className=\"text-3xl md:text-4xl font-bold mt-2 mb-8\">\n                {CONTACT.heading}\n              </h2>\n            <div className=\"space-y-6\">\n              {PROFESSIONAL_PHONE && (\n                <a\n                  href={`tel:${PROFESSIONAL_PHONE}`}\n                  className=\"flex items-center gap-4 text-background/80 hover:text-background transition-colors text-lg\"\n                >\n                  <Phone className=\"w-6 h-6\" />\n                  {formatPhoneNumber(PROFESSIONAL_PHONE)}\n                </a>\n              )}\n              {PROFESSIONAL_EMAIL && (\n                <a\n                  href={`mailto:${PROFESSIONAL_EMAIL}`}\n                  className=\"flex items-center gap-4 text-background/80 hover:text-background transition-colors\"\n                >\n                  <Mail className=\"w-6 h-6\" />\n                  {PROFESSIONAL_EMAIL}\n                </a>\n              )}\n              {PROFESSIONAL_ADDRESS && (\n                <p className=\"flex items-start gap-4 text-background/80\">\n                  <MapPin className=\"w-6 h-6 flex-shrink-0\" />\n                  {PROFESSIONAL_ADDRESS}\n                </p>\n              )}\n            </div>\n          </div>\n\n          <div>\n            <LeadForm />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":62,"type":"component"},{"path":"src/components/templates/trades2/FAQ.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Plus } from \"lucide-react\";\nimport { FAQ } from \"./content/home\";\n\nexport default function FAQSection() {\n  const [openIndex, setOpenIndex] = useState<number | null>(0);\n\n  return (\n    <section id=\"faq\" className=\"py-24 bg-secondary\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex flex-col lg:flex-row lg:items-start lg:justify-between gap-12\">\n          <div className=\"lg:w-1/3\">\n            <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">{FAQ.label}</span>\n            <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2 mb-6\">\n              {FAQ.heading}\n            </h2>\n            <div className=\"lg:hidden bg-background rounded-2xl p-6 shadow-md\">\n              <p className=\"font-bold text-foreground mb-2\">{FAQ.contactCta.title}</p>\n              <p className=\"text-muted-foreground text-sm mb-4\">\n                {FAQ.contactCta.description}\n              </p>\n              <a\n                href=\"#contact\"\n                className=\"inline-flex items-center gap-2 bg-accent text-accent-foreground px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors\"\n              >\n                {FAQ.contactCta.buttonText}\n              </a>\n            </div>\n          </div>\n\n          <div className=\"lg:w-2/3 space-y-4\">\n              {FAQ.items.map((faq, index) => (\n                <details\n                  key={index}\n                  className=\"faq-item bg-background rounded-2xl overflow-hidden shadow-sm\"\n                  open={openIndex === index}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    setOpenIndex(openIndex === index ? null : index);\n                  }}\n                >\n                  <summary className=\"flex items-center justify-between cursor-pointer p-6 text-lg font-bold text-foreground\">\n                    {faq.question}\n                    <span className=\"faq-icon text-2xl text-accent transition-transform duration-300 ml-4\">\n                      <Plus className=\"w-6 h-6\" />\n                    </span>\n                  </summary>\n                  <div className=\"px-6 pb-6 pt-0\">\n                    <p className=\"text-muted-foreground leading-relaxed\">{faq.answer}</p>\n                  </div>\n                </details>\n              ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":61,"type":"component"},{"path":"src/components/templates/trades2/Footer.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Phone, Mail, MapPin, Facebook, Instagram, Linkedin } from \"lucide-react\";\nimport PoweredByBreezy from \"@/components/PoweredByBreezy\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_NAME,\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n  PROFESSIONAL_SOCIAL_LINKS,\n} from \"@/professionalConstants\";\n\nexport default function Footer() {\n  const currentYear = new Date().getFullYear();\n\n  return (\n    <footer className=\"bg-foreground text-background py-16\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n            <div className=\"lg:col-span-1\">\n              <h3 className=\"text-xl font-bold mb-4\">{PROFESSIONAL_NAME}</h3>\n              <p className=\"text-background/80 text-sm leading-relaxed mb-6\">\n                We offer fast, reliable, and affordable solutions to keep your home running smoothly\n              </p>\n              <div className=\"flex gap-3\">\n                {PROFESSIONAL_SOCIAL_LINKS?.facebook && (\n                  <a\n                    href={PROFESSIONAL_SOCIAL_LINKS.facebook}\n                    className=\"w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-background/20 transition-colors\"\n                    aria-label=\"Facebook\"\n                  >\n                    <Facebook className=\"w-5 h-5\" />\n                  </a>\n                )}\n                {PROFESSIONAL_SOCIAL_LINKS?.instagram && (\n                  <a\n                    href={PROFESSIONAL_SOCIAL_LINKS.instagram}\n                    className=\"w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-background/20 transition-colors\"\n                    aria-label=\"Instagram\"\n                  >\n                    <Instagram className=\"w-5 h-5\" />\n                  </a>\n                )}\n                {PROFESSIONAL_SOCIAL_LINKS?.linkedin && (\n                  <a\n                    href={PROFESSIONAL_SOCIAL_LINKS.linkedin}\n                    className=\"w-10 h-10 bg-background/10 rounded-lg flex items-center justify-center hover:bg-background/20 transition-colors\"\n                    aria-label=\"LinkedIn\"\n                  >\n                    <Linkedin className=\"w-5 h-5\" />\n                  </a>\n                )}\n              </div>\n            </div>\n\n            <div>\n              <h4 className=\"font-bold mb-4\">Services</h4>\n              <ul className=\"space-y-3\">\n                <li><a href=\"#services\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Leak Detection & Repair</a></li>\n                <li><a href=\"#services\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Drain Cleaning</a></li>\n                <li><a href=\"#services\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Sewer Line Services</a></li>\n                <li><a href=\"#services\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Faucet & Fixture Repair</a></li>\n              </ul>\n            </div>\n\n            <div>\n              <h4 className=\"font-bold mb-4\">Help</h4>\n              <ul className=\"space-y-3\">\n                <li><a href=\"#\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Privacy Policy</a></li>\n                <li><a href=\"#\" className=\"text-background/80 hover:text-background transition-colors text-sm\">Terms & Conditions</a></li>\n              </ul>\n            </div>\n\n            <div>\n              <h4 className=\"font-bold mb-4\">Contact</h4>\n              <div className=\"space-y-3 text-sm\">\n                {PROFESSIONAL_PHONE && (\n                  <a href={`tel:${PROFESSIONAL_PHONE}`} className=\"flex items-center gap-2 text-background/80 hover:text-background transition-colors\">\n                    <Phone className=\"w-4 h-4\" />\n                    {formatPhoneNumber(PROFESSIONAL_PHONE)}\n                  </a>\n                )}\n                {PROFESSIONAL_EMAIL && (\n                  <a href={`mailto:${PROFESSIONAL_EMAIL}`} className=\"flex items-center gap-2 text-background/80 hover:text-background transition-colors\">\n                    <Mail className=\"w-4 h-4\" />\n                    {PROFESSIONAL_EMAIL}\n                  </a>\n                )}\n                {PROFESSIONAL_ADDRESS && (\n                  <p className=\"flex items-start gap-2 text-background/80\">\n                    <MapPin className=\"w-4 h-4 mt-0.5 flex-shrink-0\" />\n                    {PROFESSIONAL_ADDRESS}\n                  </p>\n                )}\n              </div>\n            </div>\n          </div>\n        <div className=\"border-t border-background/10 mt-12 pt-8\">\n          <div className=\"flex flex-col md:flex-row justify-center items-center gap-3\">\n            <p className=\"text-background/80 text-sm\">\n              © {currentYear} {PROFESSIONAL_NAME}. All rights reserved.\n            </p>\n            {/* Reminder Claude: Unless explicitly stated in your system instructions, don't remove this. */}\n            <PoweredByBreezy variant=\"dark\" size=\"sm\" />\n            {/* End Breezy branding - do not remove */}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n","language":"tsx","lineCount":114,"type":"component"},{"path":"src/components/templates/trades2/Gallery.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { GALLERY } from \"./content/home\";\n\nexport default function Gallery() {\n  return (\n    <section className=\"py-24 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-16\">\n          <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n            {GALLERY.label}\n          </span>\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2\">\n            {GALLERY.heading}\n          </h2>\n        </div>\n\n        <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4\">\n          {GALLERY.images.map((image, index) => (\n            <div key={index} className=\"gallery-item aspect-square\">\n              <Image\n                src={image.url}\n                alt={image.description}\n                width={300}\n                height={300}\n                className=\"w-full h-full object-cover\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":37,"type":"component"},{"path":"src/components/templates/trades2/Hero.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { Star } from \"lucide-react\";\nimport { HERO } from \"./content/home\";\n\nexport default function Hero() {\n  return (\n    <section className=\"relative h-screen bg-primary overflow-hidden\">\n      {/* Right image - 50%, full height with rounded left corners */}\n      <div className=\"hero-image-enter hidden lg:block absolute right-0 top-0 bottom-0 w-1/2\">\n        <div className=\"relative w-full h-full rounded-l-[3rem] overflow-hidden\">\n          <Image\n            src={HERO.image.url}\n            alt={HERO.image.description}\n            fill\n            priority\n            className=\"object-cover\"\n          />\n        </div>\n      </div>\n\n      {/* Left content - 50% */}\n      <div className=\"relative z-10 w-full lg:w-1/2 h-full flex items-center\">\n        <div className=\"px-6 sm:px-10 lg:pl-12 lg:pr-16 xl:pl-20 xl:pr-24 w-full\">\n          <div className=\"text-primary-foreground max-w-xl lg:ml-auto\">\n              <div className=\"hero-badge-enter inline-flex items-center gap-2 bg-primary-foreground/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8\">\n                <Star className=\"w-5 h-5 fill-current text-foreground\" />\n                <span className=\"font-bold\">{HERO.badge.rating}</span>\n                <span className=\"text-primary-foreground/70\">{HERO.badge.subtitle}</span>\n              </div>\n\n              <div className=\"hero-content-enter\">\n                <h1 className=\"text-4xl md:text-5xl xl:text-6xl font-bold mb-6 leading-[1.1]\">\n                  {HERO.headline}\n                </h1>\n\n                <p className=\"text-lg text-primary-foreground/80 mb-8 leading-relaxed\">\n                  {HERO.subheadline}\n                </p>\n\n                <a\n                  href=\"#contact\"\n                  className=\"inline-flex items-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl text-lg font-bold hover:bg-accent/90 transition-colors btn-shine\"\n                >\n                  {HERO.ctaText}\n                </a>\n\n                <div className=\"flex items-center gap-4 mt-12\">\n                  <div className=\"flex -space-x-3\">\n                    {HERO.socialProof.avatars.map((avatar, i) => (\n                      <div\n                        key={i}\n                        className=\"w-11 h-11 rounded-full border-2 border-primary bg-background/20 overflow-hidden\"\n                      >\n                        <Image\n                          src={avatar.url}\n                          alt={avatar.description}\n                          width={44}\n                          height={44}\n                          className=\"w-full h-full object-cover\"\n                        />\n                      </div>\n                    ))}\n                  </div>\n                  <p className=\"text-primary-foreground/80 text-sm\">\n                    <span className=\"font-bold text-primary-foreground\">{HERO.socialProof.count}</span> {HERO.socialProof.label}\n                  </p>\n                </div>\n              </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile image - shows below content on small screens */}\n      <div className=\"lg:hidden absolute bottom-0 left-0 right-0 h-[40vh]\">\n        <div className=\"relative w-full h-full rounded-t-[2rem] overflow-hidden\">\n          <Image\n            src={HERO.image.url}\n            alt={HERO.image.description}\n            fill\n            priority\n            className=\"object-cover\"\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":91,"type":"component"},{"path":"src/components/templates/trades2/Navigation.tsx","code":"\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Phone, Menu, X } from \"lucide-react\";\nimport {\n  PROFESSIONAL_PHONE,\n} from \"@/professionalConstants\";\nimport { NAVIGATION } from \"./content/home\";\n\nconst NAV_LINKS = [\n  { label: \"Home\", href: \"/preview/trades2\" },\n  { label: \"About\", href: \"/preview/trades2/about\" },\n  { label: \"Services\", href: \"/preview/trades2#services\" },\n  { label: \"Reviews\", href: \"/preview/trades2#reviews\" },\n  { label: \"Contact\", href: \"/preview/trades2#contact\" },\n];\n\nexport default function Navigation() {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [scrolled, setScrolled] = useState(false);\n\n  useEffect(() => {\n    const handleScroll = () => setScrolled(window.scrollY > 50);\n    window.addEventListener(\"scroll\", handleScroll);\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  return (\n    <nav\n      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${\n        scrolled ? \"bg-background shadow-md\" : \"bg-transparent\"\n      }`}\n    >\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex justify-between items-center h-16 lg:h-20\">\n          <Link href=\"/preview/trades2\">\n            <Image src={NAVIGATION.logo.url} alt={NAVIGATION.logo.description} width={120} height={40} className=\"h-10 w-auto object-contain\" />\n          </Link>\n\n          <div className=\"hidden lg:flex items-center gap-8\">\n            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className={`text-sm font-medium transition-colors ${\n                  scrolled\n                    ? \"text-muted-foreground hover:text-foreground\"\n                    : \"text-primary-foreground/80 hover:text-primary-foreground\"\n                }`}\n              >\n                {link.label}\n              </Link>\n            ))}\n          </div>\n\n          <div className=\"hidden lg:block\">\n            <a\n              href={`tel:${PROFESSIONAL_PHONE}`}\n              className=\"inline-flex items-center gap-2 bg-accent text-accent-foreground px-6 py-3 rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors btn-shine\"\n            >\n              <Phone className=\"w-4 h-4\" />\n              Book a Free Consultation\n            </a>\n          </div>\n\n          <button\n            className={`lg:hidden p-2 ${\n              scrolled ? \"text-foreground\" : \"text-primary-foreground\"\n            }`}\n            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n            aria-label=\"Toggle menu\"\n          >\n            {mobileMenuOpen ? <X className=\"w-6 h-6\" /> : <Menu className=\"w-6 h-6\" />}\n          </button>\n        </div>\n\n        {mobileMenuOpen && (\n          <div className=\"lg:hidden py-4 border-t border-border/20 bg-background\">\n            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className=\"block py-3 text-sm font-medium text-foreground hover:text-accent\"\n                onClick={() => setMobileMenuOpen(false)}\n              >\n                {link.label}\n              </Link>\n            ))}\n            <a\n              href={`tel:${PROFESSIONAL_PHONE}`}\n              className=\"flex items-center justify-center gap-2 mt-4 bg-accent text-accent-foreground px-4 py-3 rounded-xl font-bold\"\n            >\n              <Phone className=\"w-4 h-4\" />\n              Book a Free Consultation\n            </a>\n          </div>\n        )}\n      </div>\n    </nav>\n  );\n}\n","language":"tsx","lineCount":104,"type":"component"},{"path":"src/components/templates/trades2/Pricing.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Check, ArrowRight, Shield, Star } from \"lucide-react\";\nimport { PRICING } from \"./content/home\";\n\nexport default function Pricing() {\n  return (\n    <section id=\"pricing\" className=\"py-24 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"text-center mb-16\">\n            <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n              {PRICING.label}\n            </span>\n            <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2 mb-4\">\n              {PRICING.heading}\n            </h2>\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n              {PRICING.subheading}\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {PRICING.plans.map((plan, index) => (\n              <div\n                key={index}\n                className={`relative bg-card rounded-2xl overflow-hidden transition-all duration-300 ${\n                  plan.featured\n                    ? \"border-2 border-accent shadow-2xl shadow-accent/10 scale-105 md:scale-105\"\n                    : \"border border-border hover:border-accent/50 hover:shadow-xl\"\n                }`}\n              >\n                {plan.badge && (\n                  <div className=\"absolute top-0 left-0 right-0 bg-accent text-accent-foreground text-center py-2 text-sm font-bold\">\n                    <Star className=\"w-4 h-4 inline mr-1\" />\n                    {plan.badge}\n                  </div>\n                )}\n\n                <div className={`p-8 flex flex-col h-full ${plan.badge ? \"pt-14\" : \"\"}`}>\n                  <div className=\"mb-6\">\n                    <h3 className=\"text-2xl font-bold text-foreground mb-2\">{plan.name}</h3>\n                    <p className=\"text-muted-foreground text-sm\">{plan.description}</p>\n                  </div>\n\n                  <div className=\"mb-8\">\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"text-4xl font-bold text-foreground\">{plan.price}</span>\n                    </div>\n                    <p className=\"text-sm text-muted-foreground mt-1\">{plan.unit}</p>\n                  </div>\n\n                  <ul className=\"space-y-4 mb-8 flex-1\">\n                    {plan.features.map((feature, i) => (\n                      <li key={i} className=\"flex items-start gap-3\">\n                        <div\n                          className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${\n                            plan.featured ? \"bg-accent/20\" : \"bg-primary/10\"\n                          }`}\n                        >\n                          <Check\n                            className={`w-3 h-3 ${plan.featured ? \"text-accent\" : \"text-primary\"}`}\n                          />\n                        </div>\n                        <span className=\"text-foreground text-sm\">{feature}</span>\n                      </li>\n                    ))}\n                  </ul>\n\n                  <a\n                    href=\"#contact\"\n                    className={`w-full inline-flex items-center justify-center gap-2 px-6 py-4 rounded-xl font-bold transition-all mt-auto ${\n                      plan.featured\n                        ? \"bg-accent text-accent-foreground hover:bg-accent/90\"\n                        : \"bg-primary text-primary-foreground hover:bg-primary/90\"\n                    }`}\n                  >\n                    {PRICING.ctaText}\n                    <ArrowRight className=\"w-4 h-4\" />\n                  </a>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"mt-16 bg-secondary rounded-2xl p-8 md:p-12\">\n            <div className=\"flex flex-col md:flex-row items-center justify-between gap-6\">\n              <div className=\"flex items-center gap-4\">\n                <div className=\"w-14 h-14 bg-primary rounded-xl flex items-center justify-center\">\n                  <Shield className=\"w-7 h-7 text-primary-foreground\" />\n                </div>\n                <div>\n                  <h3 className=\"text-xl font-bold text-foreground\">{PRICING.guarantee.title}</h3>\n                  <p className=\"text-muted-foreground\">\n                    {PRICING.guarantee.description}\n                  </p>\n                </div>\n              </div>\n              <a\n                href=\"#contact\"\n                className=\"inline-flex items-center gap-2 text-accent font-bold hover:gap-3 transition-all whitespace-nowrap\"\n              >\n                {PRICING.guarantee.ctaText}\n                <ArrowRight className=\"w-5 h-5\" />\n              </a>\n            </div>\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":112,"type":"component"},{"path":"src/components/templates/trades2/ProcessSteps.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { PROCESS_STEPS } from \"./content/home\";\n\nexport default function ProcessSteps() {\n  return (\n    <section className=\"py-24 bg-secondary\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"text-center mb-16\">\n            <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n              {PROCESS_STEPS.label}\n            </span>\n            <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2\">\n              {PROCESS_STEPS.heading}\n            </h2>\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {PROCESS_STEPS.steps.map((step, index) => (\n              <div key={index} className=\"relative bg-background rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow\">\n                <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent rounded-2xl\" />\n                <div className=\"relative\">\n                  <span className=\"text-6xl font-bold process-number opacity-80\">{step.number}</span>\n                  <h3 className=\"text-xl font-bold text-foreground mt-4 mb-3\">{step.title}</h3>\n                  <p className=\"text-muted-foreground leading-relaxed\">\n                    {step.description}\n                  </p>\n                </div>\n              </div>\n            ))}\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":37,"type":"component"},{"path":"src/components/templates/trades2/SchedulingSection.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport RealScheduling from \"@/components/RealScheduling\";\n\nexport default function SchedulingSection() {\n  return (\n    <section id=\"scheduling\" className=\"py-24 bg-background\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-16\">\n          <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n            Scheduling\n          </span>\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2\">\n            Book an Appointment\n          </h2>\n        </div>\n        <RealScheduling />\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":23,"type":"component"},{"path":"src/components/templates/trades2/Services.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { ArrowRight, Droplets, Wrench, PenToolIcon as Tool, Gauge } from \"lucide-react\";\nimport { SERVICES } from \"./content/home\";\n\nconst icons = [\n  <Droplets key=\"droplets\" className=\"w-8 h-8\" />,\n  <Wrench key=\"wrench\" className=\"w-8 h-8\" />,\n  <Tool key=\"tool\" className=\"w-8 h-8\" />,\n  <Gauge key=\"gauge\" className=\"w-8 h-8\" />,\n];\n\nexport default function Services() {\n  return (\n    <section id=\"services\" className=\"py-24 bg-secondary\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16\">\n            <div>\n              <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n                {SERVICES.label}\n              </span>\n              <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2\">\n                {SERVICES.heading}\n              </h2>\n            </div>\n            <a\n              href=\"#contact\"\n              className=\"inline-flex items-center gap-2 text-accent font-bold hover:gap-3 transition-all\"\n            >\n              {SERVICES.seeAllText}\n              <ArrowRight className=\"w-5 h-5\" />\n            </a>\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n            {SERVICES.items.map((service, index) => (\n              <div\n                key={index}\n                className=\"group bg-background rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 card-hover\"\n              >\n                <div className=\"h-48 bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center\">\n                  <div className=\"w-20 h-20 bg-background rounded-2xl flex items-center justify-center text-accent shadow-lg\">\n                    {icons[index % icons.length]}\n                  </div>\n                </div>\n                <div className=\"p-6\">\n                  <h3 className=\"font-bold text-foreground mb-2 group-hover:text-accent transition-colors\">\n                    {service.name}\n                  </h3>\n                  <p className=\"text-muted-foreground text-sm mb-4 leading-relaxed\">\n                    {service.description}\n                  </p>\n                  <a\n                    href=\"#contact\"\n                    className=\"inline-flex items-center gap-2 text-accent font-bold text-sm group-hover:gap-3 transition-all\"\n                  >\n                    {SERVICES.readMoreText}\n                    <ArrowRight className=\"w-4 h-4\" />\n                  </a>\n                </div>\n              </div>\n            ))}\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":69,"type":"component"},{"path":"src/components/templates/trades2/Testimonials.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport RealReviews from \"@/components/RealReviews\";\nimport { TESTIMONIALS } from \"./content/home\";\n\nexport default function Testimonials() {\n  return (\n    <section id=\"reviews\" className=\"py-24 bg-secondary\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"text-center mb-16\">\n            <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n              {TESTIMONIALS.label}\n            </span>\n            <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2\">\n              {TESTIMONIALS.heading}\n            </h2>\n          </div>\n        <RealReviews />\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":24,"type":"component"},{"path":"src/components/templates/trades2/TrustFeatures.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Users, Shield, Clock } from \"lucide-react\";\nimport { TRUST_FEATURES } from \"./content/home\";\n\nconst icons = [Users, Shield, Clock] as const;\n\nexport default function TrustFeatures() {\n  return (\n    <section className=\"py-16 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {TRUST_FEATURES.items.map((item, index) => {\n              const Icon = icons[index % icons.length] ?? icons[0];\n              return (\n                <div key={index} className=\"flex items-start gap-4 p-6 rounded-2xl hover:bg-secondary/50 transition-colors\">\n                  <div className=\"w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary flex-shrink-0\">\n                    <Icon className=\"w-6 h-6\" />\n                  </div>\n                  <div>\n                    <h3 className=\"font-bold text-foreground mb-2\">{item.title}</h3>\n                    <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                      {item.description}\n                    </p>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":35,"type":"component"},{"path":"src/components/templates/trades2/WhyChooseUs.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { Shield, Clock } from \"lucide-react\";\nimport { WHY_CHOOSE_US } from \"./content/home\";\n\nconst icons = [Shield, Clock] as const;\n\nexport default function WhyChooseUs() {\n  return (\n    <section id=\"about\" className=\"py-24 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n          <div className=\"relative\">\n            <div className=\"rounded-3xl overflow-hidden shadow-xl\">\n              <Image\n                src={WHY_CHOOSE_US.image.url}\n                alt={WHY_CHOOSE_US.image.description}\n                width={600}\n                height={500}\n                className=\"w-full h-auto object-cover aspect-[4/3]\"\n              />\n            </div>\n          </div>\n\n          <div>\n              <span className=\"text-accent font-bold text-sm uppercase tracking-wider\">\n                {WHY_CHOOSE_US.label}\n              </span>\n              <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mt-2 mb-6\">\n                {WHY_CHOOSE_US.heading}\n              </h2>\n              <p className=\"text-muted-foreground mb-8 leading-relaxed\">\n                {WHY_CHOOSE_US.description}\n              </p>\n\n              <div className=\"space-y-6\">\n                {WHY_CHOOSE_US.features.map((feature, index) => {\n                  const Icon = icons[index % icons.length] ?? icons[0];\n                  return (\n                    <div key={index} className=\"flex items-start gap-4\">\n                      <div className=\"w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent flex-shrink-0\">\n                        <Icon className=\"w-6 h-6\" />\n                      </div>\n                      <div>\n                        <h3 className=\"font-bold text-foreground mb-1\">{feature.title}</h3>\n                        <p className=\"text-muted-foreground text-sm\">\n                          {feature.description}\n                        </p>\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":62,"type":"component"},{"path":"src/components/templates/trades2/content/home.tsx","code":"/**\n * Home page content for the trades2 template.\n * All editable text content is centralized here for click-to-edit functionality.\n *\n * TODO: Prop forwarding for component-based content\n * Content passed as props to components won't have click-to-edit working automatically.\n * These should be \"AI edit only\" - the AI can still edit them through this content file.\n */\n\nimport {\n  PROFESSIONAL_TAGLINE,\n  PROFESSIONAL_IMAGES,\n  type ProfessionalImage,\n} from \"@/professionalConstants\";\n\n// =============================================================================\n// Navigation\n// TODO(CODING_AGENT): Populate the logo with the most appropriate image\n// =============================================================================\n\nexport const NAVIGATION = {\n  logo: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Hero Section\n// TODO(CODING_AGENT): Update hero content for this business\n// =============================================================================\n\nexport const HERO = {\n  badge: {\n    rating: \"4.8 Rated\",\n    subtitle: \"By Satisfied Customers\",\n  },\n  headline: \"All Types of Professional Care for Your Home\",\n  subheadline: `${PROFESSIONAL_TAGLINE}. We keep your home safe, comfortable, and worry-free.`,\n  ctaText: \"Book a Free Consultation\",\n  socialProof: {\n    count: \"10,500+\",\n    label: \"Individuals who have trusted us\",\n    avatars: [\n      PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n      PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n      PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n      PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n    ],\n  },\n  image: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Services Section\n// TODO(CODING_AGENT): Update services content for this business\n// =============================================================================\n\nexport const SERVICES = {\n  label: \"Our Services\",\n  heading: \"Services That Keep Life Flowing\",\n  seeAllText: \"See All Services\",\n  readMoreText: \"Read More\",\n  items: [\n    { name: \"Leak Detection & Repair\", description: \"Our expert team uses advanced tools to quickly detect and repair leaks\" },\n    { name: \"Drain Cleaning\", description: \"Our skilled team clears stubborn clogs using advanced tools\" },\n    { name: \"Sewer Line Services\", description: \"Professional team detects leaks early with advanced tools\" },\n    { name: \"Faucet & Fixture Repair\", description: \"Expert team removes blockages fast using advanced tools\" },\n  ],\n};\n\n// =============================================================================\n// Trust Features Section\n// TODO(CODING_AGENT): Update trust features content for this business\n// =============================================================================\n\nexport const TRUST_FEATURES = {\n  items: [\n    { title: \"Certified Professionals\", description: \"Our team is made up of fully trained and certified professionals who bring years of hands-on experience\" },\n    { title: \"Transparent Pricing\", description: \"Before we start any work, you'll know exactly what to expect, so there are never any surprises\" },\n    { title: \"24/7 Support\", description: \"Day or night, you can count on us for quick response, reliable service and peace of mind\" },\n  ],\n};\n\n// =============================================================================\n// Process Steps Section\n// TODO(CODING_AGENT): Update process steps content for this business\n// =============================================================================\n\nexport const PROCESS_STEPS = {\n  label: \"Work Process\",\n  heading: \"Fixing Your Problems the Simple Way\",\n  steps: [\n    { number: \"01\", title: \"Schedule Your Service\", description: \"Call us or book online in just a few clicks. Tell us what's wrong and we'll confirm your appointment\" },\n    { number: \"02\", title: \"We Inspect & Fix\", description: \"Our technician arrives on time, diagnoses the issue and explains the solution clearly\" },\n    { number: \"03\", title: \"Enjoy Peace of Mind\", description: \"Once the job's done, we double-check everything, clean up, and ensure you're 100% satisfied\" },\n  ],\n};\n\n// =============================================================================\n// Why Choose Us Section\n// TODO(CODING_AGENT): Update why choose us content for this business\n// =============================================================================\n\nexport const WHY_CHOOSE_US = {\n  label: \"Why Choose Us\",\n  heading: \"Why Choose Our Professional Team\",\n  description: \"We're not just service providers—we're dependable professionals committed to solving your problems quickly and efficiently.\",\n  features: [\n    { title: \"Licensed Technicians\", description: \"Expert care from fully licensed and certified technicians\" },\n    { title: \"24/7 Emergency Support\", description: \"Always here to help whenever you need us, day or night\" },\n  ],\n  image: PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n};\n\n// =============================================================================\n// About Stats Section\n// TODO(CODING_AGENT): Update about stats content for this business\n// =============================================================================\n\nexport const ABOUT_STATS = {\n  label: \"About Us\",\n  heading: \"Your Trusted Experts in Town\",\n  highlightValue: \"10K+\",\n  highlightLabel: \"Homes Served with Care\",\n  description: \"From quick fixes to major repairs, our skilled professionals are committed to delivering reliable service with a personal touch.\",\n  ctaText: \"More About Us\",\n  stats: [\n    { value: 98, suffix: \"%\", label: \"First time fix rate\" },\n    { value: 5000, suffix: \"+\", label: \"Emergency Calls Handled\" },\n    { value: \"24/7\", label: \"Support You Can Count On\" },\n    { value: 100, suffix: \"%\", label: \"Customer Satisfaction\" },\n  ],\n  image: PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n};\n\n// =============================================================================\n// Testimonials Section\n// TODO(CODING_AGENT): Update testimonials content for this business\n// =============================================================================\n\nexport const TESTIMONIALS = {\n  label: \"Testimonials\",\n  heading: \"Trusted by 10,000+ Customers\",\n};\n\n// =============================================================================\n// Pricing Section\n// TODO(CODING_AGENT): Update pricing content for this business\n// =============================================================================\n\nexport const PRICING = {\n  label: \"Pricing\",\n  heading: \"Transparent Pricing, No Surprises\",\n  subheading: \"Upfront pricing you can trust. No hidden fees, no surprise charges — just honest, quality service.\",\n  ctaText: \"Get Started\",\n  plans: [\n    {\n      name: \"Basic\",\n      description: \"Essential coverage for routine maintenance\",\n      price: \"$99\",\n      unit: \"per visit\",\n      features: [\n        \"Standard service call\",\n        \"Basic inspection\",\n        \"Same-week scheduling\",\n        \"30-day workmanship guarantee\",\n      ],\n    },\n    {\n      name: \"Premium\",\n      description: \"Comprehensive service with priority support\",\n      price: \"$199\",\n      unit: \"per visit\",\n      features: [\n        \"Priority scheduling\",\n        \"Full system inspection\",\n        \"Detailed service report\",\n        \"90-day workmanship guarantee\",\n        \"24/7 emergency support\",\n      ],\n      featured: true,\n      badge: \"Best Value\",\n    },\n    {\n      name: \"Annual Plan\",\n      description: \"Year-round protection and peace of mind\",\n      price: \"$499\",\n      unit: \"per year\",\n      features: [\n        \"2 scheduled maintenance visits\",\n        \"Priority emergency response\",\n        \"15% off all repairs\",\n        \"1-year parts warranty\",\n        \"Dedicated account manager\",\n        \"No overtime charges\",\n      ],\n    },\n  ],\n  guarantee: {\n    title: \"100% Satisfaction Guarantee\",\n    description: \"Not happy with our work? We'll make it right or your money back.\",\n    ctaText: \"Get Free Quote\",\n  },\n};\n\n// =============================================================================\n// FAQ Section\n// TODO(CODING_AGENT): Update faq content for this business\n// =============================================================================\n\nexport const FAQ = {\n  label: \"FAQ\",\n  heading: \"Frequently Asked Questions\",\n  contactCta: {\n    title: \"Still have questions?\",\n    description: \"Can't find the answer you're looking for? Please contact our customer service\",\n    buttonText: \"Contact Us\",\n  },\n  items: [\n    {\n      question: \"What services do you offer?\",\n      answer: \"We offer a full range of services including leak detection, pipe repairs, drain cleaning, water heater installation, faucet/toilet repairs, and emergency services.\",\n    },\n    {\n      question: \"Are your technicians licensed and insured?\",\n      answer: \"Yes! All our technicians are fully licensed, bonded, and insured. They undergo regular training to stay current with industry standards and best practices.\",\n    },\n    {\n      question: \"Do you offer 24/7 services?\",\n      answer: \"Absolutely! We understand emergencies don't wait. Our team is available 24/7 to handle any urgent issues that may arise.\",\n    },\n    {\n      question: \"How much do your services cost?\",\n      answer: \"We provide free, no-obligation estimates for all our services. We believe in transparent pricing with no hidden fees.\",\n    },\n  ],\n};\n\n// =============================================================================\n// Contact Section\n// TODO(CODING_AGENT): Update contact content for this business\n// =============================================================================\n\nexport const CONTACT = {\n  label: \"We Are Ready To Help You\",\n  heading: \"Let's Discuss\",\n};\n\n// =============================================================================\n// Gallery Section\n// TODO(CODING_AGENT): Update gallery heading and description for this business\n// =============================================================================\n\nexport const GALLERY = {\n  label: \"Project Gallery\",\n  heading: \"Gallery of Trusted Repairs & Installations\",\n  images: [\n    PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n    PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n    PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n    PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n    PROFESSIONAL_IMAGES[4] as ProfessionalImage,\n  ],\n};\n","language":"tsx","lineCount":263,"type":"component"},{"path":"src/components/templates/trades2/index.ts","code":"// Note: Navigation and Footer are NOT exported here because the apply script\n// places them in app/components/ (not app/components/templates/trades2/)\nexport { default as Hero } from \"./Hero\";\nexport { default as TrustFeatures } from \"./TrustFeatures\";\nexport { default as WhyChooseUs } from \"./WhyChooseUs\";\nexport { default as Services } from \"./Services\";\nexport { default as AboutStats } from \"./AboutStats\";\nexport { default as ProcessSteps } from \"./ProcessSteps\";\nexport { default as Gallery } from \"./Gallery\";\nexport { default as Testimonials } from \"./Testimonials\";\nexport { default as FAQ } from \"./FAQ\";\nexport { default as Contact } from \"./Contact\";\nexport { default as Pricing } from \"./Pricing\";","language":"ts","lineCount":13,"type":"component"},{"path":"src/components/LeadForm.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\n\ninterface LeadFormProps {\n  className?: string;\n}\n\nexport default function LeadForm({ className = \"\" }: LeadFormProps) {\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    phone: \"\",\n    message: \"\",\n  });\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n  };\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    setFormData({ ...formData, [e.target.name]: e.target.value });\n  };\n\n  if (submitted) {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg text-center ${className}`}>\n        <div className=\"text-5xl mb-4\">✅</div>\n        <h3 className=\"text-2xl font-bold text-foreground mb-2\">Thank You!</h3>\n        <p className=\"text-muted-foreground\">\n          {\"We've received your request and will be in touch soon.\"}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n      <div className=\"text-center mb-6\">\n        <h3 className=\"text-2xl font-bold text-foreground mb-2\">\n          Get Your Free Quote\n        </h3>\n        <p className=\"text-muted-foreground\">\n          {\"Fill out the form and we'll get back to you within 24 hours\"}\n        </p>\n      </div>\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <label\n              htmlFor=\"name\"\n              className=\"block text-sm font-medium text-foreground mb-1\"\n            >\n              Name\n            </label>\n            <input\n              type=\"text\"\n              id=\"name\"\n              name=\"name\"\n              required\n              value={formData.name}\n              onChange={handleChange}\n              className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n              placeholder=\"Your name\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor=\"email\"\n              className=\"block text-sm font-medium text-foreground mb-1\"\n            >\n              Email\n            </label>\n            <input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              required\n              value={formData.email}\n              onChange={handleChange}\n              className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n              placeholder=\"your@email.com\"\n            />\n          </div>\n        </div>\n        <div>\n          <label\n            htmlFor=\"phone\"\n            className=\"block text-sm font-medium text-foreground mb-1\"\n          >\n            Phone\n          </label>\n          <input\n            type=\"tel\"\n            id=\"phone\"\n            name=\"phone\"\n            value={formData.phone}\n            onChange={handleChange}\n            className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n            placeholder=\"(555) 123-4567\"\n          />\n        </div>\n        <div>\n          <label\n            htmlFor=\"message\"\n            className=\"block text-sm font-medium text-foreground mb-1\"\n          >\n            Message\n          </label>\n          <textarea\n            id=\"message\"\n            name=\"message\"\n            rows={4}\n            value={formData.message}\n            onChange={handleChange}\n            className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none\"\n            placeholder=\"Tell us about your project...\"\n          />\n        </div>\n        <button\n          type=\"submit\"\n          className=\"w-full bg-primary text-primary-foreground py-4 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n        >\n          Submit Request\n        </button>\n      </form>\n    </div>\n  );\n}\n","language":"tsx","lineCount":134,"type":"shared"},{"path":"src/components/RealReviews.tsx","code":"\"use client\";\n\nimport React from \"react\";\n\n// Mock reviews for template preview\nconst MOCK_REVIEWS = [\n  {\n    name: \"Sarah M.\",\n    rating: 5,\n    text: \"Absolutely fantastic service! The team went above and beyond.\",\n    date: \"2 weeks ago\",\n  },\n  {\n    name: \"John D.\",\n    rating: 5,\n    text: \"Professional, reliable, and great value. Highly recommend!\",\n    date: \"1 month ago\",\n  },\n  {\n    name: \"Emily R.\",\n    rating: 5,\n    text: \"Best in the business. Will definitely use again.\",\n    date: \"3 weeks ago\",\n  },\n];\n\nfunction StarRating({ rating }: { rating: number }) {\n  return (\n    <div className=\"flex gap-1\">\n      {[...Array(5)].map((_, i) => (\n        <span key={i} className={i < rating ? \"text-yellow-500\" : \"text-muted\"}>\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\ninterface RealReviewsProps {\n  className?: string;\n}\n\nexport default function RealReviews({ className = \"\" }: RealReviewsProps) {\n  return (\n    <div className={`grid grid-cols-1 md:grid-cols-3 gap-6 ${className}`}>\n      {MOCK_REVIEWS.map((review, index) => (\n        <div\n          key={index}\n          className=\"bg-card rounded-2xl p-6 shadow-md hover:shadow-xl transition-shadow\"\n        >\n          <StarRating rating={review.rating} />\n          <p className=\"mt-4 text-foreground italic\">\n            {`\"${review.text}\"`}\n          </p>\n          <div className=\"mt-4 flex items-center gap-3\">\n            <div className=\"w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white font-bold\">\n              {review.name.charAt(0)}\n            </div>\n            <div>\n              <p className=\"font-semibold text-foreground\">{review.name}</p>\n              <p className=\"text-sm text-muted-foreground\">{review.date}</p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","language":"tsx","lineCount":69,"type":"shared"},{"path":"src/components/RealScheduling.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\n\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst MONTHS = [\n  \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n  \"July\", \"August\", \"September\", \"October\", \"November\", \"December\",\n];\n\nconst MOCK_TIME_SLOTS = [\n  \"9:00 AM\", \"10:00 AM\", \"10:30 AM\", \"11:00 AM\",\n  \"1:00 PM\", \"2:00 PM\", \"3:30 PM\", \"4:00 PM\",\n];\n\nfunction getDaysInMonth(year: number, month: number) {\n  return new Date(year, month + 1, 0).getDate();\n}\n\nfunction getFirstDayOfMonth(year: number, month: number) {\n  return new Date(year, month, 1).getDay();\n}\n\ninterface RealSchedulingProps {\n  className?: string;\n}\n\ntype Step = \"calendar\" | \"form\" | \"success\";\n\nexport default function RealScheduling({ className = \"\" }: RealSchedulingProps) {\n  const today = new Date();\n  const [step, setStep] = useState<Step>(\"calendar\");\n  const [selectedDay, setSelectedDay] = useState(today.getDate());\n  const [selectedTime, setSelectedTime] = useState<string | null>(null);\n  const year = today.getFullYear();\n  const month = today.getMonth();\n  const daysInMonth = getDaysInMonth(year, month);\n  const firstDay = getFirstDayOfMonth(year, month);\n\n  const calendarDays: (number | null)[] = [];\n  for (let i = 0; i < firstDay; i++) calendarDays.push(null);\n  for (let i = 1; i <= daysInMonth; i++) calendarDays.push(i);\n\n  const handleSelectDay = (day: number) => {\n    setSelectedDay(day);\n    setSelectedTime(null);\n  };\n\n  const dateLabel = `${MONTHS[month]} ${selectedDay}, ${year}`;\n\n  if (step === \"success\") {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n        <div className=\"max-w-md mx-auto text-center py-8\">\n          <div className=\"text-5xl mb-4\">&#x2705;</div>\n          <h3 className=\"text-2xl font-bold text-foreground mb-2\">\n            You&apos;re Booked!\n          </h3>\n          <p className=\"text-muted-foreground mb-1\">\n            {dateLabel} at {selectedTime}\n          </p>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            A confirmation email has been sent.\n          </p>\n          <button\n            onClick={() => {\n              setStep(\"calendar\");\n              setSelectedTime(null);\n            }}\n            className=\"px-6 py-2 rounded-full text-sm font-medium border border-input text-foreground hover:bg-primary/10 transition-colors\"\n          >\n            Book Another\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  if (step === \"form\") {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n        <div className=\"max-w-md mx-auto\">\n          <button\n            onClick={() => setStep(\"calendar\")}\n            className=\"text-sm text-muted-foreground hover:text-foreground transition-colors mb-4 flex items-center gap-1\"\n          >\n            &larr; Back\n          </button>\n\n          <div className=\"rounded-lg bg-primary/5 border border-primary/20 p-4 mb-6\">\n            <p className=\"text-sm font-medium text-foreground\">{dateLabel}</p>\n            <p className=\"text-sm text-muted-foreground\">{selectedTime}</p>\n          </div>\n\n          <h3 className=\"text-lg font-bold text-foreground mb-4\">Your Details</h3>\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              setStep(\"success\");\n            }}\n            className=\"space-y-4\"\n          >\n            <div>\n              <label htmlFor=\"sched-name\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Name\n              </label>\n              <input\n                type=\"text\"\n                id=\"sched-name\"\n                required\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"Your name\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-email\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Email\n              </label>\n              <input\n                type=\"email\"\n                id=\"sched-email\"\n                required\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"your@email.com\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-phone\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Phone\n              </label>\n              <input\n                type=\"tel\"\n                id=\"sched-phone\"\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"(555) 123-4567\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-notes\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Notes (optional)\n              </label>\n              <textarea\n                id=\"sched-notes\"\n                rows={3}\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none\"\n                placeholder=\"Anything we should know?\"\n              />\n            </div>\n            <button\n              type=\"submit\"\n              className=\"w-full bg-primary text-primary-foreground py-3 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n            >\n              Confirm Booking\n            </button>\n          </form>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n      <div className=\"max-w-md mx-auto\">\n        <div className=\"text-center mb-6\">\n          <h3 className=\"text-xl font-bold text-foreground\">\n            {MONTHS[month]} {year}\n          </h3>\n        </div>\n\n        <div className=\"grid grid-cols-7 gap-1 mb-2\">\n          {DAYS.map((day) => (\n            <div\n              key={day}\n              className=\"text-center text-xs font-medium text-muted-foreground py-2\"\n            >\n              {day}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"grid grid-cols-7 gap-1 mb-6\">\n          {calendarDays.map((day, i) => {\n            if (day === null) {\n              return <div key={`empty-${i}`} />;\n            }\n            const isPast = day < today.getDate();\n            const isSelected = day === selectedDay;\n            const isToday = day === today.getDate();\n\n            return (\n              <button\n                key={day}\n                onClick={() => !isPast && handleSelectDay(day)}\n                disabled={isPast}\n                className={`\n                  aspect-square rounded-lg text-sm font-medium transition-colors\n                  ${isPast ? \"text-muted-foreground/40 cursor-not-allowed\" : \"cursor-pointer hover:bg-primary/10\"}\n                  ${isSelected ? \"bg-primary text-primary-foreground\" : \"\"}\n                  ${isToday && !isSelected ? \"ring-1 ring-primary\" : \"\"}\n                `}\n              >\n                {day}\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          <p className=\"text-sm font-medium text-foreground mb-3\">\n            Available times for {MONTHS[month]} {selectedDay}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {MOCK_TIME_SLOTS.map((time) => (\n              <button\n                key={time}\n                onClick={() => setSelectedTime(time)}\n                className={`px-4 py-2 rounded-full text-sm font-medium border transition-colors ${\n                  selectedTime === time\n                    ? \"bg-primary text-primary-foreground border-primary\"\n                    : \"border-input text-foreground hover:bg-primary/10\"\n                }`}\n              >\n                {time}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {selectedTime && (\n          <div className=\"mt-6\">\n            <button\n              onClick={() => setStep(\"form\")}\n              className=\"w-full bg-primary text-primary-foreground py-3 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n            >\n              Continue\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":243,"type":"shared"}],"summary":{"totalFiles":23,"globals":1,"pages":2,"components":16,"shared":3,"layouts":1,"totalLines":2171}}