{"success":true,"template":{"id":"restaurant","name":"Restaurant","description":"An elegant, warm design with rich burgundy tones and refined typography. Perfect for fine dining establishments, upscale bistros, and culinary experiences."},"sources":[{"path":"src/app/preview/restaurant/globals.css","code":"@import 'tailwindcss';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* Restaurant template - Warm, elegant palette with burgundy and gold */\n  --background: oklch(0.99 0.005 30);\n  --foreground: oklch(0.15 0.02 30);\n  --card: oklch(0.98 0.01 30);\n  --card-foreground: oklch(0.15 0.02 30);\n  --popover: oklch(0.99 0.005 30);\n  --popover-foreground: oklch(0.15 0.02 30);\n\n  /* Rich burgundy/wine primary */\n  --primary: oklch(0.45 0.15 15);\n  --primary-foreground: oklch(0.98 0.005 30);\n\n  /* Warm cream secondary */\n  --secondary: oklch(0.96 0.015 50);\n  --secondary-foreground: oklch(0.30 0.02 30);\n\n  /* Elegant muted tones */\n  --muted: oklch(0.94 0.01 30);\n  --muted-foreground: oklch(0.45 0.02 30);\n\n  /* Gold/amber accent */\n  --accent: oklch(0.65 0.12 70);\n  --accent-foreground: oklch(0.15 0.02 30);\n\n  /* Muted rose destructive */\n  --destructive: oklch(0.50 0.15 15);\n  --destructive-foreground: oklch(0.99 0.005 30);\n\n  /* Refined borders */\n  --border: oklch(0.88 0.02 30);\n  --input: oklch(0.88 0.02 30);\n  --ring: oklch(0.45 0.15 15);\n\n  /* Chart colors */\n  --chart-1: oklch(0.45 0.15 15);\n  --chart-2: oklch(0.65 0.12 70);\n  --chart-3: oklch(0.55 0.10 50);\n  --chart-4: oklch(0.50 0.08 30);\n  --chart-5: oklch(0.60 0.10 80);\n\n  /* Elegant radius */\n  --radius: 0.25rem;\n\n  /* Sidebar styling */\n  --sidebar: oklch(0.97 0.01 30);\n  --sidebar-foreground: oklch(0.15 0.02 30);\n  --sidebar-primary: oklch(0.45 0.15 15);\n  --sidebar-primary-foreground: oklch(0.98 0.005 30);\n  --sidebar-accent: oklch(0.94 0.015 30);\n  --sidebar-accent-foreground: oklch(0.30 0.02 30);\n  --sidebar-border: oklch(0.88 0.02 30);\n  --sidebar-ring: oklch(0.45 0.15 15);\n\n  /* Restaurant warm shadows */\n  --shadow-x: 0px;\n  --shadow-y: 3px;\n  --shadow-blur: 8px;\n  --shadow-spread: 0px;\n  --shadow-opacity: 0.08;\n  --shadow-color: #6b3030;\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  /* Smooth transitions */\n  a, button, input, select, textarea {\n    @apply transition-colors duration-200 ease-in-out;\n  }\n\n  /* Enhanced focus states */\n  :focus-visible {\n    @apply outline-2 outline-offset-2 outline-ring;\n  }\n\n  /* Smooth scrolling */\n  html {\n    scroll-behavior: smooth;\n  }\n\n  /* Custom scrollbar */\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-lg;\n    transition: background-color 0.2s;\n  }\n\n  /* Selection styling - burgundy tint */\n  ::selection {\n    @apply bg-primary/20 text-foreground;\n  }\n\n  /* Gradient text utility */\n  .gradient-text {\n    @apply bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent;\n    background-size: 200% auto;\n    animation: gradient-shift 3s ease infinite;\n  }\n\n  @keyframes gradient-shift {\n    0%, 100% { background-position: 0% center; }\n    50% { background-position: 100% center; }\n  }\n\n  /* Ken Burns effect for hero */\n  .animate-ken-burns {\n    animation: ken-burns 25s ease-out infinite alternate;\n  }\n\n  @keyframes ken-burns {\n    0% { transform: scale(1) translate(0, 0); }\n    100% { transform: scale(1.08) translate(-1%, -0.5%); }\n  }\n\n  /* Fade in animations */\n  .animate-fade-in {\n    animation: fade-in 0.8s ease-out forwards;\n  }\n\n  .animate-fade-in-up {\n    animation: fade-in-up 0.8s ease-out forwards;\n  }\n\n  @keyframes fade-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\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  .animation-delay-100 {\n    animation-delay: 100ms;\n  }\n\n  .animation-delay-200 {\n    animation-delay: 200ms;\n  }\n\n  .animation-delay-300 {\n    animation-delay: 300ms;\n  }\n\n  .animation-delay-500 {\n    animation-delay: 500ms;\n  }\n\n  /* Slow pulse animation */\n  .animate-pulse-slow {\n    animation: pulse-slow 3s ease-in-out infinite;\n  }\n\n  @keyframes pulse-slow {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.7; }\n  }\n}\n\n/* Hide Next.js dev error overlay */\nnextjs-portal {\n  display: none !important;\n}\n","language":"css","lineCount":249,"type":"globals"},{"path":"src/app/preview/restaurant/page.tsx","code":"\"use client\";\n\nimport Hero from \"@/components/templates/restaurant/Hero\";\nimport Awards from \"@/components/templates/restaurant/Awards\";\nimport About from \"@/components/templates/restaurant/About\";\nimport ParallaxQuote from \"@/components/templates/restaurant/ParallaxQuote\";\nimport Menu from \"@/components/templates/restaurant/Menu\";\nimport Specials from \"@/components/templates/restaurant/Specials\";\nimport Gallery from \"@/components/templates/restaurant/Gallery\";\nimport Testimonials from \"@/components/templates/restaurant/Testimonials\";\nimport Hours from \"@/components/templates/restaurant/Hours\";\nimport Reservation from \"@/components/templates/restaurant/Reservation\";\n\nconst sections = [\n  { id: \"hero\", name: \"Hero\", Component: Hero },\n  { id: \"awards\", name: \"Awards\", Component: Awards },\n  { id: \"about\", name: \"About\", Component: About },\n  { id: \"parallax-quote\", name: \"Parallax Quote\", Component: ParallaxQuote },\n  { id: \"menu\", name: \"Menu\", Component: Menu },\n  { id: \"specials\", name: \"Specials\", Component: Specials },\n  { id: \"gallery\", name: \"Gallery\", Component: Gallery },\n  { id: \"testimonials\", name: \"Testimonials\", Component: Testimonials },\n  { id: \"hours\", name: \"Hours\", Component: Hours },\n  { id: \"reservation\", name: \"Reservation\", Component: Reservation },\n];\n\nexport default function RestaurantTemplate() {\n  return (\n    <div className=\"min-h-screen bg-foreground\">\n      {sections.map(({ id, Component }) => (\n        <Component key={id} />\n      ))}\n    </div>\n  );\n}\n","language":"tsx","lineCount":36,"type":"page"},{"path":"src/app/preview/restaurant/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/restaurant/menu/page.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\nimport Image from \"next/image\";\nimport Placeholder from \"@/components/placeholders/Placeholder\";\nimport {\n  MENU_HERO,\n  MENU_CATEGORIES,\n  MENU_APPETIZERS,\n  MENU_MAINS,\n  MENU_DESSERTS,\n  MENU_DRINKS,\n  MENU_FOOTER,\n} from \"@/components/templates/restaurant/content/menu\";\n\nfunction MenuCard({\n  name,\n  description,\n  price,\n  tag,\n}: {\n  name: string;\n  description: string;\n  price: string;\n  tag?: string;\n}) {\n  return (\n    <div className=\"group flex gap-4 p-4 rounded-sm hover:bg-background/5 transition-colors duration-300\">\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"flex-1\">\n            <div className=\"flex items-center gap-3\">\n              <h3 className=\"font-serif text-lg text-background group-hover:text-primary transition-colors\">\n                {name}\n              </h3>\n              {tag && (\n                <span className=\"px-2 py-0.5 text-[10px] tracking-wider uppercase bg-primary/50 text-primary rounded-sm\">\n                  {tag}\n                </span>\n              )}\n            </div>\n            <p className=\"text-background/80 text-sm mt-1\">{description}</p>\n          </div>\n          <div className=\"flex items-center gap-2 flex-shrink-0\">\n            <span className=\"hidden sm:block w-12 border-b border-dotted border-border\" />\n            <span className=\"font-serif text-primary text-lg\">{price}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function MenuPage() {\n  const [activeCategory, setActiveCategory] = useState(\"appetizers\");\n\n  return (\n    <div className=\"min-h-screen bg-foreground pt-32 pb-24\">\n      <Placeholder agent_prompt=\"TODO(CODING_AGENT): Generate menu page including heading, description, and menu items for each category\">\n      {/* Hero Section */}\n      <section className=\"relative py-16 mb-8\">\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <Image\n            src={MENU_HERO.image.url}\n            alt={MENU_HERO.image.description}\n            fill\n            className=\"object-cover opacity-20\"\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-b from-foreground via-foreground/80 to-foreground\" />\n        </div>\n        <div className=\"relative max-w-5xl mx-auto px-6 lg:px-8 text-center\">\n          <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n            {MENU_HERO.label}\n          </span>\n          <h1 className=\"font-serif text-5xl md:text-6xl text-background mt-4 mb-6\">\n            {MENU_HERO.heading}\n          </h1>\n          <p className=\"text-background/80 max-w-xl mx-auto\">\n            {MENU_HERO.description}\n          </p>\n          <div className=\"w-16 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent mx-auto mt-8\" />\n        </div>\n      </section>\n\n      {/* Menu Content */}\n      <div className=\"max-w-5xl mx-auto px-6 lg:px-8\">\n        {/* Category Tabs */}\n        <div className=\"flex flex-wrap justify-center gap-2 mb-12 sticky top-20 z-10 py-4 bg-foreground/90 backdrop-blur-sm\">\n          {MENU_CATEGORIES.map((category) => (\n            <button\n              key={category.id}\n              onClick={() => setActiveCategory(category.id)}\n              className={`px-6 py-3 text-xs tracking-[0.15em] uppercase transition-all duration-300 ${\n                activeCategory === category.id\n                  ? \"bg-primary/80 text-background border-primary/50\"\n                  : \"bg-transparent text-background/80 hover:text-background border-background/20 hover:border-background/30\"\n              } border`}\n            >\n              {category.name}\n            </button>\n          ))}\n        </div>\n\n        {/* Menu Items */}\n          <div className={`space-y-1 ${activeCategory === \"appetizers\" ? \"\" : \"hidden\"}`}>\n            {MENU_APPETIZERS.map((item, index) => (\n              <MenuCard\n                key={index}\n                name={item.name}\n                description={item.description}\n                price={item.price}\n                tag={item.tag}\n              />\n            ))}\n          </div>\n          <div className={`space-y-1 ${activeCategory === \"mains\" ? \"\" : \"hidden\"}`}>\n            {MENU_MAINS.map((item, index) => (\n              <MenuCard\n                key={index}\n                name={item.name}\n                description={item.description}\n                price={item.price}\n                tag={item.tag}\n              />\n            ))}\n          </div>\n          <div className={`space-y-1 ${activeCategory === \"desserts\" ? \"\" : \"hidden\"}`}>\n            {MENU_DESSERTS.map((item, index) => (\n              <MenuCard\n                key={index}\n                name={item.name}\n                description={item.description}\n                price={item.price}\n                tag={item.tag}\n              />\n            ))}\n          </div>\n          <div className={`space-y-1 ${activeCategory === \"drinks\" ? \"\" : \"hidden\"}`}>\n            {MENU_DRINKS.map((item, index) => (\n              <MenuCard\n                key={index}\n                name={item.name}\n                description={item.description}\n                price={item.price}\n                tag={item.tag}\n              />\n            ))}\n          </div>\n\n        {/* Dietary Note */}\n        <div className=\"mt-16 p-6 border border-background/20 rounded-sm text-center\">\n          <p className=\"text-background/80 text-sm\">\n            {MENU_FOOTER.dietaryNote}\n          </p>\n        </div>\n\n        {/* Wine Pairing Note */}\n        <div className=\"mt-8 text-center\">\n          <p className=\"text-background/80 text-sm mb-4\">\n            {MENU_FOOTER.winePairingNote}\n          </p>\n          <a\n            href=\"/preview/restaurant#contact\"\n            className=\"inline-block px-8 py-4 bg-primary/90 hover:bg-primary text-background text-sm tracking-[0.15em] uppercase border border-primary/50 transition-all duration-300\"\n          >\n            {MENU_FOOTER.ctaText}\n          </a>\n        </div>\n      </div>\n      </Placeholder>\n    </div>\n  );\n}\n","language":"tsx","lineCount":174,"type":"page"},{"path":"src/app/preview/restaurant/layout.tsx","code":"import type { Metadata } from \"next\";\nimport Navigation from \"@/components/templates/restaurant/Navigation\";\nimport Footer from \"@/components/templates/restaurant/Footer\";\nimport \"./globals.css\";\n\nexport const metadata: Metadata = {\n  title: \"Restaurant Template - Breezy Templates\",\n  description: \"An elegant, warm design with rich burgundy tones for fine dining establishments\",\n};\n\nexport default function RestaurantTemplateLayout({\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/restaurant/About.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { ABOUT } from \"./content/home\";\n\nexport default function About() {\n  return (\n    <section id=\"about\" className=\"py-24 lg:py-32 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n          {/* Image Side */}\n          <div className=\"relative\">\n            <div className=\"aspect-[4/5] relative rounded-sm overflow-hidden\">\n              <Image\n                src={ABOUT.image.url}\n                alt={ABOUT.image.description}\n                fill\n                className=\"object-cover\"\n              />\n            </div>\n            {/* Decorative frame */}\n            <div className=\"absolute -bottom-4 -right-4 w-full h-full border border-primary/20 rounded-sm -z-10\" />\n          </div>\n\n          {/* Content Side */}\n          <div className=\"lg:pl-8\">\n            <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n              {ABOUT.label}\n            </span>\n            <h2 className=\"font-serif text-4xl md:text-5xl text-foreground mt-4 mb-8\">\n              {ABOUT.heading}\n              <span className=\"block text-primary/90 italic\">\n                {ABOUT.headingAccent}\n              </span>\n            </h2>\n\n            <div className=\"w-16 h-px bg-gradient-to-r from-primary/40 to-transparent mb-8\" />\n\n            <div className=\"space-y-6 text-muted-foreground text-base leading-relaxed\">\n              {ABOUT.paragraphs.map((paragraph, index) => (\n                <p key={index}>{paragraph}</p>\n              ))}\n            </div>\n\n            {/* Stats */}\n            <div className=\"grid grid-cols-3 gap-8 mt-12 pt-8 border-t border-border\">\n              {ABOUT.stats.map((stat, index) => (\n                <div key={index}>\n                  <span className=\"block font-serif text-3xl text-primary\">{stat.value}</span>\n                  <span className=\"text-muted-foreground text-xs tracking-wider uppercase\">\n                    {stat.label}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":63,"type":"component"},{"path":"src/components/templates/restaurant/Awards.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Award, Star, Newspaper } from \"lucide-react\";\nimport { AWARDS } from \"./content/home\";\n\nconst iconMap: Record<string, React.ReactNode> = {\n  star: <Star className=\"w-8 h-8 text-primary\" />,\n  award: <Award className=\"w-8 h-8 text-primary\" />,\n  newspaper: <Newspaper className=\"w-8 h-8 text-primary\" />,\n  stars: (\n    <div className=\"flex\">\n      <Star className=\"w-4 h-4 text-primary fill-primary\" />\n      <Star className=\"w-4 h-4 text-primary fill-primary\" />\n    </div>\n  ),\n};\n\nexport default function Awards() {\n  return (\n    <section className=\"py-16 bg-background border-y border-border\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12\">\n          {AWARDS.items.map((award, index) => (\n            <div key={index} className=\"text-center group\">\n              <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-primary/30 border border-primary/30 flex items-center justify-center group-hover:border-primary/50 transition-colors\">\n                {iconMap[award.icon]}\n              </div>\n              <h3 className=\"font-serif text-lg text-foreground mb-1\">{award.title}</h3>\n              <p className=\"text-muted-foreground text-sm\">{award.subtitle}</p>\n            </div>\n          ))}\n        </div>\n\n        {/* Press Quotes */}\n        <div className=\"mt-16 pt-12 border-t border-border\">\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {AWARDS.pressQuotes.map((item, index) => (\n              <div key={index} className=\"text-center\">\n                <p className=\"text-muted-foreground italic text-sm leading-relaxed mb-4\">\n                  &ldquo;{item.quote}&rdquo;\n                </p>\n                <span className=\"text-primary/60 text-xs tracking-wider uppercase\">\n                  — {item.source}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":54,"type":"component"},{"path":"src/components/templates/restaurant/Footer.tsx","code":"import React from \"react\";\nimport Link from \"next/link\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport PoweredByBreezy from \"@/components/PoweredByBreezy\";\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-background border-t border-border py-16\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 md:grid-cols-4 gap-12\">\n          {/* Brand */}\n          <div className=\"col-span-1 md:col-span-2\">\n            <div className=\"mb-6\">\n              <h3 className=\"font-serif text-2xl text-foreground tracking-wide\">\n                {PROFESSIONAL_NAME}\n              </h3>\n              <span className=\"text-primary/60 text-xs tracking-[0.3em] uppercase\">\n                Ristorante\n              </span>\n            </div>\n            <div className=\"w-12 h-px bg-gradient-to-r from-primary/40 to-transparent mb-6\" />\n            <p className=\"text-muted-foreground text-sm tracking-wider mb-6 max-w-md leading-relaxed\">\n              An intimate culinary destination where passion meets craft. \n              Join us for an unforgettable dining experience.\n            </p>\n            {PROFESSIONAL_ADDRESS && (\n              <p className=\"text-muted-foreground text-sm tracking-wider mb-2\">\n                {PROFESSIONAL_ADDRESS}\n              </p>\n            )}\n            {PROFESSIONAL_PHONE && (\n              <a\n                href={`tel:${PROFESSIONAL_PHONE}`}\n                className=\"text-muted-foreground hover:text-primary block text-sm tracking-wider transition-colors duration-300\"\n              >\n                {formatPhoneNumber(PROFESSIONAL_PHONE)}\n              </a>\n            )}\n            {PROFESSIONAL_EMAIL && (\n              <a\n                href={`mailto:${PROFESSIONAL_EMAIL}`}\n                className=\"text-muted-foreground hover:text-primary block text-sm tracking-wider transition-colors duration-300\"\n              >\n                {PROFESSIONAL_EMAIL}\n              </a>\n            )}\n          </div>\n\n          {/* Navigation */}\n          <div>\n            <h4 className=\"text-muted-foreground text-xs tracking-[0.3em] uppercase mb-6\">\n              Navigation\n            </h4>\n            <div className=\"space-y-4\">\n              <Link\n                href=\"/preview/restaurant\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                Home\n              </Link>\n              <Link\n                href=\"/preview/restaurant#about\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                About\n              </Link>\n              <Link\n                href=\"/preview/restaurant/menu\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                Menu\n              </Link>\n              <Link\n                href=\"/preview/restaurant#gallery\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                Gallery\n              </Link>\n              <Link\n                href=\"/preview/restaurant#contact\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                Reservations\n              </Link>\n            </div>\n          </div>\n\n          {/* Connect */}\n          <div>\n            <h4 className=\"text-muted-foreground text-xs tracking-[0.3em] uppercase mb-6\">\n              Connect\n            </h4>\n            <div className=\"space-y-4\">\n              {PROFESSIONAL_SOCIAL_LINKS?.instagram && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.instagram}\n                  className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n                >\n                  Instagram\n                </a>\n              )}\n              {PROFESSIONAL_SOCIAL_LINKS?.facebook && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.facebook}\n                  className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n                >\n                  Facebook\n                </a>\n              )}\n              <a\n                href=\"#\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                OpenTable\n              </a>\n              <a\n                href=\"#\"\n                className=\"block text-muted-foreground hover:text-primary text-sm tracking-wider transition-colors duration-300\"\n              >\n                Yelp\n              </a>\n            </div>\n\n            {/* Hours quick reference */}\n            <div className=\"mt-8\">\n              <h4 className=\"text-muted-foreground text-xs tracking-[0.3em] uppercase mb-4\">\n                Hours\n              </h4>\n              <p className=\"text-muted-foreground text-sm tracking-wider\">\n                Tue-Thu: 5pm - 10pm\n              </p>\n              <p className=\"text-muted-foreground text-sm tracking-wider\">\n                Fri-Sat: 5pm - 11pm\n              </p>\n              <p className=\"text-muted-foreground text-sm tracking-wider\">\n                Sun: 11am - 9pm\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-border mt-12 pt-8\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n            <p className=\"text-muted-foreground text-xs tracking-[0.2em] text-center md:text-left\">\n              © {currentYear} {PROFESSIONAL_NAME}. All rights reserved.\n            </p>\n            <div className=\"flex flex-wrap items-center justify-center gap-4 text-muted-foreground text-xs tracking-wider\">\n              <a href=\"#\" className=\"hover:text-primary transition-colors\">Privacy Policy</a>\n              <a href=\"#\" className=\"hover:text-primary transition-colors\">Terms of Service</a>\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      </div>\n    </footer>\n  );\n}\n","language":"tsx","lineCount":170,"type":"component"},{"path":"src/components/templates/restaurant/Gallery.tsx","code":"\"use client\";\n\nimport React, { useRef, useEffect, useState } from \"react\";\nimport Image from \"next/image\";\nimport { GALLERY } from \"./content/home\";\n\nfunction GalleryImage({\n  image,\n  alt,\n  className,\n  delay = 0,\n}: {\n  image: { url: string; description: string };\n  alt: string;\n  className: string;\n  delay?: number;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.2 }\n    );\n\n    if (ref.current) {\n      observer.observe(ref.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={`${className} group relative rounded-sm overflow-hidden cursor-pointer`}\n      style={{\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible ? \"translateY(0)\" : \"translateY(20px)\",\n        transition: `all 0.6s ease-out ${delay}ms`,\n      }}\n    >\n      <Image\n        src={image.url}\n        alt={alt}\n        fill\n        className=\"object-cover transition-transform duration-700 group-hover:scale-110\"\n      />\n      <div className=\"absolute inset-0 bg-foreground/0 group-hover:bg-foreground/30 transition-colors duration-300\" />\n\n\n      {/* Hover overlay with caption */}\n      <div className=\"absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n        <span className=\"text-background text-sm font-light tracking-wider bg-foreground/30 backdrop-blur-sm rounded px-3 py-1.5\">{alt}</span>\n      </div>\n    </div>\n  );\n}\n\nexport default function Gallery() {\n  return (\n    <section id=\"gallery\" className=\"py-24 lg:py-32 bg-foreground\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"text-center mb-16\">\n          <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n            {GALLERY.label}\n          </span>\n          <h2 className=\"font-serif text-4xl md:text-5xl text-background mt-4 mb-4\">\n            {GALLERY.heading}\n          </h2>\n          <div className=\"w-16 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent mx-auto\" />\n        </div>\n\n        {/* Bento Grid Gallery */}\n        <div className=\"grid grid-cols-12 grid-rows-6 gap-3 h-[600px] md:h-[700px]\">\n          {GALLERY.images.map((item, index) => (\n            <GalleryImage\n              key={index}\n              image={item.image}\n              alt={item.alt}\n              className={item.className}\n              delay={item.delay}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":98,"type":"component"},{"path":"src/components/templates/restaurant/Hero.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { ChevronDown } from \"lucide-react\";\nimport SocialProof from \"./SocialProof\";\nimport {\n  PROFESSIONAL_NAME,\n  PROFESSIONAL_TAGLINE,\n} from \"@/professionalConstants\";\nimport { HERO } from \"./content/home\";\n\nexport default function Hero() {\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden\">\n      {/* Background Image with Ken Burns Effect */}\n      <div className=\"absolute inset-0\">\n        <Image\n          src={HERO.image.url}\n          alt={HERO.image.description}\n          fill\n          priority\n          className=\"object-cover animate-ken-burns\"\n        />\n        {/* Gradient overlays */}\n        <div className=\"absolute inset-0 bg-gradient-to-b from-foreground/60 via-foreground/30 to-foreground/70\" />\n        <div className=\"absolute inset-0 bg-gradient-to-r from-foreground/40 to-transparent\" />\n      </div>\n\n      {/* Main Content */}\n      <div className=\"relative z-10 flex flex-col justify-center items-center min-h-screen px-6 text-center\">\n        {/* Decorative element */}\n        <div className=\"mb-8 animate-fade-in\">\n          <div className=\"w-px h-16 bg-gradient-to-b from-transparent via-primary/60 to-transparent mx-auto\" />\n        </div>\n\n          <div className=\"bg-foreground/25 backdrop-blur-sm rounded-2xl px-8 py-10 md:px-12 md:py-14\">\n            {/* Tagline */}\n            <p className=\"text-primary/80 text-xs md:text-sm tracking-[0.4em] uppercase mb-6 animate-fade-in-up\">\n              {PROFESSIONAL_TAGLINE || HERO.tagline}\n            </p>\n\n            {/* Main Title */}\n            <h1 className=\"font-serif text-5xl md:text-7xl lg:text-8xl text-background tracking-wide mb-4 animate-fade-in-up animation-delay-100\">\n              {PROFESSIONAL_NAME}\n            </h1>\n\n            {/* Subtitle */}\n            <p className=\"text-background/80 text-sm md:text-base tracking-[0.2em] uppercase mb-12 animate-fade-in-up animation-delay-200\">\n              {HERO.subtitle}\n            </p>\n\n            {/* CTA Buttons */}\n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up animation-delay-300\">\n              <a\n                href=\"/preview/restaurant/menu\"\n                className=\"px-8 py-4 bg-primary/90 hover:bg-primary text-background text-sm tracking-[0.15em] uppercase border border-primary/50 transition-all duration-300\"\n              >\n                {HERO.viewMenuText}\n              </a>\n              <a\n                href=\"#contact\"\n                className=\"px-8 py-4 bg-transparent hover:bg-background/10 text-background text-sm tracking-[0.15em] uppercase border border-background/30 hover:border-background/50 transition-all duration-300\"\n              >\n                {HERO.reserveText}\n              </a>\n            </div>\n          </div>\n\n        {/* Social Proof - Bottom Right */}\n        <div className=\"absolute bottom-24 right-6 sm:right-12 lg:right-20 animate-fade-in animation-delay-500\">\n          <SocialProof />\n        </div>\n\n        {/* Scroll Indicator */}\n        <div className=\"absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce\">\n          <ChevronDown className=\"w-6 h-6 text-background/80\" />\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":83,"type":"component"},{"path":"src/components/templates/restaurant/Hours.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Clock, MapPin, Phone } from \"lucide-react\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_ADDRESS,\n} from \"@/professionalConstants\";\nimport { HOURS } from \"./content/home\";\n\nexport default function Hours() {\n  return (\n    <section className=\"py-24 lg:py-32 bg-foreground\">\n      <div className=\"max-w-5xl mx-auto px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20\">\n          {/* Hours */}\n          <div>\n            <div className=\"flex items-center gap-3 mb-6\">\n              <Clock className=\"w-5 h-5 text-primary\" />\n              <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n                {HOURS.label}\n              </span>\n            </div>\n\n            <div className=\"space-y-4\">\n              {HOURS.schedule.map((item, index) => (\n                <div key={index} className=\"flex justify-between items-center py-3 border-b border-background/10\">\n                  <span className=\"text-background\">{item.days}</span>\n                  <span className=\"text-background/80\">{item.hours}</span>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"mt-8 p-4 bg-primary/20 border border-primary/30 rounded-sm\">\n              <p className=\"text-primary/80 text-sm\">\n                <strong>{HOURS.brunchNote}</strong>\n              </p>\n            </div>\n          </div>\n\n          {/* Location & Contact */}\n          <div>\n            <div className=\"flex items-center gap-3 mb-6\">\n              <MapPin className=\"w-5 h-5 text-primary\" />\n              <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n                {HOURS.location.label}\n              </span>\n            </div>\n\n            <div className=\"space-y-6\">\n              <div>\n                <p className=\"text-background text-lg mb-1\">\n                  {PROFESSIONAL_ADDRESS || \"123 Gourmet Avenue\"}\n                </p>\n                <p className=\"text-background/80\">\n                  {HOURS.location.addressLine2}\n                </p>\n              </div>\n\n              {PROFESSIONAL_PHONE && (\n                <div className=\"flex items-center gap-3\">\n                  <Phone className=\"w-4 h-4 text-primary/60\" />\n                  <a\n                    href={`tel:${PROFESSIONAL_PHONE}`}\n                    className=\"text-background/80 hover:text-primary transition-colors\"\n                  >\n                    {formatPhoneNumber(PROFESSIONAL_PHONE)}\n                  </a>\n                </div>\n              )}\n            </div>\n\n            {/* Map placeholder */}\n            <div className=\"mt-8 aspect-[4/3] rounded-sm overflow-hidden bg-card relative\">\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <div className=\"text-center\">\n                  <MapPin className=\"w-8 h-8 text-primary/40 mx-auto mb-2\" />\n                  <span className=\"text-background/80 text-sm\">Interactive Map</span>\n                </div>\n              </div>\n              {/* In production, this would be an actual map embed */}\n            </div>\n\n            {/* Parking note */}\n            <p className=\"mt-4 text-background/80 text-sm\">\n              {HOURS.location.parkingNote}\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":95,"type":"component"},{"path":"src/components/templates/restaurant/Menu.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { MENU } from \"./content/home\";\n\nexport default function Menu() {\n  return (\n    <section id=\"menu\" className=\"py-24 lg:py-32 bg-foreground\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n          {/* Image Side */}\n          <div className=\"relative\">\n            <div className=\"aspect-[4/5] relative rounded-sm overflow-hidden\">\n              <Image\n                src={MENU.image.url}\n                alt={MENU.image.description}\n                fill\n                className=\"object-cover\"\n              />\n            </div>\n            <div className=\"absolute -bottom-4 -left-4 w-full h-full border border-primary/20 rounded-sm -z-10\" />\n          </div>\n\n          {/* Content Side */}\n          <div>\n            <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n              {MENU.label}\n            </span>\n            <h2 className=\"font-serif text-4xl md:text-5xl text-background mt-4 mb-6\">\n              {MENU.heading}\n            </h2>\n            <p className=\"text-background/80 mb-8 leading-relaxed\">\n              {MENU.description}\n            </p>\n\n            {/* Featured Dishes */}\n            <div className=\"space-y-4 mb-10\">\n              {MENU.featuredDishes.map((dish, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center justify-between py-3 border-b border-background/10\"\n                >\n                  <div>\n                    <h3 className=\"font-serif text-lg text-background\">{dish.name}</h3>\n                    <p className=\"text-background/80 text-sm\">{dish.description}</p>\n                  </div>\n                  <span className=\"font-serif text-primary\">{dish.price}</span>\n                </div>\n              ))}\n            </div>\n\n            {/* View Full Menu CTA */}\n            <Link\n              href=\"/preview/restaurant/menu\"\n              className=\"inline-flex items-center gap-3 px-8 py-4 bg-primary/90 hover:bg-primary text-background text-sm tracking-[0.15em] uppercase border border-primary/50 transition-all duration-300 group\"\n            >\n              <span>{MENU.ctaText}</span>\n              <ArrowRight className=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" />\n            </Link>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":69,"type":"component"},{"path":"src/components/templates/restaurant/Navigation.tsx","code":"\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Phone, Calendar } from \"lucide-react\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n} from \"@/professionalConstants\";\nimport { NAVIGATION } from \"./content/home\";\n\nconst NAV_LINKS = [\n  { label: \"Home\", href: \"/preview/restaurant\" },\n  { label: \"About\", href: \"/preview/restaurant#about\" },\n  { label: \"Menu\", href: \"/preview/restaurant/menu\" },\n  { label: \"Gallery\", href: \"/preview/restaurant#gallery\" },\n  { label: \"Contact\", href: \"/preview/restaurant#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 = () => {\n      setScrolled(window.scrollY > 50);\n    };\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-500 ${\n        scrolled\n          ? \"bg-background/95 backdrop-blur-xl py-3\"\n          : \"bg-gradient-to-b from-foreground/70 to-transparent py-5\"\n      }`}\n    >\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        <div className=\"flex justify-between items-center\">\n          {/* Logo */}\n          <Link href=\"/preview/restaurant\">\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          {/* Desktop Links */}\n          <div className=\"hidden lg:flex items-center gap-10\">\n            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className={`group relative text-[11px] font-light transition-colors duration-300 uppercase tracking-[0.2em] py-2 ${\n                  scrolled\n                    ? \"text-muted-foreground hover:text-foreground\"\n                    : \"text-background/70 hover:text-background\"\n                }`}\n              >\n                {link.label}\n                <span className=\"absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-px bg-primary/60 group-hover:w-full transition-all duration-300\" />\n              </Link>\n            ))}\n          </div>\n\n          {/* Reservation CTA */}\n          <div className=\"hidden md:flex items-center gap-4\">\n            {PROFESSIONAL_PHONE && (\n              <a\n                href={`tel:${PROFESSIONAL_PHONE}`}\n                className={`flex items-center gap-2 text-[11px] tracking-[0.1em] transition-colors ${\n                  scrolled\n                    ? \"text-muted-foreground hover:text-foreground\"\n                    : \"text-background/70 hover:text-background\"\n                }`}\n              >\n                <Phone className=\"w-3.5 h-3.5\" />\n                <span>{formatPhoneNumber(PROFESSIONAL_PHONE)}</span>\n              </a>\n            )}\n            <a\n              href=\"#contact\"\n              className=\"flex items-center gap-2 text-[11px] text-background tracking-[0.1em] bg-primary/80 hover:bg-primary border border-primary/50 px-5 py-2.5 transition-all duration-300\"\n            >\n              <Calendar className=\"w-3.5 h-3.5\" />\n              <span>Reserve</span>\n            </a>\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            className={`lg:hidden p-2 transition-colors duration-500 ${scrolled ? \"text-foreground\" : \"text-background\"}`}\n            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n            aria-label=\"Toggle menu\"\n          >\n            <div className=\"w-6 h-4 flex flex-col justify-between\">\n              <span\n                className={`block w-full h-px bg-background transition-all duration-300 origin-center ${\n                  mobileMenuOpen ? \"rotate-45 translate-y-[7px]\" : \"\"\n                }`}\n              />\n              <span\n                className={`block w-full h-px bg-background transition-all duration-300 ${\n                  mobileMenuOpen ? \"opacity-0 scale-0\" : \"\"\n                }`}\n              />\n              <span\n                className={`block w-full h-px bg-background transition-all duration-300 origin-center ${\n                  mobileMenuOpen ? \"-rotate-45 -translate-y-[7px]\" : \"\"\n                }`}\n              />\n            </div>\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile Menu */}\n      <div\n        className={`lg:hidden overflow-hidden transition-all duration-500 ${\n          mobileMenuOpen ? \"max-h-[400px] opacity-100\" : \"max-h-0 opacity-0\"\n        }`}\n      >\n        <div className=\"bg-background/95 backdrop-blur-xl mt-4 mx-4 rounded-lg border border-border p-6\">\n          <div className=\"space-y-1\">\n            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className=\"block py-3 text-sm font-light text-muted-foreground hover:text-primary uppercase tracking-[0.15em] text-center transition-colors duration-300\"\n                onClick={() => setMobileMenuOpen(false)}\n                style={{ animationDelay: `${index * 50}ms` }}\n              >\n                {link.label}\n              </Link>\n            ))}\n          </div>\n\n          <a\n            href=\"#contact\"\n            className=\"flex items-center justify-center gap-2 mt-6 text-sm text-foreground tracking-[0.1em] bg-primary/80 border border-primary/50 py-4 rounded transition-all duration-300\"\n          >\n            <Calendar className=\"w-4 h-4\" />\n            <span>Make a Reservation</span>\n          </a>\n        </div>\n      </div>\n    </nav>\n  );\n}\n","language":"tsx","lineCount":150,"type":"component"},{"path":"src/components/templates/restaurant/ParallaxQuote.tsx","code":"\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport Image from \"next/image\";\nimport { PARALLAX_QUOTE } from \"./content/home\";\n\ninterface ParallaxQuoteProps {\n  className?: string;\n}\n\nexport default function ParallaxQuote({ className = \"\" }: ParallaxQuoteProps) {\n  const sectionRef = useRef<HTMLDivElement>(null);\n  const [scrollProgress, setScrollProgress] = useState(0);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      if (!sectionRef.current) return;\n\n      const rect = sectionRef.current.getBoundingClientRect();\n      const windowHeight = window.innerHeight;\n      const sectionHeight = rect.height;\n\n      // Progress through the section (0 to 1)\n      const scrollDistance = sectionHeight - windowHeight;\n      const scrolled = -rect.top;\n      const progress = Math.max(0, Math.min(1, scrolled / scrollDistance));\n\n      setScrollProgress(progress);\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    handleScroll();\n\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  // Animation values based on scroll progress\n  const imageScale = 1 + (scrollProgress * 0.15); // 1 to 1.15\n  const imageOpacity = 0.3 + (scrollProgress * 0.4); // 0.3 to 0.7\n  const line1Y = 60 - (scrollProgress * 120); // slides up\n  const line2Y = 100 - (scrollProgress * 140); // slides up slower\n  const line3Y = 140 - (scrollProgress * 160); // slides up even slower\n  const quoteOpacity = Math.min(1, scrollProgress * 2); // fades in first half\n  const statsOpacity = Math.max(0, (scrollProgress - 0.5) * 2); // fades in second half\n  const dividerWidth = scrollProgress * 100; // 0% to 100%\n\n  return (\n    <section\n      ref={sectionRef}\n      className={`relative h-[200vh] bg-foreground ${className}`}\n    >\n      {/* Sticky container */}\n      <div className=\"sticky top-0 h-screen flex items-center justify-center overflow-hidden\">\n        {/* Background image that scales */}\n        <div\n          className=\"absolute inset-0 transition-transform duration-100\"\n          style={{\n            transform: `scale(${imageScale})`,\n          }}\n        >\n          <Image\n            src={PARALLAX_QUOTE.image.url}\n            alt={PARALLAX_QUOTE.image.description}\n            fill\n            className=\"object-cover\"\n            style={{ opacity: imageOpacity }}\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-foreground via-foreground/60 to-foreground/40\" />\n        </div>\n\n        {/* Content */}\n        <div className=\"relative z-10 max-w-5xl mx-auto px-6 text-center\">\n          <div>\n            {/* Line 1 - Subtitle */}\n            <p\n              className=\"text-primary/80 text-xs md:text-sm tracking-[0.4em] uppercase mb-6\"\n              style={{\n                transform: `translateY(${line1Y}px)`,\n                opacity: quoteOpacity,\n                transition: \"transform 0.1s ease-out\",\n              }}\n            >\n              <span className=\"bg-foreground/25 backdrop-blur-sm rounded-full px-4 py-1.5 inline-block\">\n                {PARALLAX_QUOTE.label}\n              </span>\n            </p>\n\n            {/* Line 2 - Main headline */}\n            <h2\n              className=\"font-serif text-4xl md:text-6xl lg:text-7xl text-background leading-tight\"\n              style={{\n                transform: `translateY(${line2Y}px)`,\n                opacity: quoteOpacity,\n                transition: \"transform 0.1s ease-out\",\n              }}\n            >\n              <span className=\"bg-foreground/25 backdrop-blur-sm rounded-2xl px-6 py-2 inline-block\">\n                {PARALLAX_QUOTE.headline}\n              </span>\n            </h2>\n\n            {/* Line 3 - Accent line */}\n            <h2\n              className=\"font-serif text-4xl md:text-6xl lg:text-7xl text-primary/90 italic mt-2\"\n              style={{\n                transform: `translateY(${line3Y}px)`,\n                opacity: quoteOpacity,\n                transition: \"transform 0.1s ease-out\",\n              }}\n            >\n              <span className=\"bg-foreground/25 backdrop-blur-sm rounded-2xl px-6 py-2 inline-block\">\n                {PARALLAX_QUOTE.headlineAccent}\n              </span>\n            </h2>\n\n            {/* Animated divider */}\n            <div className=\"flex justify-center mt-10\">\n              <div\n                className=\"h-px bg-gradient-to-r from-transparent via-primary/60 to-transparent\"\n                style={{\n                  width: `${dividerWidth}%`,\n                  maxWidth: \"200px\",\n                  transition: \"width 0.1s ease-out\",\n                }}\n              />\n            </div>\n\n            {/* Stats that fade in later */}\n            <div\n              className=\"mt-12 grid grid-cols-3 gap-8 max-w-lg mx-auto bg-foreground/25 backdrop-blur-sm rounded-2xl px-6 py-6\"\n              style={{\n                opacity: statsOpacity,\n                transform: `translateY(${20 - (statsOpacity * 20)}px)`,\n                transition: \"opacity 0.1s ease-out, transform 0.1s ease-out\",\n              }}\n            >\n              {PARALLAX_QUOTE.stats.map((stat, index) => (\n                <div key={index} className=\"text-center\">\n                  <span className=\"block font-serif text-3xl md:text-4xl text-background\">{stat.value}</span>\n                  <span className=\"text-background/80 text-xs tracking-wider uppercase\">{stat.label}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Scroll indicator at bottom */}\n        <div\n          className=\"absolute bottom-8 left-1/2 -translate-x-1/2\"\n          style={{ opacity: 1 - scrollProgress }}\n        >\n          <div className=\"flex flex-col items-center gap-2\">\n            <span className=\"text-background/80 text-[10px] tracking-[0.3em] uppercase\">Scroll</span>\n            <div className=\"w-px h-8 bg-gradient-to-b from-background/30 to-transparent animate-pulse\" />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":161,"type":"component"},{"path":"src/components/templates/restaurant/Reservation.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport LeadForm from \"@/components/LeadForm\";\nimport { RESERVATION } from \"./content/home\";\n\nexport default function Reservation() {\n  return (\n    <section id=\"contact\" className=\"py-24 lg:py-32 bg-background\">\n      <div className=\"max-w-4xl mx-auto px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"text-center mb-16\">\n          <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n            {RESERVATION.label}\n          </span>\n          <h2 className=\"font-serif text-4xl md:text-5xl text-foreground mt-4 mb-4\">\n            {RESERVATION.heading}\n          </h2>\n          <div className=\"w-16 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent mx-auto mb-6\" />\n          <p className=\"text-muted-foreground max-w-xl mx-auto\">\n            {RESERVATION.description}\n          </p>\n        </div>\n\n        {/* Reservation Form */}\n        <LeadForm />\n\n        {/* Alternative Contact */}\n        <div className=\"mt-12 text-center\">\n          <p className=\"text-muted-foreground text-sm mb-4\">\n            {RESERVATION.alternativeContactText}\n          </p>\n          <div className=\"flex flex-wrap justify-center gap-6\">\n            <a\n              href={`tel:${RESERVATION.phone.replace(/[^0-9+]/g, '')}`}\n              className=\"text-primary/80 hover:text-primary text-sm tracking-wider transition-colors\"\n            >\n              {RESERVATION.phone}\n            </a>\n            <span className=\"text-muted-foreground\">|</span>\n            <a\n              href={`mailto:${RESERVATION.email}`}\n              className=\"text-primary/80 hover:text-primary text-sm tracking-wider transition-colors\"\n            >\n              {RESERVATION.email}\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":53,"type":"component"},{"path":"src/components/templates/restaurant/SocialProof.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Star } from \"lucide-react\";\n\nexport default function SocialProof() {\n  return (\n    <div className=\"flex items-center gap-4 bg-foreground/40 backdrop-blur-sm border border-background/20 rounded-sm px-5 py-3\">\n      {/* Rating */}\n      <div className=\"flex items-center gap-1.5\">\n        <div className=\"flex\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Star\n              key={i}\n              className=\"w-4 h-4 text-primary fill-primary\"\n            />\n          ))}\n        </div>\n        <span className=\"text-background font-serif text-lg ml-1\">4.9</span>\n      </div>\n      \n      <div className=\"w-px h-8 bg-background/20\" />\n      \n      {/* Reviews count */}\n      <div className=\"text-background/80 text-sm\">\n        <span className=\"text-background font-medium\">500+</span> reviews\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":31,"type":"component"},{"path":"src/components/templates/restaurant/Specials.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { Sparkles } from \"lucide-react\";\nimport { SPECIALS } from \"./content/home\";\n\nexport default function Specials() {\n  return (\n    <section className=\"py-24 lg:py-32 bg-background overflow-hidden\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n          {/* Section Header */}\n          <div className=\"text-center mb-16\">\n            <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n              {SPECIALS.label}\n            </span>\n            <h2 className=\"font-serif text-4xl md:text-5xl text-foreground mt-4 mb-4\">\n              {SPECIALS.heading}\n            </h2>\n            <div className=\"w-16 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent mx-auto\" />\n          </div>\n\n          {/* Featured Special - Large Card */}\n          <div className=\"relative rounded-sm overflow-hidden mb-8\">\n            <div className=\"grid grid-cols-1 lg:grid-cols-2\">\n              {/* Image */}\n              <div className=\"relative aspect-[4/3] lg:aspect-auto\">\n                <Image\n                  src={SPECIALS.featured.image.url}\n                  alt={SPECIALS.featured.image.description}\n                  fill\n                  className=\"object-cover\"\n                />\n                <div className=\"absolute inset-0 bg-gradient-to-r from-transparent to-foreground/50 lg:bg-gradient-to-l\" />\n              </div>\n\n              {/* Content */}\n              <div className=\"relative bg-card p-8 lg:p-12 flex flex-col justify-center\">\n                <div className=\"flex items-center gap-2 text-primary mb-4\">\n                  <Sparkles className=\"w-4 h-4\" />\n                  <span className=\"text-xs tracking-[0.3em] uppercase\">\n                    {SPECIALS.featured.badge}\n                  </span>\n                </div>\n                <h3 className=\"font-serif text-3xl md:text-4xl text-foreground mb-4\">\n                  {SPECIALS.featured.title}\n                </h3>\n                <p className=\"text-muted-foreground mb-6 leading-relaxed\">\n                  {SPECIALS.featured.description}\n                </p>\n                <div className=\"flex items-center justify-between pt-6 border-t border-border\">\n                  <div>\n                    <span className=\"block text-muted-foreground text-xs uppercase tracking-wider\">\n                      {SPECIALS.featured.priceLabel}\n                    </span>\n                    <span className=\"font-serif text-2xl text-primary\">{SPECIALS.featured.price}</span>\n                  </div>\n                  <a\n                    href=\"#contact\"\n                    className=\"px-6 py-3 bg-primary/80 hover:bg-primary text-foreground text-sm tracking-[0.1em] uppercase border border-primary/50 transition-all\"\n                  >\n                    {SPECIALS.featured.ctaText}\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Secondary Specials */}\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            {SPECIALS.secondary.map((special, index) => (\n              <div\n                key={index}\n                className=\"group relative bg-card/50 border border-border rounded-sm p-6 hover:border-primary/20 transition-colors\"\n              >\n                <div className=\"flex items-center gap-2 text-primary/60 mb-3\">\n                  <span className=\"text-[10px] tracking-[0.2em] uppercase\">{special.days}</span>\n                </div>\n                <h3 className=\"font-serif text-xl text-foreground mb-2 group-hover:text-primary transition-colors\">\n                  {special.title}\n                </h3>\n                <p className=\"text-muted-foreground text-sm mb-4\">\n                  {special.description}\n                </p>\n                <span className=\"text-primary/80 text-sm\">{special.highlight}</span>\n              </div>\n            ))}\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":93,"type":"component"},{"path":"src/components/templates/restaurant/Testimonials.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Star } from \"lucide-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 lg:py-32 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"text-center mb-16\">\n          <span className=\"text-primary/60 text-xs tracking-[0.4em] uppercase\">\n            {TESTIMONIALS.label}\n          </span>\n          <h2 className=\"font-serif text-4xl md:text-5xl text-foreground mt-4 mb-4\">\n            {TESTIMONIALS.heading}\n          </h2>\n          <div className=\"w-16 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent mx-auto\" />\n        </div>\n\n        {/* Real Reviews Component */}\n        <RealReviews />\n\n        {/* Review Stats */}\n        <div className=\"mt-16 flex flex-wrap justify-center gap-8 md:gap-16 pt-8 border-t border-border\">\n          {TESTIMONIALS.stats.map((stat, index) => (\n            <div key={index} className=\"text-center\">\n              {stat.icon === \"star\" ? (\n                <div className=\"flex items-center justify-center gap-1 mb-2\">\n                  <Star className=\"w-5 h-5 text-primary fill-primary\" />\n                  <span className=\"font-serif text-2xl text-foreground\">{stat.value}</span>\n                </div>\n              ) : (\n                <span className=\"block font-serif text-2xl text-foreground mb-2\">{stat.value}</span>\n              )}\n              <span className=\"text-muted-foreground text-xs tracking-wider uppercase\">\n                {stat.label}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":48,"type":"component"},{"path":"src/components/templates/restaurant/content/about.tsx","code":"/**\n * About page content for the restaurant template.\n *\n * This page is currently a PagePlaceholder — the coding agent will build it out\n * and add content constants here (hero text, team bios, stats, CTA copy, etc.).\n */\n","language":"tsx","lineCount":7,"type":"component"},{"path":"src/components/templates/restaurant/content/home.tsx","code":"/**\n * Home page content for the restaurant template.\n * All editable text content is centralized here for click-to-edit functionality.\n */\n\nimport {\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  tagline: \"A Culinary Journey\",\n  subtitle: \"Fine Dining & Craft Cocktails\",\n  viewMenuText: \"View Menu\",\n  reserveText: \"Reserve a Table\",\n  image: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Awards Section\n// TODO(CODING_AGENT): Update awards, ratings, and press mentions for this restaurant\n// =============================================================================\n\nexport const AWARDS = {\n  items: [\n    {\n      icon: \"star\",\n      title: \"Michelin Star\",\n      subtitle: \"2024 Guide\",\n    },\n    {\n      icon: \"award\",\n      title: \"James Beard\",\n      subtitle: \"Semifinalist 2023\",\n    },\n    {\n      icon: \"newspaper\",\n      title: \"SF Chronicle\",\n      subtitle: \"Top 100 Restaurants\",\n    },\n    {\n      icon: \"stars\",\n      title: \"OpenTable\",\n      subtitle: \"Diners' Choice 2024\",\n    },\n  ],\n  pressQuotes: [\n    {\n      quote: \"A masterclass in modern fine dining...\",\n      source: \"San Francisco Magazine\",\n    },\n    {\n      quote: \"The city's most exciting new restaurant...\",\n      source: \"Eater SF\",\n    },\n    {\n      quote: \"An unforgettable culinary experience...\",\n      source: \"The Infatuation\",\n    },\n  ],\n};\n\n// =============================================================================\n// About Section\n// TODO(CODING_AGENT): Update restaurant story, heading, paragraphs, and stats\n// =============================================================================\n\nexport const ABOUT = {\n  label: \"Our Story\",\n  heading: \"A Passion for\",\n  headingAccent: \"Culinary Excellence\",\n  paragraphs: [\n    \"Nestled in the heart of the city, our restaurant offers an intimate dining experience where traditional techniques meet contemporary innovation. Every dish tells a story of carefully sourced ingredients and culinary artistry.\",\n    \"Our executive chef brings decades of experience from renowned kitchens around the world, crafting menus that celebrate seasonal flavors and local producers while honoring time-tested culinary traditions.\",\n  ],\n  stats: [\n    { value: \"15+\", label: \"Years of Excellence\" },\n    { value: \"3\", label: \"Michelin Stars\" },\n    { value: \"50k+\", label: \"Happy Guests\" },\n  ],\n  image: PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n};\n\n// =============================================================================\n// Parallax Quote Section\n// TODO(CODING_AGENT): Update restaurant philosophy statement and stats\n// =============================================================================\n\nexport const PARALLAX_QUOTE = {\n  label: \"Our Philosophy\",\n  headline: \"Where Every Bite\",\n  headlineAccent: \"Tells a Story\",\n  stats: [\n    { value: \"15\", label: \"Years\" },\n    { value: \"3\", label: \"Stars\" },\n    { value: \"50k\", label: \"Guests\" },\n  ],\n  image: PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n};\n\n// =============================================================================\n// Menu Preview Section\n// TODO(CODING_AGENT): Update menu heading, description, and featured dishes\n// =============================================================================\n\nexport const MENU = {\n  label: \"Culinary Creations\",\n  heading: \"Our Menu\",\n  description: \"Each dish is a celebration of flavor, crafted with passion using the finest seasonal ingredients from local farms and trusted purveyors.\",\n  ctaText: \"View Full Menu\",\n  featuredDishes: [\n    {\n      name: \"Filet Mignon\",\n      description: \"8oz prime beef tenderloin, truffle butter\",\n      price: \"$52\",\n    },\n    {\n      name: \"Lobster Risotto\",\n      description: \"Maine lobster, saffron, parmesan\",\n      price: \"$45\",\n    },\n    {\n      name: \"Duck Confit\",\n      description: \"Cherry gastrique, pomme purée\",\n      price: \"$42\",\n    },\n  ],\n  image: PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n};\n\n// =============================================================================\n// Specials Section\n// TODO(CODING_AGENT): Update specials content for this business\n// =============================================================================\n\nexport const SPECIALS = {\n  label: \"Limited Time\",\n  heading: \"Chef's Specials\",\n  featured: {\n    badge: \"This Week's Feature\",\n    title: \"Wagyu Beef Tasting\",\n    description: \"Experience our curated five-course Wagyu journey featuring A5 Japanese beef prepared in five distinct styles. From tartare to tataki, each course showcases the exceptional marbling and buttery texture that makes Wagyu legendary.\",\n    priceLabel: \"Per Person\",\n    price: \"$195\",\n    ctaText: \"Reserve Now\",\n    image: PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n  },\n  secondary: [\n    {\n      days: \"Monday - Wednesday\",\n      title: \"Wine Wednesday\",\n      description: \"Half-priced bottles from our reserve collection with any entrée\",\n      highlight: \"50% off select wines\",\n    },\n    {\n      days: \"Sunday\",\n      title: \"Sunday Brunch\",\n      description: \"Indulgent brunch menu with bottomless mimosas and live jazz\",\n      highlight: \"11am - 3pm\",\n    },\n    {\n      days: \"Daily\",\n      title: \"Happy Hour\",\n      description: \"Craft cocktails and small plates at the bar\",\n      highlight: \"4pm - 6pm\",\n    },\n  ],\n};\n\n// =============================================================================\n// Gallery Section\n// TODO(CODING_AGENT): Update gallery heading and image alt text for this restaurant\n// =============================================================================\n\nexport const GALLERY = {\n  label: \"Visual Journey\",\n  heading: \"Our Atmosphere\",\n  images: [\n    {\n      image: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n      alt: \"Elegant dining room\",\n      className: \"col-span-7 row-span-4\",\n      delay: 0,\n    },\n    {\n      image: PROFESSIONAL_IMAGES[1] as ProfessionalImage,\n      alt: \"Signature dishes\",\n      className: \"col-span-5 row-span-3\",\n      delay: 100,\n    },\n    {\n      image: PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n      alt: \"Our kitchen\",\n      className: \"col-span-4 row-span-2\",\n      delay: 200,\n    },\n    {\n      image: PROFESSIONAL_IMAGES[4] as ProfessionalImage,\n      alt: \"Bar area\",\n      className: \"col-span-4 row-span-3\",\n      delay: 150,\n    },\n    {\n      image: PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n      alt: \"Private dining\",\n      className: \"col-span-4 row-span-3\",\n      delay: 250,\n    },\n  ],\n};\n\n// =============================================================================\n// Testimonials Section\n// TODO(CODING_AGENT): Update testimonials heading and review stats\n// =============================================================================\n\nexport const TESTIMONIALS = {\n  label: \"Guest Experiences\",\n  heading: \"What Our Guests Say\",\n  stats: [\n    { icon: \"star\", value: \"4.9\", label: \"Google Rating\" },\n    { value: \"500+\", label: \"5-Star Reviews\" },\n    { value: \"#1\", label: \"Fine Dining in SF\" },\n  ],\n};\n\n// =============================================================================\n// Hours Section\n// TODO(CODING_AGENT): Update hours of operation and location details\n// =============================================================================\n\nexport const HOURS = {\n  label: \"Hours of Operation\",\n  schedule: [\n    { days: \"Monday\", hours: \"Closed\" },\n    { days: \"Tuesday - Thursday\", hours: \"5:00 PM - 10:00 PM\" },\n    { days: \"Friday - Saturday\", hours: \"5:00 PM - 11:00 PM\" },\n    { days: \"Sunday\", hours: \"11:00 AM - 9:00 PM\" },\n  ],\n  brunchNote: \"Brunch: Sundays 11am - 3pm\",\n  location: {\n    label: \"Find Us\",\n    addressLine2: \"San Francisco, CA 94102\",\n    parkingNote: \"Valet parking available. Street parking on nearby blocks.\",\n  },\n};\n\n// =============================================================================\n// Reservation Section\n// TODO(CODING_AGENT): Update reservation heading, description, and contact info\n// =============================================================================\n\nexport const RESERVATION = {\n  label: \"Join Us\",\n  heading: \"Make a Reservation\",\n  description: \"Reserve your table for an unforgettable dining experience. For parties of 8 or more, please call us directly.\",\n  alternativeContactText: \"Prefer to call? We're happy to help.\",\n  phone: \"(415) 555-1234\",\n  email: \"reservations@restaurant.com\",\n};\n","language":"tsx","lineCount":275,"type":"component"},{"path":"src/components/templates/restaurant/content/menu.tsx","code":"/**\n * Menu page content for the restaurant template.\n * All editable text content is centralized here for click-to-edit functionality.\n */\n\nimport {\n  PROFESSIONAL_IMAGES,\n  type ProfessionalImage,\n} from \"@/professionalConstants\";\n\n// =============================================================================\n// Menu Page Hero\n// TODO(CODING_AGENT): Update menu hero content for this business\n// =============================================================================\n\nexport const MENU_HERO = {\n  label: \"Culinary Creations\",\n  heading: \"Our Menu\",\n  description: \"Each dish is crafted with passion using the finest seasonal ingredients from local farms and trusted purveyors.\",\n  image: PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n};\n\n// =============================================================================\n// Menu Categories\n// =============================================================================\n\nexport const MENU_CATEGORIES = [\n  { id: \"appetizers\", name: \"Appetizers\" },\n  { id: \"mains\", name: \"Main Courses\" },\n  { id: \"desserts\", name: \"Desserts\" },\n  { id: \"drinks\", name: \"Drinks\" },\n];\n\n// =============================================================================\n// Menu Items — Appetizers\n// =============================================================================\n\nexport const MENU_APPETIZERS = [\n    {\n      name: \"Burrata & Heirloom Tomatoes\",\n      description: \"Fresh burrata, vine-ripened tomatoes, aged balsamic, basil oil, sea salt\",\n      price: \"$18\",\n      tag: \"Popular\",\n    },\n    {\n      name: \"Tuna Tartare\",\n      description: \"Sashimi-grade tuna, avocado mousse, sesame, crispy wonton\",\n      price: \"$22\",\n    },\n    {\n      name: \"French Onion Soup\",\n      description: \"Caramelized onions, rich beef broth, gruyère crouton\",\n      price: \"$14\",\n    },\n    {\n      name: \"Roasted Beet Salad\",\n      description: \"Golden and red beets, goat cheese, candied walnuts, arugula\",\n      price: \"$16\",\n    },\n    {\n      name: \"Crispy Calamari\",\n      description: \"Lightly fried squid, lemon aioli, marinara, fresh herbs\",\n      price: \"$17\",\n    },\n    {\n      name: \"Oysters on the Half Shell\",\n      description: \"Half dozen East Coast oysters, mignonette, cocktail sauce, lemon\",\n      price: \"$24\",\n      tag: \"Chef's Choice\",\n    },\n];\n\n// =============================================================================\n// Menu Items — Mains\n// =============================================================================\n\nexport const MENU_MAINS = [\n    {\n      name: \"Filet Mignon\",\n      description: \"8oz prime beef tenderloin, truffle butter, roasted garlic mash, asparagus\",\n      price: \"$52\",\n      tag: \"Chef's Choice\",\n    },\n    {\n      name: \"Pan-Seared Salmon\",\n      description: \"Wild-caught salmon, lemon beurre blanc, quinoa, broccolini\",\n      price: \"$38\",\n    },\n    {\n      name: \"Lobster Risotto\",\n      description: \"Maine lobster, arborio rice, saffron, parmesan, fresh herbs\",\n      price: \"$45\",\n      tag: \"Popular\",\n    },\n    {\n      name: \"Duck Confit\",\n      description: \"Slow-braised duck leg, cherry gastrique, pomme purée, haricots verts\",\n      price: \"$42\",\n    },\n    {\n      name: \"Rack of Lamb\",\n      description: \"New Zealand lamb, herb crust, mint pesto, roasted vegetables\",\n      price: \"$48\",\n    },\n    {\n      name: \"Mushroom Ravioli\",\n      description: \"House-made pasta, wild mushroom filling, sage brown butter, truffle oil\",\n      price: \"$32\",\n      tag: \"Vegetarian\",\n    },\n    {\n      name: \"Grilled Branzino\",\n      description: \"Mediterranean sea bass, olive tapenade, roasted fennel, citrus\",\n      price: \"$44\",\n    },\n    {\n      name: \"Beef Short Ribs\",\n      description: \"Slow-braised short ribs, red wine reduction, creamy polenta\",\n      price: \"$46\",\n    },\n];\n\n// =============================================================================\n// Menu Items — Desserts\n// =============================================================================\n\nexport const MENU_DESSERTS = [\n    {\n      name: \"Crème Brûlée\",\n      description: \"Classic vanilla bean custard, caramelized sugar, fresh berries\",\n      price: \"$12\",\n      tag: \"Signature\",\n    },\n    {\n      name: \"Chocolate Lava Cake\",\n      description: \"Warm molten chocolate center, vanilla bean ice cream\",\n      price: \"$14\",\n    },\n    {\n      name: \"Tiramisu\",\n      description: \"Espresso-soaked ladyfingers, mascarpone cream, cocoa\",\n      price: \"$13\",\n    },\n    {\n      name: \"Seasonal Fruit Tart\",\n      description: \"Buttery pastry, vanilla custard, fresh seasonal fruits\",\n      price: \"$11\",\n    },\n    {\n      name: \"Affogato\",\n      description: \"Vanilla gelato, hot espresso, amaretto\",\n      price: \"$10\",\n    },\n    {\n      name: \"Cheese Selection\",\n      description: \"Artisanal cheese board, honeycomb, nuts, seasonal fruit\",\n      price: \"$18\",\n    },\n];\n\n// =============================================================================\n// Menu Items — Drinks\n// =============================================================================\n\nexport const MENU_DRINKS = [\n    {\n      name: \"Signature Old Fashioned\",\n      description: \"Small batch bourbon, demerara, aromatic bitters, orange zest\",\n      price: \"$16\",\n      tag: \"Signature\",\n    },\n    {\n      name: \"Espresso Martini\",\n      description: \"Vodka, fresh espresso, coffee liqueur, vanilla\",\n      price: \"$15\",\n    },\n    {\n      name: \"Negroni\",\n      description: \"Gin, Campari, sweet vermouth, orange peel\",\n      price: \"$14\",\n    },\n    {\n      name: \"French 75\",\n      description: \"Gin, lemon, champagne, sugar\",\n      price: \"$16\",\n    },\n    {\n      name: \"Wine by the Glass\",\n      description: \"Ask your server about our curated wine list\",\n      price: \"$14+\",\n    },\n    {\n      name: \"Craft Mocktail\",\n      description: \"Non-alcoholic botanical blend, citrus, herbs\",\n      price: \"$10\",\n    },\n];\n\n// =============================================================================\n// Menu Page Footer Content\n// TODO(CODING_AGENT): Update menu footer content for this business\n// =============================================================================\n\nexport const MENU_FOOTER = {\n  dietaryNote: \"Please inform your server of any dietary restrictions or allergies. Many dishes can be modified to accommodate dietary needs.\",\n  winePairingNote: \"Ask about our sommelier-curated wine pairings for any course.\",\n  ctaText: \"Make a Reservation\",\n};\n","language":"tsx","lineCount":209,"type":"component"},{"path":"src/components/templates/restaurant/index.ts","code":"export { default as Hero } from \"./Hero\";\nexport { default as About } from \"./About\";\nexport { default as Menu } from \"./Menu\";\nexport { default as Specials } from \"./Specials\";\nexport { default as Gallery } from \"./Gallery\";\nexport { default as Testimonials } from \"./Testimonials\";\nexport { default as Reservation } from \"./Reservation\";\nexport { default as Hours } from \"./Hours\";\nexport { default as SocialProof } from \"./SocialProof\";\nexport { default as Awards } from \"./Awards\";\nexport { default as ParallaxQuote } from \"./ParallaxQuote\";\n","language":"ts","lineCount":12,"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":25,"globals":1,"pages":3,"components":17,"shared":3,"layouts":1,"totalLines":2608}}