import { SiteDesign } from '../state/SiteDesignContext';

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export type TemplateCategory = 'business' | 'creative' | 'personal' | 'community';

export interface TemplateComponent {
  type: string;
  props: Record<string, any>;
  children?: TemplateComponent[];
}

export interface TemplatePageContent {
  components: TemplateComponent[];
}

export interface TemplatePageDef {
  name: string;
  slug: string;
  content: TemplatePageContent;
}

export interface TemplateDefinition {
  id: string;
  name: string;
  category: TemplateCategory;
  description: string;
  thumbnail: string;
  isMultiPage: boolean;
  design: Partial<SiteDesign>;
  header: TemplatePageContent;
  footer: TemplatePageContent;
  pages: TemplatePageDef[];
}

// ---------------------------------------------------------------------------
// Thumbnail helper — generates a simple 200x150 SVG layout preview
// Shows header bar at top and footer bar at bottom
// ---------------------------------------------------------------------------

function thumb(
  primary: string,
  secondary: string,
  accent: string,
  bg: string = '#f5f5f5',
): string {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
    <rect width="200" height="150" fill="${bg}" rx="4"/>
    <rect y="0" width="200" height="22" fill="${secondary}" rx="4" />
    <rect x="0" y="18" width="200" height="4" fill="${secondary}" />
    <circle cx="16" cy="11" r="5" fill="${accent}" opacity="0.9"/>
    <rect x="26" y="8" width="28" height="6" rx="2" fill="${accent}" opacity="0.7"/>
    <rect x="120" y="8" width="16" height="6" rx="1" fill="${accent}" opacity="0.45"/>
    <rect x="140" y="8" width="16" height="6" rx="1" fill="${accent}" opacity="0.45"/>
    <rect x="160" y="6" width="30" height="10" rx="3" fill="${primary}" opacity="0.9"/>
    <rect y="22" width="200" height="50" fill="${primary}" opacity="0.85"/>
    <rect x="50" y="36" width="100" height="8" rx="2" fill="#fff" opacity="0.9"/>
    <rect x="60" y="49" width="80" height="5" rx="1" fill="#fff" opacity="0.5"/>
    <rect x="75" y="58" width="50" height="10" rx="3" fill="${accent}"/>
    <rect x="10" y="80" width="55" height="30" rx="3" fill="${secondary}" opacity="0.12"/>
    <rect x="72" y="80" width="55" height="30" rx="3" fill="${secondary}" opacity="0.12"/>
    <rect x="134" y="80" width="55" height="30" rx="3" fill="${secondary}" opacity="0.12"/>
    <rect x="10" y="115" width="180" height="4" rx="1" fill="${secondary}" opacity="0.06"/>
    <rect y="125" width="200" height="25" fill="${secondary}" rx="0"/>
    <rect x="0" y="146" width="200" height="4" fill="${secondary}" rx="4"/>
    <rect x="55" y="133" width="90" height="5" rx="1" fill="${accent}" opacity="0.4"/>
    <rect x="80" y="141" width="40" height="3" rx="1" fill="${accent}" opacity="0.2"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

// ---------------------------------------------------------------------------
// Shared header / footer builders using Logo + Menu components
// ---------------------------------------------------------------------------

function makeHeader(
  logoText: string,
  links: { text: string; href: string; isCta?: boolean }[],
  bgColor: string,
  textColor: string,
  primaryColor: string,
  ctaTextColor: string = '#ffffff',
): TemplatePageContent {
  return {
    components: [
      {
        type: 'Container',
        props: {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '16px 24px',
            backgroundColor: bgColor,
          },
          tag: 'header',
        },
        children: [
          {
            type: 'Logo',
            props: {
              type: 'text',
              text: logoText,
              href: '/',
              style: {
                fontSize: '24px',
                fontWeight: '700',
                color: textColor,
              },
            },
          },
          {
            type: 'Menu',
            props: {
              links: links.map((l) => ({
                text: l.text,
                href: l.href,
                isExternal: false,
                isCta: l.isCta ?? false,
              })),
              linkColor: textColor,
              ctaBgColor: primaryColor,
              ctaTextColor,
            },
          },
        ],
      },
    ],
  };
}

function makeFooterContent(
  brandName: string,
  bgColor: string,
  textColor: string,
  extras?: { tagline?: string; socialText?: string; contactText?: string },
): TemplatePageContent {
  const children: TemplateComponent[] = [];

  if (extras?.tagline) {
    children.push({
      type: 'TextBlock',
      props: {
        text: extras.tagline,
        style: { color: textColor, fontSize: '15px', marginBottom: '12px', opacity: '0.85' },
      },
    });
  }

  children.push({
    type: 'TextBlock',
    props: {
      text: `\u00a9 2026 ${brandName}. All rights reserved.`,
      style: { color: textColor, fontSize: '14px' },
    },
  });

  if (extras?.contactText) {
    children.push({
      type: 'TextBlock',
      props: {
        text: extras.contactText,
        style: { color: textColor, fontSize: '13px', marginTop: '8px', opacity: '0.7' },
      },
    });
  }

  if (extras?.socialText) {
    children.push({
      type: 'TextBlock',
      props: {
        text: extras.socialText,
        style: { color: textColor, fontSize: '13px', marginTop: '8px', opacity: '0.6' },
      },
    });
  }

  return {
    components: [
      {
        type: 'Container',
        props: {
          style: {
            backgroundColor: bgColor,
            color: textColor,
            padding: '40px 20px',
            textAlign: 'center',
          },
          tag: 'footer',
        },
        children,
      },
    ],
  };
}

// ===========================================================================
// BUSINESS TEMPLATES (5)
// ===========================================================================

// ---- 1. Restaurant --------------------------------------------------------

const restaurant: TemplateDefinition = {
  id: 'restaurant',
  name: 'Restaurant',
  category: 'business',
  description: 'Elegant restaurant site with menu, about, and reservations',
  thumbnail: thumb('#c9a96e', '#2c1810', '#d4a574', '#faf8f5'),
  isMultiPage: true,
  design: {
    primaryColor: '#c9a96e',
    secondaryColor: '#2c1810',
    accentColor: '#d4a574',
    headingFont: 'Playfair Display, serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#faf8f5',
    textColor: '#2c1810',
    navStyle: 'dark',
  },
  header: makeHeader(
    'La Maison',
    [
      { text: 'Home', href: '/' },
      { text: 'Menu', href: 'menu' },
      { text: 'About', href: 'about' },
      { text: 'Reserve', href: 'contact', isCta: true },
    ],
    '#2c1810',
    '#d4a574',
    '#c9a96e',
  ),
  footer: makeFooterContent('La Maison', '#2c1810', '#d4a574', {
    tagline: 'Fine dining in the heart of the city.',
    contactText: '123 Gourmet Avenue, Downtown \u00b7 (555) 234-5678',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Welcome to La Maison',
              subtitle: 'Fine dining in the heart of the city. Experience culinary artistry with locally-sourced ingredients and world-class hospitality.',
              buttonText: 'View Our Menu',
              buttonHref: 'menu',
              gradient: 'linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%)',
              style: { minHeight: '500px' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#faf8f5' } },
            children: [
              { type: 'Heading', props: { text: 'Our Story', level: 'h2', style: { textAlign: 'center', color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'For over 20 years, La Maison has been crafting unforgettable dining experiences. Our chefs blend classical French technique with bold, modern flavors to create dishes that surprise and delight.', style: { textAlign: 'center', maxWidth: '600px', margin: '0 auto', color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Farm to Table', description: 'We partner with local farms to bring the freshest seasonal ingredients to your plate.', icon: '\ud83c\udf3f' },
                { title: 'Award-Winning Chef', description: 'Chef Laurent brings two Michelin stars and 25 years of culinary passion.', icon: '\ud83d\udc68\u200d\ud83c\udf73' },
                { title: 'Private Dining', description: 'Intimate rooms available for celebrations, corporate events, and special occasions.', icon: '\ud83e\udd42' },
              ],
              style: { backgroundColor: '#faf8f5' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'What Our Guests Say', level: 'h2', style: { textAlign: 'center', color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: '"An unforgettable evening. The tasting menu was a journey through flavor that I will remember for years." \u2014 Sarah M., Food & Wine Magazine', style: { textAlign: 'center', maxWidth: '600px', margin: '0 auto', color: '#5c4030', lineHeight: '1.8', fontStyle: 'italic' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Reserve Your Table',
              description: 'Join us for an evening of exceptional food and warm hospitality. Reservations recommended.',
              buttonText: 'Book Now',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #2c1810 0%, #5c3a20 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Menu',
      slug: 'menu',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#faf8f5' } },
            children: [
              { type: 'Heading', props: { text: 'Our Menu', level: 'h1', style: { textAlign: 'center', color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Seasonal selections prepared with care', style: { textAlign: 'center', color: '#8a7060', fontStyle: 'italic', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Starters', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'French Onion Soup \u2014 Gruyere crouton, caramelized onions \u2014 $14\n\nTuna Tartare \u2014 Avocado, sesame, citrus ponzu \u2014 $18\n\nBurrata Salad \u2014 Heirloom tomatoes, basil, aged balsamic \u2014 $16', style: { color: '#5c4030', lineHeight: '2' } } },
              { type: 'Divider', props: { color: '#d4a574', thickness: '1px', style: { margin: '32px 0' } } },
              { type: 'Heading', props: { text: 'Main Courses', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Filet Mignon \u2014 Truffle butter, roasted vegetables, red wine jus \u2014 $48\n\nSeared Salmon \u2014 Lemon beurre blanc, asparagus, fingerling potatoes \u2014 $36\n\nMushroom Risotto \u2014 Wild mushrooms, parmesan, truffle oil \u2014 $28', style: { color: '#5c4030', lineHeight: '2' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#faf8f5' } },
            children: [
              { type: 'Heading', props: { text: 'Desserts', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Cr\u00e8me Br\u00fbl\u00e9e \u2014 Madagascar vanilla, caramelized sugar \u2014 $12\n\nChocolate Fondant \u2014 Warm center, raspberry coulis \u2014 $14\n\nCheese Board \u2014 Artisan selections, honeycomb, walnut bread \u2014 $18', style: { color: '#5c4030', lineHeight: '2' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Wine Pairings', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Our sommelier curates a wine list featuring over 200 selections from France, Italy, California, and beyond. Ask about our 5-course tasting menu with paired wines for a truly memorable experience.', style: { color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#faf8f5' } },
            children: [
              { type: 'Heading', props: { text: 'About La Maison', level: 'h1', style: { textAlign: 'center', color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Founded in 2005, La Maison was born from a passion for bringing authentic French cuisine to our community. What started as a small bistro has grown into one of the most celebrated dining destinations in the city.', style: { textAlign: 'center', maxWidth: '700px', margin: '0 auto', color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Meet Chef Laurent', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Chef Laurent Dubois trained at Le Cordon Bleu in Paris before honing his craft in Michelin-starred kitchens across Europe. His philosophy centers on respecting the ingredient and elevating simplicity into art.', style: { color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Two Michelin Stars', description: 'Awarded for excellence in culinary craft and outstanding guest experience.', icon: '\u2b50' },
                { title: 'Local Partnerships', description: 'We source from 15 local farms within a 50-mile radius of the restaurant.', icon: '\ud83c\udf3e' },
                { title: '20 Years of Service', description: 'Two decades of memorable evenings, celebrations, and shared meals.', icon: '\ud83c\udf7e' },
              ],
              style: { backgroundColor: '#faf8f5' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Visit Us', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Open Tuesday\u2013Sunday, 5:00 PM \u2013 10:30 PM\n123 Gourmet Avenue, Downtown\nValet parking available', style: { color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#faf8f5' } },
            children: [
              { type: 'Heading', props: { text: 'Reservations & Contact', level: 'h1', style: { textAlign: 'center', color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '123 Gourmet Avenue, Downtown\nPhone: (555) 234-5678\nEmail: reservations@lamaison.com\n\nOpen Tuesday\u2013Sunday, 5:00 PM \u2013 10:30 PM', style: { textAlign: 'center', color: '#5c4030', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Send Us a Message', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '20px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'TextareaField', props: { label: 'Message', placeholder: 'Tell us about your reservation needs...' } },
                  { type: 'FormButton', props: { text: 'Send Message', style: { backgroundColor: '#c9a96e', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#faf8f5', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Private Events', level: 'h2', style: { color: '#2c1810', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Our private dining room seats up to 24 guests and is perfect for birthdays, anniversaries, corporate dinners, and other special occasions. Contact our events team for custom menus and pricing.', style: { color: '#5c4030', lineHeight: '1.8', maxWidth: '600px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 2. Small Business ----------------------------------------------------

const smallBusiness: TemplateDefinition = {
  id: 'small-business',
  name: 'Small Business',
  category: 'business',
  description: 'Professional business site with services, about, and contact pages',
  thumbnail: thumb('#2563eb', '#1e293b', '#3b82f6', '#f8fafc'),
  isMultiPage: true,
  design: {
    primaryColor: '#2563eb',
    secondaryColor: '#1e293b',
    accentColor: '#3b82f6',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#f8fafc',
    textColor: '#1e293b',
    navStyle: 'dark',
  },
  header: makeHeader(
    'Apex Solutions',
    [
      { text: 'Home', href: '/' },
      { text: 'Services', href: 'services' },
      { text: 'About', href: 'about' },
      { text: 'Contact Us', href: 'contact', isCta: true },
    ],
    '#1e293b',
    '#e2e8f0',
    '#2563eb',
  ),
  footer: makeFooterContent('Apex Solutions', '#1e293b', '#94a3b8', {
    tagline: 'Strategic consulting and digital solutions for growing businesses.',
    contactText: '500 Business Park Drive, Suite 200 \u00b7 hello@apexsolutions.com',
    socialText: 'LinkedIn \u00b7 Twitter \u00b7 Facebook',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Grow Your Business With Confidence',
              subtitle: 'Strategic consulting and digital solutions tailored for small businesses. We help you compete with the big players.',
              buttonText: 'Our Services',
              buttonHref: 'services',
              gradient: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Strategy & Planning', description: 'Data-driven strategies that align with your business goals and market position.', icon: '\ud83d\udcca' },
                { title: 'Digital Marketing', description: 'SEO, social media, and PPC campaigns that deliver measurable results.', icon: '\ud83d\udcf1' },
                { title: 'Web Development', description: 'Modern, responsive websites that convert visitors into customers.', icon: '\ud83d\udcbb' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Trusted by 200+ Local Businesses', level: 'h2', style: { textAlign: 'center', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'From startups to established companies, we have helped businesses across every industry achieve their growth targets. Our client retention rate speaks for itself: 94%.', style: { textAlign: 'center', maxWidth: '650px', margin: '0 auto', color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'What Our Clients Say', level: 'h2', style: { textAlign: 'center', color: '#1e293b', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: '"Apex Solutions transformed our online presence. Within 6 months, our leads tripled and revenue grew by 45%." \u2014 Michael Torres, CEO of BrightPath Retail', style: { textAlign: 'center', maxWidth: '600px', margin: '0 auto', color: '#64748b', lineHeight: '1.8', fontStyle: 'italic' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Ready to Scale?',
              description: 'Schedule a free 30-minute consultation to discuss your business goals.',
              buttonText: 'Get in Touch',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Services',
      slug: 'services',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Our Services', level: 'h1', style: { textAlign: 'center', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Comprehensive solutions to help your business thrive in the digital age.', style: { textAlign: 'center', color: '#64748b', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Business Strategy', description: 'Market analysis, competitive positioning, and growth roadmaps tailored to your industry.', icon: '\ud83c\udfaf' },
                { title: 'Brand Identity', description: 'Logo design, brand guidelines, and visual identity that resonates with your audience.', icon: '\ud83c\udfa8' },
                { title: 'Website Design', description: 'Custom-built, mobile-friendly websites optimized for search engines and conversions.', icon: '\ud83c\udf10' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'SEO & Content', description: 'Keyword strategy, content creation, and technical SEO to boost your online visibility.', icon: '\ud83d\udd0d' },
                { title: 'Social Media', description: 'Platform management, content calendars, and community engagement strategies.', icon: '\ud83d\udce3' },
                { title: 'Analytics & Reporting', description: 'Monthly reports with actionable insights to track ROI and optimize campaigns.', icon: '\ud83d\udcc8' },
              ],
              style: { backgroundColor: '#ffffff', paddingTop: '0' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Our Process', level: 'h2', style: { color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '1. Discovery \u2014 We learn about your business, goals, and challenges.\n2. Strategy \u2014 We build a custom plan with clear milestones and KPIs.\n3. Execution \u2014 Our team implements across design, development, and marketing.\n4. Optimize \u2014 We measure results and continuously refine for growth.', style: { color: '#64748b', lineHeight: '2', maxWidth: '600px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Need a Custom Solution?',
              description: 'Every business is unique. Let us build a package that fits your needs and budget.',
              buttonText: 'Contact Us',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'About Apex Solutions', level: 'h1', style: { textAlign: 'center', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Founded in 2018, Apex Solutions is a boutique consulting firm dedicated to helping small and mid-sized businesses compete in an increasingly digital world. Our team combines deep industry expertise with cutting-edge tools to deliver results.', style: { textAlign: 'center', maxWidth: '700px', margin: '0 auto', color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '200+ Clients', description: 'Businesses across retail, healthcare, technology, and professional services.', icon: '\ud83e\udd1d' },
                { title: '94% Retention', description: 'Our clients stay because we deliver measurable, lasting results.', icon: '\u2b50' },
                { title: '15 Experts', description: 'Strategists, designers, developers, and marketers working as one team.', icon: '\ud83d\udc65' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Our Values', level: 'h2', style: { textAlign: 'center', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Transparency, measurable outcomes, and genuine partnership. We do not believe in vanity metrics or cookie-cutter strategies. Every recommendation we make is backed by data and tailored to your specific business context.', style: { textAlign: 'center', maxWidth: '650px', margin: '0 auto', color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Want to Join Our Team?',
              description: 'We are always looking for talented strategists, designers, and engineers.',
              buttonText: 'View Careers',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Get in Touch', level: 'h1', style: { textAlign: 'center', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '500 Business Park Drive, Suite 200\nPhone: (555) 987-6543\nEmail: hello@apexsolutions.com', style: { textAlign: 'center', color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Request a Consultation', level: 'h2', style: { color: '#1e293b', marginBottom: '20px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'InputField', props: { label: 'Company', placeholder: 'Company name' } },
                  { type: 'TextareaField', props: { label: 'How can we help?', placeholder: 'Tell us about your business goals...' } },
                  { type: 'FormButton', props: { text: 'Send Request', style: { backgroundColor: '#2563eb', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Office Hours', level: 'h3', style: { color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Monday \u2013 Friday: 9:00 AM \u2013 6:00 PM\nSaturday: By appointment\nSunday: Closed', style: { color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 3. SaaS Landing Page -------------------------------------------------

const saasLanding: TemplateDefinition = {
  id: 'saas-landing',
  name: 'SaaS Landing',
  category: 'business',
  description: 'Modern SaaS product landing page with features, social proof, and CTA',
  thumbnail: thumb('#7c3aed', '#0f172a', '#a78bfa', '#faf5ff'),
  isMultiPage: false,
  design: {
    primaryColor: '#7c3aed',
    secondaryColor: '#0f172a',
    accentColor: '#a78bfa',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#faf5ff',
    textColor: '#0f172a',
    navStyle: 'dark',
  },
  header: makeHeader(
    'FlowStack',
    [
      { text: 'Features', href: '#features' },
      { text: 'Pricing', href: '#pricing' },
      { text: 'Start Free', href: '#cta', isCta: true },
    ],
    '#0f172a',
    '#e2e8f0',
    '#7c3aed',
  ),
  footer: makeFooterContent('FlowStack, Inc.', '#0f172a', '#94a3b8', {
    tagline: 'Ship products faster with smart automation.',
    socialText: 'Twitter \u00b7 GitHub \u00b7 Discord \u00b7 LinkedIn',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Ship Products Faster',
              subtitle: 'FlowStack streamlines your development workflow with smart automation, real-time collaboration, and powerful integrations. Get from idea to launch in half the time.',
              buttonText: 'Start Free Trial',
              buttonHref: '#cta',
              gradient: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%)',
              style: { minHeight: '520px' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Trusted by 10,000+ development teams', level: 'h3', style: { textAlign: 'center', color: '#94a3b8', fontWeight: '400', fontSize: '16px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Smart Automation', description: 'Automate repetitive tasks with intelligent workflows that learn from your team patterns.', icon: '\u26a1' },
                { title: 'Real-Time Collab', description: 'Work together seamlessly with live cursors, inline comments, and instant sync.', icon: '\ud83d\udc65' },
                { title: '500+ Integrations', description: 'Connect with your favorite tools \u2014 GitHub, Slack, Jira, Figma, and hundreds more.', icon: '\ud83d\udd17' },
              ],
              style: { backgroundColor: '#faf5ff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Simple, Transparent Pricing', level: 'h2', style: { textAlign: 'center', color: '#0f172a', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Free for individuals. Pro plans start at $12/user/month. Enterprise pricing available.', style: { textAlign: 'center', color: '#64748b', marginBottom: '32px' } } },
              { type: 'ButtonLink', props: { text: 'View Pricing Details', href: '#pricing', style: { display: 'block', textAlign: 'center', padding: '12px 32px', backgroundColor: '#7c3aed', color: '#ffffff', borderRadius: '8px', fontWeight: '600', margin: '0 auto', maxWidth: '220px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Start Building Today',
              description: 'Join thousands of teams shipping better software. No credit card required.',
              buttonText: 'Create Free Account',
              buttonHref: '#cta',
              gradient: 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
            },
          },
        ],
      },
    },
  ],
};

// ---- 4. Agency ------------------------------------------------------------

const agency: TemplateDefinition = {
  id: 'agency',
  name: 'Agency',
  category: 'business',
  description: 'Bold creative agency site with portfolio, team, and contact pages',
  thumbnail: thumb('#f97316', '#0a0a0a', '#fb923c', '#171717'),
  isMultiPage: true,
  design: {
    primaryColor: '#f97316',
    secondaryColor: '#0a0a0a',
    accentColor: '#fb923c',
    headingFont: 'Montserrat, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#171717',
    textColor: '#fafafa',
    navStyle: 'dark',
  },
  header: makeHeader(
    'FORGE',
    [
      { text: 'Home', href: '/' },
      { text: 'Work', href: 'work' },
      { text: 'Team', href: 'team' },
      { text: 'Start a Project', href: 'contact', isCta: true },
    ],
    '#0a0a0a',
    '#fafafa',
    '#f97316',
  ),
  footer: makeFooterContent('FORGE Agency', '#0a0a0a', '#737373', {
    tagline: 'Built with passion. Designed to perform.',
    contactText: 'hello@forgeagency.com \u00b7 New York / London / Remote',
    socialText: 'Instagram \u00b7 Dribbble \u00b7 LinkedIn \u00b7 Twitter',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'We Build Brands That Move People',
              subtitle: 'FORGE is a creative agency specializing in branding, digital design, and marketing strategy for ambitious companies.',
              buttonText: 'See Our Work',
              buttonHref: 'work',
              gradient: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)',
              style: { minHeight: '550px' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Branding', description: 'Complete brand identity systems that tell your story and connect with your audience.', icon: '\ud83d\udd25' },
                { title: 'Digital Design', description: 'Websites, apps, and digital experiences that look stunning and perform brilliantly.', icon: '\u2726' },
                { title: 'Marketing', description: 'Campaigns that cut through the noise and deliver real business results.', icon: '\ud83d\udce1' },
              ],
              style: { backgroundColor: '#171717' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#0a0a0a', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Results That Speak', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: '150+ brands launched \u00b7 $2B+ in client revenue generated \u00b7 12 industry awards', style: { color: '#a3a3a3', fontSize: '18px', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Have a Project in Mind?',
              description: 'We would love to hear about it. Let us turn your vision into reality.',
              buttonText: 'Get in Touch',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Work',
      slug: 'work',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'Selected Work', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'A showcase of projects that pushed boundaries and delivered results.', style: { textAlign: 'center', color: '#a3a3a3', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'NovaTech Rebrand', description: 'Complete brand overhaul for a fintech startup, resulting in 340% increase in brand recognition.', icon: '\ud83d\ude80' },
                { title: 'Horizon App', description: 'Mobile app design and development for a travel company. 50K downloads in the first month.', icon: '\ud83d\udcf1' },
                { title: 'Summit Conference', description: 'Event branding, website, and marketing campaign for a 5,000-attendee tech conference.', icon: '\ud83c\udfd4\ufe0f' },
              ],
              style: { backgroundColor: '#0a0a0a' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'Our Approach', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Every project starts with understanding your audience, your goals, and your competitive landscape. We do not just make things look good \u2014 we engineer experiences that drive measurable business outcomes. From initial research to final deployment, our team stays embedded with yours.', style: { color: '#a3a3a3', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Want to See More?',
              description: 'We have case studies with detailed results for every project. Get in touch to learn more.',
              buttonText: 'Request Case Studies',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Team',
      slug: 'team',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'The Team', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Creatives, strategists, and builders united by a passion for craft.', style: { textAlign: 'center', color: '#a3a3a3', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Alex Rivera', description: 'Creative Director. 15 years of award-winning design across brand, digital, and experiential.', icon: '\ud83c\udfa8' },
                { title: 'Sam Chen', description: 'Head of Strategy. Former McKinsey consultant turned brand strategist.', icon: '\ud83e\udde0' },
                { title: 'Jordan Blake', description: 'Tech Lead. Full-stack developer obsessed with performance and beautiful code.', icon: '\u2699\ufe0f' },
              ],
              style: { backgroundColor: '#0a0a0a' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'Our Culture', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'We are a remote-first team of 22 people spread across 8 countries. We believe great work comes from diverse perspectives, deep trust, and the freedom to challenge conventional thinking. Every voice matters, from intern to partner.', style: { color: '#a3a3a3', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Join the Team',
              description: 'We are always looking for talented, ambitious people. Check out open roles or send us your portfolio.',
              buttonText: 'View Open Roles',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'Start a Project', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'hello@forgeagency.com\nNew York / London / Remote', style: { textAlign: 'center', color: '#a3a3a3', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#0a0a0a' } },
            children: [
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'InputField', props: { label: 'Budget Range', placeholder: '$10K - $50K' } },
                  { type: 'TextareaField', props: { label: 'Project Details', placeholder: 'Tell us what you need...' } },
                  { type: 'FormButton', props: { text: 'Send Brief', style: { backgroundColor: '#f97316', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#171717', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Response Time', level: 'h3', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'We respond to all inquiries within 24 hours. For urgent projects, call us directly at (212) 555-0199.', style: { color: '#a3a3a3', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 5. Medical / Dental --------------------------------------------------

const medical: TemplateDefinition = {
  id: 'medical',
  name: 'Medical / Dental',
  category: 'business',
  description: 'Clean healthcare practice site with services, about, and appointment booking',
  thumbnail: thumb('#0d9488', '#f0fdfa', '#14b8a6', '#ffffff'),
  isMultiPage: true,
  design: {
    primaryColor: '#0d9488',
    secondaryColor: '#134e4a',
    accentColor: '#14b8a6',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#ffffff',
    textColor: '#134e4a',
    navStyle: 'light',
  },
  header: makeHeader(
    'Greenfield Dental',
    [
      { text: 'Home', href: '/' },
      { text: 'Services', href: 'services' },
      { text: 'About', href: 'about' },
      { text: 'Book Appointment', href: 'contact', isCta: true },
    ],
    '#ffffff',
    '#134e4a',
    '#0d9488',
  ),
  footer: makeFooterContent('Greenfield Dental', '#134e4a', '#5eead4', {
    tagline: 'Your smile, our priority.',
    contactText: '456 Wellness Blvd, Suite 100 \u00b7 (555) 321-0987',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Gentle Care for Healthy Smiles',
              subtitle: 'Modern dentistry in a comfortable, welcoming environment. Accepting new patients \u2014 schedule your visit today.',
              buttonText: 'Book Appointment',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #0d9488 0%, #0f766e 100%)',
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'General Dentistry', description: 'Cleanings, fillings, crowns, and comprehensive oral health care for the whole family.', icon: '\ud83e\uddb7' },
                { title: 'Cosmetic Services', description: 'Teeth whitening, veneers, and smile makeovers to help you feel confident.', icon: '\u2728' },
                { title: 'Emergency Care', description: 'Same-day appointments available for dental emergencies. Call us anytime.', icon: '\ud83c\udfe5' },
              ],
              style: { backgroundColor: '#f0fdfa' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Why Patients Choose Us', level: 'h2', style: { textAlign: 'center', color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'With over 15 years of experience, state-of-the-art technology, and a team that genuinely cares, Greenfield Dental has become the trusted dental home for thousands of families in our community.', style: { textAlign: 'center', maxWidth: '650px', margin: '0 auto', color: '#5c8a85', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa' } },
            children: [
              { type: 'Heading', props: { text: 'Patient Testimonials', level: 'h2', style: { textAlign: 'center', color: '#134e4a', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: '"Dr. Greenfield and her team made my first visit so comfortable. I actually look forward to my appointments now!" \u2014 Rachel P.', style: { textAlign: 'center', maxWidth: '600px', margin: '0 auto', color: '#5c8a85', lineHeight: '1.8', fontStyle: 'italic' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'New Patient Special',
              description: 'Comprehensive exam, cleaning, and X-rays for just $99. Limited time offer for new patients.',
              buttonText: 'Claim Your Offer',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Services',
      slug: 'services',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa' } },
            children: [
              { type: 'Heading', props: { text: 'Our Services', level: 'h1', style: { textAlign: 'center', color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Complete dental care under one roof.', style: { textAlign: 'center', color: '#5c8a85' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Preventive Care', description: 'Regular cleanings, exams, and digital X-rays to keep your smile healthy.', icon: '\ud83d\udee1\ufe0f' },
                { title: 'Restorative', description: 'Fillings, crowns, bridges, and implants to restore damaged or missing teeth.', icon: '\ud83d\udd27' },
                { title: 'Orthodontics', description: 'Invisalign and traditional braces for children and adults.', icon: '\ud83d\ude01' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Pediatric Dentistry', description: 'Gentle, kid-friendly dental care to build healthy habits from an early age.', icon: '\ud83d\udc76' },
                { title: 'Oral Surgery', description: 'Wisdom teeth removal, extractions, and surgical procedures with sedation options.', icon: '\ud83c\udfe5' },
                { title: 'Teeth Whitening', description: 'Professional in-office and take-home whitening treatments for a brighter smile.', icon: '\ud83d\udca1' },
              ],
              style: { backgroundColor: '#ffffff', paddingTop: '0' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Insurance & Payment', level: 'h2', style: { color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'We accept most major dental insurance plans and offer flexible payment options including CareCredit. Our front desk team will verify your benefits before your appointment so there are no surprises.', style: { color: '#5c8a85', lineHeight: '1.8', maxWidth: '650px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Ready for Your Best Smile?',
              description: 'Schedule a consultation to discuss your dental health goals.',
              buttonText: 'Book Now',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #0d9488 0%, #0f766e 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa' } },
            children: [
              { type: 'Heading', props: { text: 'Meet Dr. Sarah Greenfield', level: 'h1', style: { textAlign: 'center', color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Dr. Greenfield graduated top of her class from the University of Pacific School of Dentistry and has been providing exceptional dental care since 2010. She is passionate about patient education and making every visit as comfortable as possible.', style: { textAlign: 'center', maxWidth: '700px', margin: '0 auto', color: '#5c8a85', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '15+ Years Experience', description: 'Thousands of patients treated with care and precision.', icon: '\ud83c\udf1f' },
                { title: 'Continuing Education', description: 'Regular training in the latest dental technologies and techniques.', icon: '\ud83d\udcda' },
                { title: 'Community Focused', description: 'Volunteer dental clinics and school programs every quarter.', icon: '\u2764\ufe0f' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa' } },
            children: [
              { type: 'Heading', props: { text: 'Our Team', level: 'h2', style: { color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Our team includes two dental hygienists, three dental assistants, and a dedicated front desk coordinator. Together, we create a warm, professional environment where every patient feels like family. We take the time to explain every procedure and answer all your questions.', style: { color: '#5c8a85', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Our Technology', level: 'h2', style: { color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Digital X-rays, intraoral cameras, laser dentistry, and 3D imaging \u2014 we invest in the latest technology to provide more accurate diagnoses, less invasive treatments, and faster healing times.', style: { color: '#5c8a85', lineHeight: '1.8', maxWidth: '650px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa' } },
            children: [
              { type: 'Heading', props: { text: 'Book an Appointment', level: 'h1', style: { textAlign: 'center', color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '456 Wellness Blvd, Suite 100\nPhone: (555) 321-0987\nMon\u2013Fri: 8am\u20135pm, Sat: 9am\u20131pm', style: { textAlign: 'center', color: '#5c8a85', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: 'Patient Name', placeholder: 'Full name' } },
                  { type: 'InputField', props: { label: 'Phone', placeholder: '(555) 000-0000' } },
                  { type: 'InputField', props: { label: 'Preferred Date', placeholder: 'MM/DD/YYYY' } },
                  { type: 'TextareaField', props: { label: 'Notes', placeholder: 'Any concerns or special requests...' } },
                  { type: 'FormButton', props: { text: 'Request Appointment', style: { backgroundColor: '#0d9488', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdfa', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Emergency Dental Care', level: 'h2', style: { color: '#134e4a', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Experiencing a dental emergency? Call us immediately at (555) 321-0987. We offer same-day emergency appointments and will do everything we can to see you as quickly as possible.', style: { color: '#5c8a85', lineHeight: '1.8', maxWidth: '600px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ===========================================================================
// CREATIVE TEMPLATES (4)
// ===========================================================================

// ---- 6. Portfolio ---------------------------------------------------------

const portfolio: TemplateDefinition = {
  id: 'portfolio',
  name: 'Portfolio',
  category: 'creative',
  description: 'Minimal portfolio with large imagery, project showcases, and contact',
  thumbnail: thumb('#18181b', '#fafafa', '#a3a3a3', '#ffffff'),
  isMultiPage: true,
  design: {
    primaryColor: '#18181b',
    secondaryColor: '#fafafa',
    accentColor: '#a3a3a3',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#ffffff',
    textColor: '#18181b',
    navStyle: 'light',
  },
  header: makeHeader(
    'Jane Doe',
    [
      { text: 'Home', href: '/' },
      { text: 'Projects', href: 'projects' },
      { text: 'About', href: 'about' },
      { text: 'Contact', href: 'contact', isCta: true },
    ],
    '#ffffff',
    '#18181b',
    '#18181b',
  ),
  footer: makeFooterContent('Jane Doe', '#18181b', '#a3a3a3', {
    tagline: 'Designed with intention.',
    socialText: 'Dribbble \u00b7 Behance \u00b7 LinkedIn \u00b7 Twitter',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '120px 20px 80px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Jane Doe', level: 'h1', style: { fontSize: '56px', fontWeight: '700', color: '#18181b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Product Designer & Visual Storyteller. I create digital experiences that are intuitive, beautiful, and human-centered.', style: { fontSize: '20px', color: '#71717a', maxWidth: '600px', lineHeight: '1.7' } } },
              { type: 'Spacer', props: { height: '32px' } },
              { type: 'ButtonLink', props: { text: 'View Projects', href: 'projects', style: { padding: '12px 32px', backgroundColor: '#18181b', color: '#ffffff', borderRadius: '8px', fontWeight: '600', fontSize: '15px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px 80px', backgroundColor: '#fafafa' } },
            children: [
              { type: 'Heading', props: { text: 'Selected Work', level: 'h2', style: { color: '#18181b', marginBottom: '32px' } } },
              { type: 'ImageBlock', props: { alt: 'Project preview', style: { width: '100%', borderRadius: '12px', marginBottom: '24px' } } },
              { type: 'ImageBlock', props: { alt: 'Project preview', style: { width: '100%', borderRadius: '12px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Product Design', description: 'End-to-end design for mobile and web products, from research to final UI.', icon: '\ud83d\udcf1' },
                { title: 'Brand Identity', description: 'Logos, typography systems, and visual guidelines that define your brand.', icon: '\ud83c\udfa8' },
                { title: 'Design Systems', description: 'Scalable component libraries that keep teams aligned and efficient.', icon: '\ud83e\udde9' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Have a project in mind?',
              description: 'I am always open to new collaborations and interesting challenges.',
              buttonText: 'Get in Touch',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #18181b 0%, #3f3f46 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Projects',
      slug: 'projects',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Projects', level: 'h1', style: { color: '#18181b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'A curated selection of product design, branding, and digital experience work.', style: { color: '#71717a', marginBottom: '40px', fontSize: '18px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '20px 20px 40px', backgroundColor: '#fafafa' } },
            children: [
              { type: 'ImageBlock', props: { alt: 'Project 1', style: { width: '100%', borderRadius: '12px', marginBottom: '16px' } } },
              { type: 'Heading', props: { text: 'Finova Banking App', level: 'h3', style: { color: '#18181b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Complete redesign of a mobile banking experience for 2M+ users. Reduced support tickets by 40%.', style: { color: '#71717a', marginBottom: '40px' } } },
              { type: 'ImageBlock', props: { alt: 'Project 2', style: { width: '100%', borderRadius: '12px', marginBottom: '16px' } } },
              { type: 'Heading', props: { text: 'Bloom E-Commerce', level: 'h3', style: { color: '#18181b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Brand identity and web store design for a sustainable fashion brand. Launched to $200K in first-month sales.', style: { color: '#71717a' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px 80px', backgroundColor: '#fafafa' } },
            children: [
              { type: 'ImageBlock', props: { alt: 'Project 3', style: { width: '100%', borderRadius: '12px', marginBottom: '16px' } } },
              { type: 'Heading', props: { text: 'Waypoint Travel', level: 'h3', style: { color: '#18181b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Redesigned the trip planning experience for a travel startup. App Store featured within first week of launch.', style: { color: '#71717a' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Interested in working together?',
              description: 'I would love to hear about your next project.',
              buttonText: 'Contact Me',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #18181b 0%, #3f3f46 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'About Me', level: 'h1', style: { color: '#18181b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'I am a product designer based in San Francisco with 8 years of experience creating digital products for startups and Fortune 500 companies. I believe great design is invisible \u2014 it just works.\n\nWhen I am not designing, you will find me hiking coastal trails, experimenting with film photography, or teaching design workshops.', style: { color: '#71717a', lineHeight: '1.8', maxWidth: '700px', fontSize: '16px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '50+ Projects', description: 'Products shipped for companies from seed-stage startups to the Fortune 500.', icon: '\ud83d\ude80' },
                { title: '8 Years Experience', description: 'Deep expertise in product design, user research, and design systems.', icon: '\u23f0' },
                { title: '3 Awards', description: 'Recognized by Awwwards, CSS Design Awards, and UXDA.', icon: '\ud83c\udfc6' },
              ],
              style: { backgroundColor: '#fafafa' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Tools & Skills', level: 'h2', style: { color: '#18181b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Figma, Sketch, Adobe Creative Suite, Framer, Webflow, HTML/CSS, JavaScript, React. I am tool-agnostic and pick what is best for each project. My process emphasizes user research, rapid prototyping, and iterative testing.', style: { color: '#71717a', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Get in Touch', level: 'h1', style: { color: '#18181b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'I am always open to new projects and collaborations.\njane@janedoe.design', style: { color: '#71717a', lineHeight: '1.8', marginBottom: '32px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '500px' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'TextareaField', props: { label: 'Message', placeholder: 'Tell me about your project...' } },
                  { type: 'FormButton', props: { text: 'Send', style: { backgroundColor: '#18181b', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fafafa', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Find Me Online', level: 'h3', style: { color: '#18181b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Dribbble \u00b7 Behance \u00b7 LinkedIn \u00b7 Twitter\nSan Francisco, CA', style: { color: '#71717a', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 7. Photography -------------------------------------------------------

const photography: TemplateDefinition = {
  id: 'photography',
  name: 'Photography',
  category: 'creative',
  description: 'Full-width gallery-style portfolio with dark background',
  thumbnail: thumb('#d4d4d4', '#0a0a0a', '#525252', '#0a0a0a'),
  isMultiPage: false,
  design: {
    primaryColor: '#d4d4d4',
    secondaryColor: '#0a0a0a',
    accentColor: '#737373',
    headingFont: 'Playfair Display, serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#0a0a0a',
    textColor: '#d4d4d4',
    navStyle: 'dark',
  },
  header: makeHeader(
    'LENS',
    [
      { text: 'Gallery', href: '#gallery' },
      { text: 'About', href: '#about' },
      { text: 'Hire Me', href: '#contact', isCta: true },
    ],
    '#0a0a0a',
    '#d4d4d4',
    '#d4d4d4',
    '#0a0a0a',
  ),
  footer: makeFooterContent('LENS Photography', '#0a0a0a', '#525252', {
    tagline: 'All images are copyrighted.',
    contactText: 'hello@lensphotography.com \u00b7 Portland, OR',
    socialText: 'Instagram \u00b7 500px \u00b7 Flickr',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '120px 20px', backgroundColor: '#0a0a0a', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Capturing Moments That Matter', level: 'h1', style: { fontSize: '48px', color: '#fafafa', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Editorial, portrait, and landscape photography based in Portland, OR.', style: { color: '#737373', fontSize: '18px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#0a0a0a' } },
            children: [
              { type: 'ImageBlock', props: { alt: 'Gallery image 1', style: { width: '100%', marginBottom: '16px', borderRadius: '4px' } } },
              { type: 'ImageBlock', props: { alt: 'Gallery image 2', style: { width: '100%', marginBottom: '16px', borderRadius: '4px' } } },
              { type: 'ImageBlock', props: { alt: 'Gallery image 3', style: { width: '100%', borderRadius: '4px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Editorial', description: 'Fashion, lifestyle, and brand storytelling for magazines and digital publications.', icon: '\ud83d\udcf0' },
                { title: 'Portraits', description: 'Authentic headshots and personal branding photography that captures who you are.', icon: '\ud83d\udcf7' },
                { title: 'Landscapes', description: 'Fine art prints of the Pacific Northwest and beyond, available for purchase.', icon: '\ud83c\udf04' },
              ],
              style: { backgroundColor: '#111111' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#171717' } },
            children: [
              { type: 'Heading', props: { text: 'About', level: 'h2', style: { color: '#fafafa', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'With 12 years behind the lens, I specialize in finding beauty in the everyday. My work has been featured in National Geographic, WIRED, and The New York Times. I am available for editorial assignments, commercial projects, and private commissions.', style: { color: '#a3a3a3', lineHeight: '1.8', maxWidth: '650px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#0a0a0a' } },
            children: [
              { type: 'Heading', props: { text: 'Work With Me', level: 'h2', style: { color: '#fafafa', fontFamily: 'Playfair Display, serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'hello@lensphotography.com\nPortland, OR \u2014 Available worldwide', style: { color: '#a3a3a3', lineHeight: '1.8', marginBottom: '24px' } } },
              { type: 'ButtonLink', props: { text: 'Send Inquiry', href: '#contact', style: { padding: '12px 32px', backgroundColor: '#d4d4d4', color: '#0a0a0a', borderRadius: '4px', fontWeight: '600' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 8. Content Creator ---------------------------------------------------

const contentCreator: TemplateDefinition = {
  id: 'content-creator',
  name: 'Content Creator',
  category: 'creative',
  description: 'Vibrant social-focused site for YouTubers, streamers, and influencers',
  thumbnail: thumb('#ec4899', '#1e1b4b', '#f472b6', '#fdf2f8'),
  isMultiPage: true,
  design: {
    primaryColor: '#ec4899',
    secondaryColor: '#1e1b4b',
    accentColor: '#f472b6',
    headingFont: 'Montserrat, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#fdf2f8',
    textColor: '#1e1b4b',
    navStyle: 'dark',
  },
  header: makeHeader(
    'SkyeVlogs',
    [
      { text: 'Home', href: '/' },
      { text: 'Videos', href: 'videos' },
      { text: 'About', href: 'about' },
      { text: 'Links', href: 'links', isCta: true },
    ],
    '#1e1b4b',
    '#f0abfc',
    '#ec4899',
  ),
  footer: makeFooterContent('SkyeVlogs', '#1e1b4b', '#c084fc', {
    tagline: 'Follow the journey!',
    socialText: 'YouTube \u00b7 Instagram \u00b7 TikTok \u00b7 Twitter',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Hey, I\'m Skye!',
              subtitle: 'Tech reviews, travel vlogs, and lifestyle content. 500K+ subscribers on YouTube. Let\'s hang out.',
              buttonText: 'Watch Latest Video',
              buttonHref: 'videos',
              gradient: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #6366f1 100%)',
              style: { minHeight: '480px' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '500K Subscribers', description: 'A growing community of tech and travel enthusiasts from around the world.', icon: '\ud83c\udfac' },
                { title: 'Brand Collabs', description: 'Worked with Apple, Samsung, Adobe, and 50+ brands on authentic content.', icon: '\ud83e\udd1d' },
                { title: 'Weekly Uploads', description: 'New videos every Tuesday and Friday. Never miss an upload!', icon: '\ud83d\udcc5' },
              ],
              style: { backgroundColor: '#fdf2f8' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Latest Upload', level: 'h2', style: { textAlign: 'center', color: '#1e1b4b', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'iPhone 18 Pro Max \u2014 The REAL Truth After 30 Days\nPublished March 28, 2026 \u00b7 1.2M views', style: { textAlign: 'center', color: '#6b21a8', lineHeight: '1.8', marginBottom: '24px' } } },
              { type: 'ButtonLink', props: { text: 'Watch Now on YouTube', href: '#', style: { display: 'inline-block', padding: '12px 32px', backgroundColor: '#ef4444', color: '#ffffff', borderRadius: '12px', fontWeight: '600' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Subscribe for Updates',
              description: 'Join the crew and get notified when new content drops.',
              buttonText: 'Subscribe on YouTube',
              buttonHref: '#',
              gradient: 'linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Videos',
      slug: 'videos',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fdf2f8' } },
            children: [
              { type: 'Heading', props: { text: 'Latest Videos', level: 'h1', style: { textAlign: 'center', color: '#1e1b4b', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Check out my recent uploads and most popular content.', style: { textAlign: 'center', color: '#6b21a8', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'iPhone 18 Review', description: 'Is this the best phone of 2026? My honest take after 30 days of use.', icon: '\ud83d\udcf1' },
                { title: 'Japan Travel Vlog', description: '10 days exploring Tokyo, Kyoto, and Osaka \u2014 the ultimate itinerary.', icon: '\u2708\ufe0f' },
                { title: 'My Desk Setup Tour', description: 'Every gadget and tool I use to create content, fully explained.', icon: '\ud83d\udda5\ufe0f' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Budget Camera Guide', description: 'The best cameras under $500 for aspiring YouTubers and content creators.', icon: '\ud83d\udcf7' },
                { title: 'Bali On A Budget', description: 'How I spent 2 weeks in Bali for under $1,500 including flights.', icon: '\ud83c\udf34' },
                { title: 'Editing Workflow', description: 'My complete editing setup: apps, plugins, and keyboard shortcuts.', icon: '\u2702\ufe0f' },
              ],
              style: { backgroundColor: '#ffffff', paddingTop: '0' },
            },
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Want to See More?',
              description: 'Head over to YouTube for the full library of 200+ videos.',
              buttonText: 'Go to YouTube',
              buttonHref: '#',
              gradient: 'linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fdf2f8' } },
            children: [
              { type: 'Heading', props: { text: 'About Skye', level: 'h1', style: { color: '#1e1b4b', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'I started making YouTube videos in my dorm room in 2019. What began as a hobby turned into my full-time career. I am passionate about helping people discover amazing tech and inspiring them to explore the world.\n\nWhen I am not filming, you will find me rock climbing, reading sci-fi, or trying every coffee shop in the city.', style: { color: '#581c87', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Started 2019', description: 'From dorm room recordings to a full production studio in just 6 years.', icon: '\ud83c\udf1f' },
                { title: '200+ Videos', description: 'Tech reviews, travel vlogs, day-in-my-life, and creative tutorials.', icon: '\ud83c\udfac' },
                { title: 'Global Audience', description: 'Viewers from 120+ countries, with a focus on 18-34 year olds.', icon: '\ud83c\udf0d' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fdf2f8' } },
            children: [
              { type: 'Heading', props: { text: 'Brand Partnerships', level: 'h2', style: { color: '#1e1b4b', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'I work with brands that align with my values and genuinely interest my audience. Past partners include Apple, Samsung, Adobe, Notion, Squarespace, and NordVPN. For partnership inquiries, please use the contact form or email partnerships@skyevlogs.com.', style: { color: '#581c87', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Links',
      slug: 'links',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fdf2f8', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'All My Links', level: 'h1', style: { color: '#1e1b4b', fontFamily: 'Montserrat, sans-serif', marginBottom: '32px' } } },
              { type: 'ButtonLink', props: { text: 'YouTube', href: '#', style: { display: 'block', padding: '14px 24px', backgroundColor: '#ef4444', color: '#ffffff', borderRadius: '12px', fontWeight: '600', marginBottom: '12px', maxWidth: '400px', margin: '0 auto 12px', textAlign: 'center' } } },
              { type: 'ButtonLink', props: { text: 'Instagram', href: '#', style: { display: 'block', padding: '14px 24px', backgroundColor: '#ec4899', color: '#ffffff', borderRadius: '12px', fontWeight: '600', marginBottom: '12px', maxWidth: '400px', margin: '0 auto 12px', textAlign: 'center' } } },
              { type: 'ButtonLink', props: { text: 'TikTok', href: '#', style: { display: 'block', padding: '14px 24px', backgroundColor: '#1e1b4b', color: '#ffffff', borderRadius: '12px', fontWeight: '600', marginBottom: '12px', maxWidth: '400px', margin: '0 auto 12px', textAlign: 'center' } } },
              { type: 'ButtonLink', props: { text: 'Twitter / X', href: '#', style: { display: 'block', padding: '14px 24px', backgroundColor: '#18181b', color: '#ffffff', borderRadius: '12px', fontWeight: '600', marginBottom: '12px', maxWidth: '400px', margin: '0 auto 12px', textAlign: 'center' } } },
              { type: 'ButtonLink', props: { text: 'My Gear List', href: '#', style: { display: 'block', padding: '14px 24px', backgroundColor: '#7c3aed', color: '#ffffff', borderRadius: '12px', fontWeight: '600', maxWidth: '400px', margin: '0 auto', textAlign: 'center' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#fdf2f8', textAlign: 'center' } },
            children: [
              { type: 'TextBlock', props: { text: 'For business inquiries: partnerships@skyevlogs.com', style: { color: '#6b21a8', fontSize: '14px' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 9. Event / Conference ------------------------------------------------

const eventConference: TemplateDefinition = {
  id: 'event-conference',
  name: 'Event / Conference',
  category: 'creative',
  description: 'Bold event landing page with speakers, schedule hints, and registration',
  thumbnail: thumb('#f59e0b', '#0f172a', '#fbbf24', '#fffbeb'),
  isMultiPage: false,
  design: {
    primaryColor: '#f59e0b',
    secondaryColor: '#0f172a',
    accentColor: '#fbbf24',
    headingFont: 'Montserrat, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#fffbeb',
    textColor: '#0f172a',
    navStyle: 'dark',
  },
  header: makeHeader(
    'SUMMIT 2026',
    [
      { text: 'Speakers', href: '#speakers' },
      { text: 'Schedule', href: '#schedule' },
      { text: 'Register', href: '#register', isCta: true },
    ],
    '#0f172a',
    '#fbbf24',
    '#f59e0b',
  ),
  footer: makeFooterContent('SUMMIT Conference', '#0f172a', '#f59e0b', {
    tagline: 'October 15-17, 2026 \u00b7 San Francisco',
    contactText: 'info@summit2026.com',
    socialText: 'Twitter \u00b7 LinkedIn \u00b7 YouTube',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'SUMMIT 2026',
              subtitle: 'The premier technology conference. October 15-17, San Francisco. 3 days, 60+ speakers, 2,000 attendees.',
              buttonText: 'Register Now',
              buttonHref: '#register',
              gradient: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%)',
              style: { minHeight: '550px' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fffbeb', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'October 15-17, 2026', level: 'h2', style: { color: '#f59e0b', fontFamily: 'Montserrat, sans-serif', fontSize: '32px', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Moscone Center, San Francisco', style: { color: '#92400e', fontSize: '18px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Dr. Maya Chen', description: 'AI Research Lead at DeepMind. Keynote: "The Next Frontier of Machine Intelligence"', icon: '\ud83c\udf99\ufe0f' },
                { title: 'James Okoro', description: 'CTO of Stripe. Talk: "Building Payment Infrastructure for the World"', icon: '\ud83c\udf99\ufe0f' },
                { title: 'Priya Sharma', description: 'VP of Engineering at SpaceX. Talk: "Software That Reaches the Stars"', icon: '\ud83c\udf99\ufe0f' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#fffbeb' } },
            children: [
              { type: 'Heading', props: { text: 'Schedule Highlights', level: 'h2', style: { textAlign: 'center', color: '#0f172a', fontFamily: 'Montserrat, sans-serif', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: 'Day 1 \u2014 Opening keynote, AI & ML track, Networking reception\nDay 2 \u2014 Infrastructure track, Design track, Startup showcase\nDay 3 \u2014 Workshops, Lightning talks, Closing party', style: { textAlign: 'center', color: '#78350f', lineHeight: '2', maxWidth: '600px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Secure Your Spot',
              description: 'Early bird tickets start at $299. Student discounts available.',
              buttonText: 'Register Now',
              buttonHref: '#register',
              gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
            },
          },
        ],
      },
    },
  ],
};

// ===========================================================================
// PERSONAL TEMPLATES (4)
// ===========================================================================

// ---- 10. Resume / CV ------------------------------------------------------

const resumeCv: TemplateDefinition = {
  id: 'resume-cv',
  name: 'Resume / CV',
  category: 'personal',
  description: 'Clean, professional resume with timeline, skills grid, and contact',
  thumbnail: thumb('#3b82f6', '#1e293b', '#60a5fa', '#ffffff'),
  isMultiPage: false,
  design: {
    primaryColor: '#3b82f6',
    secondaryColor: '#1e293b',
    accentColor: '#60a5fa',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#ffffff',
    textColor: '#1e293b',
    navStyle: 'light',
  },
  header: makeHeader(
    'Alex Morgan',
    [
      { text: 'Experience', href: '#experience' },
      { text: 'Skills', href: '#skills' },
      { text: 'Download CV', href: '#', isCta: true },
    ],
    '#ffffff',
    '#1e293b',
    '#3b82f6',
  ),
  footer: makeFooterContent('Alex Morgan', '#1e293b', '#94a3b8', {
    contactText: 'alex@alexmorgan.dev \u00b7 San Francisco, CA',
    socialText: 'LinkedIn \u00b7 GitHub \u00b7 Twitter',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Alex Morgan', level: 'h1', style: { fontSize: '44px', fontWeight: '700', color: '#1e293b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Senior Software Engineer', style: { fontSize: '20px', color: '#3b82f6', fontWeight: '500', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Full-stack engineer with 8+ years of experience building scalable web applications. Passionate about clean architecture, developer experience, and shipping products that make a difference.', style: { color: '#64748b', lineHeight: '1.8', maxWidth: '700px', fontSize: '16px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Experience', level: 'h2', style: { color: '#1e293b', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Senior Engineer \u2014 Stripe (2022\u2013Present)', level: 'h4', style: { color: '#1e293b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Led a team of 6 engineers building payment processing infrastructure. Reduced API latency by 35% and shipped 3 major product features.', style: { color: '#64748b', lineHeight: '1.7', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Software Engineer \u2014 Vercel (2019\u20132022)', level: 'h4', style: { color: '#1e293b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Core contributor to the Next.js framework. Built serverless deployment tooling used by 100K+ developers.', style: { color: '#64748b', lineHeight: '1.7', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Junior Developer \u2014 Acme Corp (2017\u20132019)', level: 'h4', style: { color: '#1e293b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Full-stack development on the core product team. Migrated legacy PHP codebase to React + Node.js.', style: { color: '#64748b', lineHeight: '1.7' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Frontend', description: 'React, TypeScript, Next.js, Tailwind CSS, Vite', icon: '\ud83d\udda5\ufe0f' },
                { title: 'Backend', description: 'Node.js, Python, Go, PostgreSQL, Redis', icon: '\u2699\ufe0f' },
                { title: 'DevOps', description: 'AWS, Docker, Kubernetes, CI/CD, Terraform', icon: '\u2601\ufe0f' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Education', level: 'h2', style: { color: '#1e293b', marginBottom: '16px' } } },
              { type: 'Heading', props: { text: 'B.S. Computer Science \u2014 Stanford University (2017)', level: 'h4', style: { color: '#1e293b', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Graduated with honors. Focus on distributed systems and machine learning. Teaching assistant for CS 161 (Operating Systems).', style: { color: '#64748b', lineHeight: '1.7' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Get in Touch', level: 'h2', style: { color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'alex@alexmorgan.dev\nSan Francisco, CA\nLinkedIn / GitHub / Twitter', style: { color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 11. Blog -------------------------------------------------------------

const blog: TemplateDefinition = {
  id: 'blog',
  name: 'Blog',
  category: 'personal',
  description: 'Readable, content-focused blog with posts, about, and contact',
  thumbnail: thumb('#059669', '#1e293b', '#34d399', '#ffffff'),
  isMultiPage: true,
  design: {
    primaryColor: '#059669',
    secondaryColor: '#1e293b',
    accentColor: '#34d399',
    headingFont: 'Merriweather, serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#ffffff',
    textColor: '#1e293b',
    navStyle: 'light',
  },
  header: makeHeader(
    'The Daily Byte',
    [
      { text: 'Home', href: '/' },
      { text: 'Posts', href: 'posts' },
      { text: 'About', href: 'about' },
      { text: 'Subscribe', href: 'contact', isCta: true },
    ],
    '#ffffff',
    '#1e293b',
    '#059669',
  ),
  footer: makeFooterContent('The Daily Byte', '#1e293b', '#94a3b8', {
    tagline: 'Words that matter.',
    socialText: 'RSS \u00b7 Twitter \u00b7 Mastodon',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'The Daily Byte', level: 'h1', style: { fontSize: '48px', fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Thoughts on technology, design, and the craft of building things for the web.', style: { fontSize: '18px', color: '#64748b', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'The Case for Boring Technology', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '8px', fontSize: '24px' } } },
              { type: 'TextBlock', props: { text: 'March 28, 2026', style: { color: '#059669', fontSize: '13px', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Every new project brings the temptation to reach for the latest framework. But there is immense value in choosing proven, well-understood tools...', style: { color: '#475569', lineHeight: '1.8' } } },
              { type: 'Divider', props: { color: '#e2e8f0', style: { margin: '32px 0' } } },
              { type: 'Heading', props: { text: 'Why I Switched to TypeScript (and Never Looked Back)', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '8px', fontSize: '24px' } } },
              { type: 'TextBlock', props: { text: 'March 15, 2026', style: { color: '#059669', fontSize: '13px', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'After years of writing JavaScript, the move to TypeScript felt like putting on glasses for the first time. Everything became clearer...', style: { color: '#475569', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Never Miss a Post', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Subscribe to get new articles delivered straight to your inbox.', style: { color: '#64748b', marginBottom: '20px' } } },
              { type: 'ButtonLink', props: { text: 'Subscribe', href: 'contact', style: { display: 'inline-block', padding: '12px 32px', backgroundColor: '#059669', color: '#ffffff', borderRadius: '8px', fontWeight: '600' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Posts',
      slug: 'posts',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'All Posts', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '32px' } } },
              { type: 'Heading', props: { text: 'The Case for Boring Technology', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '4px' } } },
              { type: 'TextBlock', props: { text: 'March 28, 2026 \u2014 Every new project brings the temptation to reach for the latest framework...', style: { color: '#64748b', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Why I Switched to TypeScript', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '4px' } } },
              { type: 'TextBlock', props: { text: 'March 15, 2026 \u2014 After years of writing JavaScript, the move to TypeScript felt like putting on glasses...', style: { color: '#64748b', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Designing for Accessibility First', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '4px' } } },
              { type: 'TextBlock', props: { text: 'March 2, 2026 \u2014 Accessibility is not an afterthought. It is a design principle that benefits everyone...', style: { color: '#64748b', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'The Art of Code Review', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '4px' } } },
              { type: 'TextBlock', props: { text: 'February 20, 2026 \u2014 A good code review is a conversation, not a critique. Here is how to make them productive...', style: { color: '#64748b' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#f8fafc', textAlign: 'center' } },
            children: [
              { type: 'TextBlock', props: { text: 'More posts coming soon. Subscribe to stay updated.', style: { color: '#94a3b8', fontSize: '14px' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'About This Blog', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'The Daily Byte is a personal blog where I share lessons learned from 10+ years of building software. I write about web development, design systems, developer tools, and the occasional philosophical tangent about technology.\n\nI believe in writing that is honest, practical, and accessible to everyone \u2014 from juniors to staff engineers.', style: { color: '#475569', lineHeight: '1.8', maxWidth: '700px', fontSize: '16px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'About the Author', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'I am a software engineer based in Austin, TX. By day I work on developer tools at a mid-stage startup. By night I write about the things I learn, the mistakes I make, and the patterns that keep showing up across projects.\n\nPreviously I worked at GitHub and Shopify. I hold a CS degree from the University of Texas at Austin.', style: { color: '#475569', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Colophon', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'This blog is built with a static site generator, hosted on Vercel, and written in Markdown. The fonts are Merriweather (headings) and Inter (body).', style: { color: '#64748b', lineHeight: '1.8', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Subscribe & Contact', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Get new posts delivered to your inbox. No spam, unsubscribe anytime.', style: { color: '#64748b', marginBottom: '32px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '500px' } },
                children: [
                  { type: 'InputField', props: { label: 'Email Address', placeholder: 'you@example.com', inputType: 'email' } },
                  { type: 'FormButton', props: { text: 'Subscribe', style: { backgroundColor: '#059669', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#f8fafc' } },
            children: [
              { type: 'Heading', props: { text: 'Other Ways to Reach Me', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#1e293b', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Twitter: @dailybyte\nMastodon: @dailybyte@hachyderm.io\nEmail: hello@thedailybyte.dev\n\nI read every message and try to respond within a few days.', style: { color: '#64748b', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 12. Wedding ----------------------------------------------------------

const wedding: TemplateDefinition = {
  id: 'wedding',
  name: 'Wedding',
  category: 'personal',
  description: 'Elegant wedding invitation with details, timeline, and RSVP',
  thumbnail: thumb('#b45309', '#fef3c7', '#d97706', '#fffbeb'),
  isMultiPage: false,
  design: {
    primaryColor: '#b45309',
    secondaryColor: '#78350f',
    accentColor: '#d97706',
    headingFont: 'Playfair Display, serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#fffbeb',
    textColor: '#78350f',
    navStyle: 'light',
  },
  header: makeHeader(
    'E & J',
    [
      { text: 'Details', href: '#details' },
      { text: 'Schedule', href: '#schedule' },
      { text: 'RSVP', href: '#rsvp', isCta: true },
    ],
    '#fffbeb',
    '#78350f',
    '#b45309',
  ),
  footer: makeFooterContent('Emma & James', '#78350f', '#d4a574', {
    tagline: 'September 12, 2026 \u00b7 Napa Valley, CA',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '120px 20px 80px', backgroundColor: '#fffbeb', textAlign: 'center' } },
            children: [
              { type: 'TextBlock', props: { text: 'Together with their families', style: { color: '#92400e', fontSize: '16px', fontStyle: 'italic', marginBottom: '16px' } } },
              { type: 'Heading', props: { text: 'Emma & James', level: 'h1', style: { fontSize: '56px', fontFamily: 'Playfair Display, serif', color: '#78350f', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'invite you to celebrate their wedding', style: { color: '#92400e', fontSize: '18px', marginBottom: '8px' } } },
              { type: 'Heading', props: { text: 'September 12, 2026', level: 'h2', style: { fontFamily: 'Playfair Display, serif', color: '#b45309', fontSize: '28px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'The Details', level: 'h2', style: { fontFamily: 'Playfair Display, serif', color: '#78350f', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: 'Ceremony: 4:00 PM\nSunset Gardens, Napa Valley\n\nReception: 6:00 PM\nThe Grand Pavilion\n\nDinner, dancing, and celebration to follow', style: { color: '#92400e', lineHeight: '2', fontSize: '16px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fef3c7', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Our Story', level: 'h2', style: { fontFamily: 'Playfair Display, serif', color: '#78350f', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'We met at a coffee shop in Brooklyn on a rainy Tuesday in 2020. What started with a shared table and a spilled latte turned into the greatest adventure of our lives. Five years, three apartments, and one very spoiled dog later, we can not wait to start this next chapter together.', style: { color: '#92400e', lineHeight: '1.8', maxWidth: '650px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Accommodations', description: 'We have reserved a block of rooms at the Napa Valley Lodge. Use code EMMAJAMES for a special rate.', icon: '\ud83c\udfe8' },
                { title: 'Registry', description: 'Your presence is the greatest gift. If you wish to give, our registry is available at zola.com/emmajames.', icon: '\ud83c\udf81' },
                { title: 'Dress Code', description: 'Semi-formal / cocktail attire. Think garden party elegant. Comfortable shoes recommended for the outdoor ceremony.', icon: '\ud83d\udc57' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fffbeb', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'RSVP', level: 'h2', style: { fontFamily: 'Playfair Display, serif', color: '#78350f', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Kindly respond by August 1, 2026', style: { color: '#92400e', marginBottom: '24px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '500px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: 'Guest Name(s)', placeholder: 'Your full name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'InputField', props: { label: 'Number of Guests', placeholder: '1' } },
                  { type: 'TextareaField', props: { label: 'Dietary Restrictions', placeholder: 'Any allergies or preferences...' } },
                  { type: 'FormButton', props: { text: 'Send RSVP', style: { backgroundColor: '#b45309', color: '#ffffff' } } },
                ],
              },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 13. Coming Soon ------------------------------------------------------

const comingSoon: TemplateDefinition = {
  id: 'coming-soon',
  name: 'Coming Soon',
  category: 'personal',
  description: 'Minimal launch page with email signup and countdown aesthetic',
  thumbnail: thumb('#6366f1', '#0f0f1a', '#818cf8', '#0f0f1a'),
  isMultiPage: false,
  design: {
    primaryColor: '#6366f1',
    secondaryColor: '#0f0f1a',
    accentColor: '#818cf8',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#0f0f1a',
    textColor: '#e0e7ff',
    navStyle: 'dark',
  },
  header: makeHeader(
    'Launchpad',
    [
      { text: 'Notify Me', href: '#notify', isCta: true },
    ],
    '#0f0f1a',
    '#818cf8',
    '#6366f1',
  ),
  footer: makeFooterContent('Launchpad', '#0f0f1a', '#4338ca', {
    tagline: 'Something amazing is coming.',
    socialText: 'Twitter \u00b7 Discord',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '160px 20px 80px', backgroundColor: '#0f0f1a', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Something Big Is Coming', level: 'h1', style: { fontSize: '52px', fontWeight: '700', color: '#ffffff', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'We are building something that will change the way you work. Be the first to know when we launch.', style: { color: '#a5b4fc', fontSize: '18px', maxWidth: '550px', margin: '0 auto 40px', lineHeight: '1.7' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '0 20px 60px', backgroundColor: '#0f0f1a', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Launching Q3 2026', level: 'h3', style: { color: '#6366f1', fontSize: '20px', fontWeight: '600', letterSpacing: '2px', marginBottom: '40px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '460px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: '', placeholder: 'Enter your email address', inputType: 'email' } },
                  { type: 'FormButton', props: { text: 'Notify Me', style: { backgroundColor: '#6366f1', color: '#ffffff', width: '100%' } } },
                ],
              },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Lightning Fast', description: 'Built from the ground up for performance. No compromises.', icon: '\u26a1' },
                { title: 'Privacy First', description: 'Your data stays yours. End-to-end encryption by default.', icon: '\ud83d\udd12' },
                { title: 'Open Source', description: 'Transparent development. Community-driven roadmap.', icon: '\ud83c\udf10' },
              ],
              style: { backgroundColor: '#131325' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#0f0f1a', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Follow the Journey', level: 'h3', style: { color: '#e0e7ff', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Star us on GitHub for updates, or follow along on Twitter and Discord for behind-the-scenes progress.', style: { color: '#818cf8', lineHeight: '1.8', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ===========================================================================
// COMMUNITY TEMPLATES (3)
// ===========================================================================

// ---- 14. Church / Ministry ------------------------------------------------

const church: TemplateDefinition = {
  id: 'church',
  name: 'Church / Ministry',
  category: 'community',
  description: 'Warm, welcoming church site with events, about, and contact',
  thumbnail: thumb('#7c2d12', '#fef2e8', '#c2410c', '#fff7ed'),
  isMultiPage: true,
  design: {
    primaryColor: '#c2410c',
    secondaryColor: '#7c2d12',
    accentColor: '#ea580c',
    headingFont: 'Merriweather, serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#fff7ed',
    textColor: '#7c2d12',
    navStyle: 'light',
  },
  header: makeHeader(
    'Grace Community',
    [
      { text: 'Home', href: '/' },
      { text: 'About', href: 'about' },
      { text: 'Events', href: 'events' },
      { text: 'Visit Us', href: 'contact', isCta: true },
    ],
    '#fff7ed',
    '#7c2d12',
    '#c2410c',
  ),
  footer: makeFooterContent('Grace Community Church', '#7c2d12', '#fdba74', {
    tagline: 'All are welcome.',
    contactText: '789 Faith Avenue, Springfield \u00b7 (555) 456-7890',
    socialText: 'Facebook \u00b7 YouTube \u00b7 Instagram',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Welcome Home',
              subtitle: 'A place of faith, fellowship, and love. Join us every Sunday at 10 AM for worship.',
              buttonText: 'Plan Your Visit',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #7c2d12 0%, #9a3412 100%)',
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Sunday Worship', description: 'Join us at 10 AM for a service filled with music, prayer, and an uplifting message.', icon: '\ud83d\ude4f' },
                { title: 'Youth Programs', description: 'Activities and mentorship for teens and young adults every Wednesday evening.', icon: '\ud83c\udf1f' },
                { title: 'Community Service', description: 'Monthly outreach events, food drives, and volunteer opportunities.', icon: '\u2764\ufe0f' },
              ],
              style: { backgroundColor: '#fff7ed' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Our Mission', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'To love God, love people, and serve our community. We believe every person has a place at our table, regardless of where they are on their journey.', style: { color: '#9a3412', lineHeight: '1.8', maxWidth: '650px', margin: '0 auto', fontSize: '16px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed' } },
            children: [
              { type: 'Heading', props: { text: 'This Week at Grace', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px', textAlign: 'center' } } },
              { type: 'TextBlock', props: { text: 'Sunday 10 AM \u2014 Worship Service\nWednesday 6:30 PM \u2014 Youth Group\nFriday 7 PM \u2014 Community Dinner\nSaturday 9 AM \u2014 Volunteer Day at the Food Bank', style: { color: '#9a3412', lineHeight: '2', textAlign: 'center', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Join Us This Sunday',
              description: '10:00 AM at Grace Community Church, 789 Faith Ave.',
              buttonText: 'Get Directions',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #c2410c 0%, #ea580c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'About',
      slug: 'about',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed' } },
            children: [
              { type: 'Heading', props: { text: 'About Grace Community', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Grace Community Church was founded in 1982 with a simple vision: to be a place where everyone feels welcome. Over four decades, we have grown into a vibrant congregation of 500+ families united by faith and friendship.\n\nOur pastor, Rev. David Harper, has led our church since 2015 with warmth, wisdom, and a heart for service.', style: { color: '#9a3412', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '40+ Years', description: 'Serving our community since 1982 with faith, fellowship, and love.', icon: '\u26ea' },
                { title: '500+ Families', description: 'A growing congregation from all walks of life and backgrounds.', icon: '\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66' },
                { title: '10 Ministries', description: 'Youth, music, outreach, missions, small groups, and more.', icon: '\ud83c\udf1f' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed' } },
            children: [
              { type: 'Heading', props: { text: 'What We Believe', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'We believe in the love of God, the grace of Jesus Christ, and the fellowship of the Holy Spirit. We are a non-denominational church that welcomes all people. Our worship is contemporary and engaging, our teaching is Bible-based and practical, and our community is warm and authentic.', style: { color: '#9a3412', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
        ],
      },
    },
    {
      name: 'Events',
      slug: 'events',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed' } },
            children: [
              { type: 'Heading', props: { text: 'Upcoming Events', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '32px' } } },
              { type: 'Heading', props: { text: 'Easter Sunday Celebration \u2014 April 20', level: 'h3', style: { color: '#7c2d12', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Special service at 10 AM with live music, children\'s activities, and a community brunch afterward.', style: { color: '#9a3412', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Summer Bible Camp \u2014 June 15-19', level: 'h3', style: { color: '#7c2d12', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'A week of fun, learning, and fellowship for kids ages 6-14. Registration now open.', style: { color: '#9a3412', marginBottom: '24px' } } },
              { type: 'Heading', props: { text: 'Community Food Drive \u2014 First Saturday Monthly', level: 'h3', style: { color: '#7c2d12', marginBottom: '8px' } } },
              { type: 'TextBlock', props: { text: 'Help us serve families in need. Drop off donations at the church or volunteer to help distribute.', style: { color: '#9a3412' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Weekly Schedule', level: 'h2', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Sunday 10:00 AM \u2014 Worship Service\nSunday 11:30 AM \u2014 Children\'s Church\nWednesday 6:30 PM \u2014 Youth Group\nWednesday 7:00 PM \u2014 Adult Bible Study\nFriday 7:00 PM \u2014 Community Dinner (1st & 3rd Friday)', style: { color: '#9a3412', lineHeight: '2' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Want to Get Involved?',
              description: 'There are many ways to serve. Contact us to learn about volunteer opportunities.',
              buttonText: 'Contact Us',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #c2410c 0%, #ea580c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed' } },
            children: [
              { type: 'Heading', props: { text: 'Visit & Contact Us', level: 'h1', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '789 Faith Avenue, Springfield\nPhone: (555) 456-7890\nEmail: info@gracecommunity.org\n\nSunday Service: 10:00 AM\nOffice Hours: Mon-Fri 9 AM - 4 PM', style: { color: '#9a3412', lineHeight: '1.8' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'TextareaField', props: { label: 'Message', placeholder: 'How can we help?' } },
                  { type: 'FormButton', props: { text: 'Send Message', style: { backgroundColor: '#c2410c', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#fff7ed', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'New Here?', level: 'h3', style: { fontFamily: 'Merriweather, serif', color: '#7c2d12', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'We would love to meet you! Come as you are \u2014 no dress code, no expectations. Just a warm welcome and a great cup of coffee.', style: { color: '#9a3412', lineHeight: '1.8', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 15. Non-Profit -------------------------------------------------------

const nonProfit: TemplateDefinition = {
  id: 'non-profit',
  name: 'Non-Profit',
  category: 'community',
  description: 'Purpose-driven site with mission, programs, and donation call-to-action',
  thumbnail: thumb('#16a34a', '#14532d', '#4ade80', '#f0fdf4'),
  isMultiPage: true,
  design: {
    primaryColor: '#16a34a',
    secondaryColor: '#14532d',
    accentColor: '#4ade80',
    headingFont: 'Inter, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#f0fdf4',
    textColor: '#14532d',
    navStyle: 'dark',
  },
  header: makeHeader(
    'GreenPath Foundation',
    [
      { text: 'Home', href: '/' },
      { text: 'Our Mission', href: 'mission' },
      { text: 'Get Involved', href: 'get-involved' },
      { text: 'Donate', href: 'contact', isCta: true },
    ],
    '#14532d',
    '#bbf7d0',
    '#16a34a',
  ),
  footer: makeFooterContent('GreenPath Foundation', '#14532d', '#4ade80', {
    tagline: 'A 501(c)(3) nonprofit organization.',
    contactText: '1234 Conservation Way, Portland, OR \u00b7 info@greenpathfoundation.org',
    socialText: 'Facebook \u00b7 Instagram \u00b7 Twitter \u00b7 YouTube',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Building a Greener Tomorrow',
              subtitle: 'GreenPath Foundation plants trees, restores wetlands, and educates communities to fight climate change \u2014 one acre at a time.',
              buttonText: 'Learn More',
              buttonHref: 'mission',
              gradient: 'linear-gradient(135deg, #14532d 0%, #166534 100%)',
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '2M Trees Planted', description: 'Since 2015, we have planted over two million trees across 12 countries.', icon: '\ud83c\udf33' },
                { title: '50K Volunteers', description: 'A global network of passionate individuals making a local impact.', icon: '\ud83e\udd1d' },
                { title: '95% to Programs', description: '95 cents of every dollar goes directly to conservation programs.', icon: '\ud83d\udc9a' },
              ],
              style: { backgroundColor: '#f0fdf4' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#ffffff', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Our Impact in Numbers', level: 'h2', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '12 countries \u00b7 2 million trees \u00b7 500 acres of wetland restored \u00b7 10,000 students educated\nEvery action counts. Every dollar makes a difference.', style: { color: '#166534', lineHeight: '1.8', maxWidth: '600px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Every Dollar Makes a Difference',
              description: '$10 plants 5 trees. $50 restores a wetland plot. $100 funds a school garden.',
              buttonText: 'Donate Now',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Our Mission',
      slug: 'mission',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4' } },
            children: [
              { type: 'Heading', props: { text: 'Our Mission', level: 'h1', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'GreenPath Foundation exists to combat climate change through reforestation, wetland restoration, and environmental education. We believe that community-driven conservation is the most effective path to a sustainable future.\n\nFounded in 2015 by environmental scientist Dr. Amara Osei, we have grown from a local tree-planting initiative into a global organization operating in 12 countries.', style: { color: '#166534', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Reforestation', description: 'Planting native species in deforested areas to restore biodiversity and carbon capture.', icon: '\ud83c\udf32' },
                { title: 'Wetland Restoration', description: 'Rehabilitating wetland ecosystems that filter water and protect coastlines.', icon: '\ud83d\udca7' },
                { title: 'Education', description: 'School programs teaching the next generation about environmental stewardship.', icon: '\ud83d\udcda' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4' } },
            children: [
              { type: 'Heading', props: { text: 'Our Founder', level: 'h2', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Dr. Amara Osei holds a PhD in Environmental Science from UC Berkeley and spent a decade researching deforestation patterns in West Africa before founding GreenPath. Her vision is simple: empower communities to restore their own ecosystems, and the planet will heal itself.', style: { color: '#166534', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Support Our Mission',
              description: 'Your donation directly funds tree planting, wetland restoration, and education programs.',
              buttonText: 'Donate Today',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Get Involved',
      slug: 'get-involved',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4' } },
            children: [
              { type: 'Heading', props: { text: 'Get Involved', level: 'h1', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'There are many ways to support our work and make a tangible impact on the environment.', style: { color: '#166534', marginBottom: '32px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Volunteer', description: 'Join local planting events, wetland cleanups, and community education days.', icon: '\ud83d\ude4c' },
                { title: 'Fundraise', description: 'Organize a fundraiser in your school, workplace, or community group.', icon: '\ud83d\udcb0' },
                { title: 'Corporate Partners', description: 'Offset your company\'s carbon footprint with our verified reforestation programs.', icon: '\ud83c\udfe2' },
              ],
              style: { backgroundColor: '#ffffff' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4' } },
            children: [
              { type: 'Heading', props: { text: 'Upcoming Volunteer Events', level: 'h2', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'April 22 \u2014 Earth Day Tree Planting, Forest Park, Portland\nMay 10 \u2014 Wetland Cleanup Day, Columbia River Gorge\nJune 5 \u2014 World Environment Day School Workshops\nJuly 12 \u2014 Summer Planting Weekend, Mount Hood National Forest', style: { color: '#166534', lineHeight: '2', maxWidth: '600px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Ready to Make an Impact?',
              description: 'Sign up to volunteer or start a fundraising campaign today.',
              buttonText: 'Sign Up',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #16a34a 0%, #15803d 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4' } },
            children: [
              { type: 'Heading', props: { text: 'Contact & Donate', level: 'h1', style: { color: '#14532d', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'GreenPath Foundation\n1234 Conservation Way, Portland, OR\ninfo@greenpathfoundation.org\n(555) 234-5678', style: { color: '#166534', lineHeight: '1.8', marginBottom: '24px' } } },
              { type: 'ButtonLink', props: { text: 'Donate via PayPal', href: '#', style: { padding: '14px 32px', backgroundColor: '#16a34a', color: '#ffffff', borderRadius: '8px', fontWeight: '600', fontSize: '16px', display: 'inline-block' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#ffffff' } },
            children: [
              { type: 'Heading', props: { text: 'Send Us a Message', level: 'h2', style: { color: '#14532d', marginBottom: '20px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Your name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'TextareaField', props: { label: 'Message', placeholder: 'How would you like to get involved?' } },
                  { type: 'FormButton', props: { text: 'Send', style: { backgroundColor: '#16a34a', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#f0fdf4', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Tax Deductible', level: 'h3', style: { color: '#14532d', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'GreenPath Foundation is a registered 501(c)(3) nonprofit organization. All donations are tax-deductible to the extent allowed by law. EIN: 82-1234567', style: { color: '#166534', lineHeight: '1.8', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ---- 16. Fitness / Gym ----------------------------------------------------

const fitnessGym: TemplateDefinition = {
  id: 'fitness-gym',
  name: 'Fitness / Gym',
  category: 'community',
  description: 'Bold, energetic gym site with classes, trainers, and membership signup',
  thumbnail: thumb('#dc2626', '#18181b', '#ef4444', '#1c1c1c'),
  isMultiPage: true,
  design: {
    primaryColor: '#dc2626',
    secondaryColor: '#18181b',
    accentColor: '#ef4444',
    headingFont: 'Montserrat, sans-serif',
    bodyFont: 'Inter, sans-serif',
    backgroundColor: '#1c1c1c',
    textColor: '#fafafa',
    navStyle: 'dark',
  },
  header: makeHeader(
    'IRONWORKS',
    [
      { text: 'Home', href: '/' },
      { text: 'Classes', href: 'classes' },
      { text: 'Trainers', href: 'trainers' },
      { text: 'Join Now', href: 'contact', isCta: true },
    ],
    '#18181b',
    '#fafafa',
    '#dc2626',
  ),
  footer: makeFooterContent('IRONWORKS Fitness', '#18181b', '#737373', {
    tagline: 'No excuses. Just results.',
    contactText: '100 Iron Street, Downtown \u00b7 Open 24/7',
    socialText: 'Instagram \u00b7 YouTube \u00b7 TikTok',
  }),
  pages: [
    {
      name: 'Home',
      slug: 'index',
      content: {
        components: [
          {
            type: 'HeroSimple',
            props: {
              heading: 'Forge Your Strongest Self',
              subtitle: 'State-of-the-art equipment, world-class trainers, and a community that pushes you to be your best. Your transformation starts here.',
              buttonText: 'Start Free Trial',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #18181b 0%, #292929 50%, #18181b 100%)',
              style: { minHeight: '520px' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: '50+ Weekly Classes', description: 'HIIT, yoga, spin, boxing, strength, and more. Something for every fitness level.', icon: '\ud83d\udcaa' },
                { title: '24/7 Access', description: 'Train on your schedule. Our facility is open around the clock, every day of the year.', icon: '\ud83d\udd11' },
                { title: 'Expert Coaching', description: 'Certified trainers who build personalized programs around your goals.', icon: '\ud83c\udfc6' },
              ],
              style: { backgroundColor: '#1c1c1c' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '80px 20px', backgroundColor: '#111111', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: '5,000+ Members Strong', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Join the largest fitness community in the city. Whether you are a beginner or an elite athlete, IRONWORKS has the space, equipment, and coaching to help you reach your potential.', style: { color: '#a3a3a3', lineHeight: '1.8', maxWidth: '650px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Membership Plans', level: 'h2', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '24px' } } },
              { type: 'TextBlock', props: { text: 'Basic \u2014 $29/month \u2014 Full gym access, locker room\nPro \u2014 $49/month \u2014 Gym + unlimited classes\nElite \u2014 $79/month \u2014 Everything + 4 personal training sessions', style: { textAlign: 'center', color: '#a3a3a3', lineHeight: '2', maxWidth: '500px', margin: '0 auto' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Your First Week Is Free',
              description: 'No commitment, no contracts. Just show up and see for yourself.',
              buttonText: 'Claim Free Trial',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Classes',
      slug: 'classes',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Class Schedule', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '50+ classes per week across all fitness levels.', style: { textAlign: 'center', color: '#a3a3a3', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'HIIT Blast', description: 'High-intensity interval training. 45 minutes of pure energy. All levels welcome.', icon: '\ud83d\udd25' },
                { title: 'Power Yoga', description: 'Strength-focused yoga flow. Build flexibility and core stability.', icon: '\ud83e\uddd8' },
                { title: 'Boxing Fundamentals', description: 'Learn technique, build cardio, and release stress. Gloves provided.', icon: '\ud83e\udd4a' },
              ],
              style: { backgroundColor: '#111111' },
            },
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Spin Studio', description: 'Music-driven cycling classes with real-time performance tracking.', icon: '\ud83d\udeb4' },
                { title: 'Strength Lab', description: 'Barbell-focused strength training with progressive programming.', icon: '\ud83c\udfcb\ufe0f' },
                { title: 'Recovery & Stretch', description: 'Foam rolling, mobility work, and guided stretching for rest days.', icon: '\ud83e\uddca' },
              ],
              style: { backgroundColor: '#111111', paddingTop: '0' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Weekly Schedule', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Mon/Wed/Fri 6 AM \u2014 HIIT Blast\nMon/Wed 7 PM \u2014 Boxing Fundamentals\nTue/Thu 6:30 AM \u2014 Spin Studio\nTue/Thu 12 PM \u2014 Power Yoga\nSat 9 AM \u2014 Strength Lab\nSun 10 AM \u2014 Recovery & Stretch', style: { color: '#a3a3a3', lineHeight: '2' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Ready to Try a Class?',
              description: 'Your first class is always free. No booking required \u2014 just show up.',
              buttonText: 'Get Started',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Trainers',
      slug: 'trainers',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Our Trainers', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'Certified professionals who are passionate about your success.', style: { textAlign: 'center', color: '#a3a3a3', marginBottom: '40px' } } },
            ],
          },
          {
            type: 'FeaturesGrid',
            props: {
              features: [
                { title: 'Marcus Johnson', description: 'Head Coach. NSCA-CSCS certified. 10 years of experience in strength and conditioning.', icon: '\ud83d\udcaa' },
                { title: 'Lisa Park', description: 'Yoga & Mobility Specialist. 500-hour RYT. Former professional dancer.', icon: '\ud83e\uddd8' },
                { title: 'Chris Williams', description: 'Boxing Coach. Former amateur champion. Certified USA Boxing coach.', icon: '\ud83e\udd4a' },
              ],
              style: { backgroundColor: '#111111' },
            },
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Personal Training', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: 'All our trainers offer 1-on-1 personal training sessions. Whether your goal is weight loss, muscle gain, athletic performance, or injury rehabilitation, we will build a custom program tailored to your needs.\n\nSingle session: $65 \u00b7 5-pack: $275 \u00b7 10-pack: $500\nElite members get 4 sessions included monthly.', style: { color: '#a3a3a3', lineHeight: '1.8', maxWidth: '700px' } } },
            ],
          },
          {
            type: 'CTASection',
            props: {
              heading: 'Book a Session',
              description: 'Meet with a trainer for a free goal-setting consultation.',
              buttonText: 'Contact Us',
              buttonHref: 'contact',
              gradient: 'linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)',
            },
          },
        ],
      },
    },
    {
      name: 'Contact',
      slug: 'contact',
      content: {
        components: [
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c' } },
            children: [
              { type: 'Heading', props: { text: 'Join IRONWORKS', level: 'h1', style: { textAlign: 'center', color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '16px' } } },
              { type: 'TextBlock', props: { text: '100 Iron Street, Downtown\nPhone: (555) 789-0123\nOpen 24/7, 365 days a year', style: { textAlign: 'center', color: '#a3a3a3', lineHeight: '1.8', marginBottom: '32px' } } },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '40px 20px', backgroundColor: '#111111' } },
            children: [
              { type: 'Heading', props: { text: 'Start Your Free Trial', level: 'h2', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '20px' } } },
              {
                type: 'FormContainer',
                props: { style: { maxWidth: '600px', margin: '0 auto' } },
                children: [
                  { type: 'InputField', props: { label: 'Name', placeholder: 'Full name' } },
                  { type: 'InputField', props: { label: 'Email', placeholder: 'your@email.com', inputType: 'email' } },
                  { type: 'InputField', props: { label: 'Phone', placeholder: '(555) 000-0000' } },
                  { type: 'TextareaField', props: { label: 'Fitness Goals', placeholder: 'What are you looking to achieve?' } },
                  { type: 'FormButton', props: { text: 'Claim Free Trial', style: { backgroundColor: '#dc2626', color: '#ffffff' } } },
                ],
              },
            ],
          },
          {
            type: 'Section',
            props: { style: { padding: '60px 20px', backgroundColor: '#1c1c1c', textAlign: 'center' } },
            children: [
              { type: 'Heading', props: { text: 'Follow Us', level: 'h3', style: { color: '#fafafa', fontFamily: 'Montserrat, sans-serif', marginBottom: '12px' } } },
              { type: 'TextBlock', props: { text: 'Workout tips, member spotlights, and class previews on our social channels.\nInstagram \u00b7 YouTube \u00b7 TikTok', style: { color: '#a3a3a3', lineHeight: '1.8' } } },
            ],
          },
        ],
      },
    },
  ],
};

// ===========================================================================
// Export all templates
// ===========================================================================

export const allTemplates: TemplateDefinition[] = [
  // Business
  restaurant,
  smallBusiness,
  saasLanding,
  agency,
  medical,
  // Creative
  portfolio,
  photography,
  contentCreator,
  eventConference,
  // Personal
  resumeCv,
  blog,
  wedding,
  comingSoon,
  // Community
  church,
  nonProfit,
  fitnessGym,
];
