/* Starter layouts — full-page section blueprints for standalone/landing pages.
   Each is a flat list of {type, props} built from the Sections component library.
   model.applyStarter() clones these into the active page with fresh ids and flips
   the page to the chromeless "landing" frame. Brand fields are left blank so they
   inherit the Style module's logo/name (single source of truth). */
(function () {
    var PPD = window.PPD = window.PPD || {};
    var C = function (type, props, style) { return { type: type, props: props || {}, style: style || null }; };
    var reveal = function (v) { return { class: '', customCss: '', reveal: v || 'up' }; };

    // ── SaaS ──────────────────────────────────────────────────────────────────
    var saas = {
        label: 'SaaS', icon: 'bi-rocket-takeoff', desc: 'Product landing: hero, features, pricing, testimonials, FAQ.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '🎉 v2 is here — 27 new components and starter layouts.', linkLabel: 'See what’s new', linkHref: '#', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }], ctaLabel: 'Start free', ctaHref: '#', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Now in public beta', headline: 'The fastest way to ship your product', subhead: 'Design, build and launch beautiful pages in minutes — no code, no database, no limits.', primaryLabel: 'Start free', primaryHref: '#', secondaryShow: true, secondaryLabel: 'Book a demo', secondaryHref: '#', bgType: 'gradient', bg1: '#4f46e5', bg2: '#0ea5e9', bgAngle: 135, tone: 'auto', minH: 'lg' }),
            C('logo-cloud', { heading: 'Trusted by fast-moving teams', grayscale: true, marquee: false, logos: [{ image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }] }),
            C('feature-grid', { heading: 'Everything you need to launch', subhead: 'Batteries included, nothing in your way.', columns: '3', align: 'left', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-lightning-charge', title: 'Blazing fast', text: 'Static-fast pages with zero database overhead.' },
                { icon: 'bi-brush', title: 'Design visually', text: 'Drag components, tweak, preview — instantly.' },
                { icon: 'bi-shield-check', title: 'Secure by default', text: 'Escaped output and safe links, out of the box.' }
            ] }, reveal('up')),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Build', title: 'From idea to live in an afternoon', text: 'Compose your page from 27 responsive, themeable sections and hit build.', ctaLabel: 'Explore components', ctaHref: '#', side: 'left' },
                { image: '', eyebrow: 'Grow', title: 'Convert more with proof and pricing', text: 'Testimonials, logos, stats and a clear pricing table — all included.', ctaLabel: '', ctaHref: '#', side: 'right' }
            ] }, reveal('up')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '12', suffix: 'k+', label: 'Active users' }, { value: '99.9', suffix: '%', label: 'Uptime' }, { prefix: '$', value: '2', suffix: 'M', label: 'Processed' }, { value: '150', suffix: '+', label: 'Countries' }
            ] }, reveal('fade')),
            C('pricing', { heading: 'Simple, transparent pricing', subhead: 'Start free. Upgrade when you grow.', showToggle: true, currency: '$', plans: [
                { name: 'Starter', price: '0', priceYear: '0', period: '/mo', desc: 'For side projects.', features: '1 project\nCommunity support\nBasic components', ctaLabel: 'Get started', ctaHref: '#' },
                { name: 'Pro', price: '19', priceYear: '15', period: '/mo', badge: 'Most popular', highlighted: true, desc: 'For growing teams.', features: 'Unlimited projects\nPriority support\nAll components\nCustom domain', ctaLabel: 'Start free trial', ctaHref: '#' },
                { name: 'Business', price: '49', priceYear: '39', period: '/mo', desc: 'For companies.', features: 'Everything in Pro\nSSO & audit logs\nSLA', ctaLabel: 'Contact sales', ctaHref: '#' }
            ] }),
            C('testimonials', { heading: 'Loved by teams everywhere', columns: '3', items: [
                { quote: 'This completely changed how we ship pages. Fast and delightful.', name: 'Alex Rivera', role: 'Founder, Acme', rating: 5 },
                { quote: 'We replaced three tools with one. Adopted in a day.', name: 'Sam Chen', role: 'PM, Globex', rating: 5 },
                { quote: 'Beautiful defaults, endless flexibility.', name: 'Jordan Lee', role: 'Designer, Initech', rating: 4 }
            ] }, reveal('up')),
            C('faq', { heading: 'Frequently asked questions', columns: '1', openFirst: true, items: [
                { q: 'Do I need to know how to code?', a: 'No — everything is visual. You can add custom CSS/JS if you want.' },
                { q: 'Is there a free plan?', a: 'Yes, the Starter plan is free forever.' },
                { q: 'Can I use my own domain?', a: 'Absolutely, on any paid plan.' }
            ] }),
            C('cta-band', { heading: 'Ready to build your site?', subhead: 'Start free — no credit card required.', primaryLabel: 'Start free', primaryHref: '#', secondaryShow: true, secondaryLabel: 'Talk to sales', secondaryHref: '#', bgType: 'gradient', bg1: '#4f46e5', bg2: '#7c3aed', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('footer', { tagline: 'The visual builder for standalone sites.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [
                { group: 'Product', label: 'Features', href: '#features' }, { group: 'Product', label: 'Pricing', href: '#pricing' },
                { group: 'Company', label: 'About', href: '#' }, { group: 'Company', label: 'Contact', href: '#' }
            ], social: [{ icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-github', href: '#' }, { icon: 'bi-linkedin', href: '#' }] })
        ]
    };

    // ── Agency ────────────────────────────────────────────────────────────────
    var agency = {
        label: 'Agency', icon: 'bi-palette', desc: 'Studio site: hero, services, work, team, contact.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Services', href: '#services' }, { label: 'Work', href: '#work' }, { label: 'Team', href: '#team' }, { label: 'Contact', href: '#contact' }], ctaLabel: 'Start a project', ctaHref: '#contact', variant: 'solid', sticky: true }),
            C('hero', { layout: 'split', align: 'left', eyebrow: 'Design & Development Studio', headline: 'We craft brands people remember', subhead: 'A boutique studio partnering with ambitious teams to design, build and launch standout digital experiences.', primaryLabel: 'See our work', primaryHref: '#work', secondaryShow: true, secondaryLabel: 'Get in touch', secondaryHref: '#contact', image: '', bgType: 'none', tone: 'auto', minH: 'lg' }),
            C('logo-cloud', { heading: 'Brands we’ve worked with', grayscale: true, marquee: true, logos: [{ image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }, { image: '', alt: 'Logo' }] }),
            C('feature-grid', { heading: 'What we do', subhead: 'Full-service, from strategy to launch.', columns: '3', align: 'left', variant: 'plain', iconStyle: 'tile', items: [
                { icon: 'bi-vector-pen', title: 'Brand & identity', text: 'Logos, systems and guidelines that scale.' },
                { icon: 'bi-window', title: 'Web design', text: 'Beautiful, conversion-focused websites.' },
                { icon: 'bi-code-slash', title: 'Development', text: 'Fast, accessible, maintainable builds.' }
            ] }, reveal('up')),
            C('bento-grid', { heading: 'Selected work', subhead: '', items: [
                { icon: 'bi-star', title: 'Fintech rebrand', text: 'Identity + marketing site.', size: 'wide' },
                { icon: 'bi-bag', title: 'E-commerce', size: 'md', accent: '#ec4899' },
                { icon: 'bi-phone', title: 'Mobile app', size: 'md', accent: '#10b981' },
                { icon: 'bi-camera', title: 'Campaign', text: 'Art direction & shoot.', size: 'tall' },
                { icon: 'bi-easel', title: 'Design system', size: 'md' },
                { icon: 'bi-graph-up-arrow', title: 'Growth', size: 'md' }
            ] }, reveal('fade')),
            C('team-grid', { heading: 'Meet the team', subhead: '', columns: '3', items: [
                { name: 'Jane Doe', role: 'Creative Director', bio: 'Leads brand and vision.', socials: 'bi-linkedin | #\nbi-dribbble | #' },
                { name: 'John Smith', role: 'Lead Developer', bio: 'Ships fast, clean code.', socials: 'bi-github | #' },
                { name: 'Amy Lee', role: 'Design Lead', bio: 'Crafts the experience.', socials: 'bi-dribbble | #' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'What clients say', columns: '2', items: [
                { quote: 'They understood our brand better than we did. Exceptional work.', name: 'Morgan Blake', role: 'CMO, Northwind', rating: 5 },
                { quote: 'On time, on budget, and beyond what we imagined.', name: 'Riley Park', role: 'Founder, Lumen', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Have a project in mind?', subhead: 'Let’s make something great together.', primaryLabel: 'Start a project', primaryHref: '#contact', secondaryShow: false, bgType: 'solid', bg1: '#0f172a', tone: 'light', align: 'center' }),
            C('contact-form', { heading: 'Get in touch', subhead: 'Tell us about your project — we reply within one business day.', recipient: '', subject: 'New project enquiry', showPhone: true, buttonLabel: 'Send enquiry', align: 'center' }),
            C('footer', { tagline: 'A boutique design & development studio.', variant: 'light', copyright: '© {year} {brand}. All rights reserved.', links: [
                { group: 'Studio', label: 'Work', href: '#work' }, { group: 'Studio', label: 'Team', href: '#team' },
                { group: 'Contact', label: 'hello@studio.com', href: '#' }
            ], social: [{ icon: 'bi-instagram', href: '#' }, { icon: 'bi-dribbble', href: '#' }, { icon: 'bi-linkedin', href: '#' }] })
        ]
    };

    // ── Event ─────────────────────────────────────────────────────────────────
    var event = {
        label: 'Event', icon: 'bi-calendar-event', desc: 'Conference page: hero, countdown, speakers, tickets, FAQ.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '🎟️ Early-bird tickets end soon — save 30%.', linkLabel: 'Get tickets', linkHref: '#tickets', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Speakers', href: '#speakers' }, { label: 'Schedule', href: '#' }, { label: 'Tickets', href: '#tickets' }, { label: 'FAQ', href: '#faq' }], ctaLabel: 'Register', ctaHref: '#tickets', variant: 'solid', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Dec 12–14, 2026 · San Francisco', headline: 'The conference for modern builders', subhead: 'Three days of talks, workshops and networking with the people shaping the future of the web.', primaryLabel: 'Get your ticket', primaryHref: '#tickets', secondaryShow: true, secondaryLabel: 'View schedule', secondaryHref: '#', bgType: 'gradient', bg1: '#7c3aed', bg2: '#db2777', bgAngle: 130, tone: 'auto', minH: 'lg' }),
            C('countdown', { heading: 'Doors open in', target: '2026-12-12T09:00', expiredText: 'The event has started — welcome!', variant: 'boxes', align: 'center' }),
            C('feature-grid', { heading: 'Why attend', subhead: '', columns: '3', align: 'center', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-mic', title: '40+ speakers', text: 'Leaders from the best product teams.' },
                { icon: 'bi-people', title: 'Networking', text: 'Meet 2,000+ builders and founders.' },
                { icon: 'bi-tools', title: 'Workshops', text: 'Hands-on sessions you can apply Monday.' }
            ] }, reveal('up')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '2', suffix: 'k+', label: 'Attendees' }, { value: '40', suffix: '+', label: 'Speakers' }, { value: '30', suffix: '+', label: 'Sessions' }, { value: '3', suffix: '', label: 'Days' }
            ] }, reveal('fade')),
            C('team-grid', { heading: 'Featured speakers', subhead: '', columns: '4', items: [
                { name: 'Jane Doe', role: 'CEO, Acme', socials: 'bi-twitter-x | #' },
                { name: 'John Smith', role: 'CTO, Globex', socials: 'bi-linkedin | #' },
                { name: 'Amy Lee', role: 'Design, Initech', socials: 'bi-dribbble | #' },
                { name: 'Sam Park', role: 'Founder, Lumen', socials: 'bi-github | #' }
            ] }, reveal('up')),
            C('pricing', { heading: 'Tickets', subhead: 'Prices rise as we get closer.', showToggle: false, currency: '$', plans: [
                { name: 'Student', price: '99', period: '', desc: 'With valid ID.', features: 'All talks\nWorkshops\nLunch included', ctaLabel: 'Buy ticket', ctaHref: '#' },
                { name: 'Standard', price: '349', period: '', badge: 'Best value', highlighted: true, desc: 'The full experience.', features: 'All talks + workshops\nNetworking events\nSwag bag\nAfter-party', ctaLabel: 'Buy ticket', ctaHref: '#' },
                { name: 'VIP', price: '699', period: '', desc: 'Front-row everything.', features: 'Everything in Standard\nSpeaker dinner\nReserved seating', ctaLabel: 'Buy ticket', ctaHref: '#' }
            ] }),
            C('faq', { heading: 'Frequently asked questions', columns: '2', openFirst: true, items: [
                { q: 'Where is the venue?', a: 'Moscone Center, San Francisco. Details emailed after purchase.' },
                { q: 'Are tickets refundable?', a: 'Yes, up to 30 days before the event.' },
                { q: 'Will talks be recorded?', a: 'Yes — all ticket holders get recordings afterwards.' },
                { q: 'Is there a student discount?', a: 'Yes, the Student tier requires a valid student ID.' }
            ] }),
            C('cta-band', { heading: 'Don’t miss it', subhead: 'Early-bird pricing ends soon.', primaryLabel: 'Register now', primaryHref: '#tickets', secondaryShow: false, bgType: 'gradient', bg1: '#7c3aed', bg2: '#db2777', bgAngle: 130, tone: 'auto', align: 'center' }),
            C('footer', { tagline: 'The conference for modern builders.', variant: 'dark', copyright: '© {year} {brand}. See you there.', links: [
                { group: 'Event', label: 'Speakers', href: '#speakers' }, { group: 'Event', label: 'Tickets', href: '#tickets' },
                { group: 'Info', label: 'Venue', href: '#' }, { group: 'Info', label: 'Contact', href: '#' }
            ], social: [{ icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-instagram', href: '#' }, { icon: 'bi-linkedin', href: '#' }] })
        ]
    };

    // ── Portfolio ─────────────────────────────────────────────────────────────
    var portfolio = {
        label: 'Portfolio', icon: 'bi-person-badge', desc: 'Personal site: hero, work gallery, about, contact.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Work', href: '#work' }, { label: 'About', href: '#about' }, { label: 'Contact', href: '#contact' }], ctaLabel: 'Hire me', ctaHref: '#contact', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Designer & Developer', headline: 'I craft delightful digital experiences', subhead: 'Independent product designer helping teams turn ideas into beautiful, usable products.', primaryLabel: 'View my work', primaryHref: '#work', secondaryShow: true, secondaryLabel: 'Get in touch', secondaryHref: '#contact', bgType: 'none', tone: 'auto', minH: 'lg' }),
            C('gallery', { heading: 'Selected work', columns: '3', gap: 'md', lightbox: true, images: [{ image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }] }, reveal('up')),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'About me', title: 'Eight years designing products people love', text: 'I partner with startups and studios to design brands, websites and apps — from first sketch to launch.', ctaLabel: 'Download CV', ctaHref: '#', side: 'left' }
            ] }, reveal('up')),
            C('feature-grid', { heading: 'What I do', subhead: '', columns: '3', align: 'center', variant: 'plain', iconStyle: 'plain', items: [
                { icon: 'bi-vector-pen', title: 'Brand & identity', text: 'Logos and systems with personality.' },
                { icon: 'bi-window', title: 'Web & UI design', text: 'Clean, conversion-focused interfaces.' },
                { icon: 'bi-phone', title: 'Product design', text: 'End-to-end app experiences.' }
            ] }),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '8', suffix: '+', label: 'Years' }, { value: '120', suffix: '+', label: 'Projects' }, { value: '40', suffix: '+', label: 'Clients' }, { value: '15', suffix: '', label: 'Awards' }
            ] }, reveal('fade')),
            C('testimonials', { heading: 'Kind words', columns: '2', items: [
                { quote: 'A rare designer who ships. Our product has never looked better.', name: 'Morgan Blake', role: 'Founder, Lumen', rating: 5 },
                { quote: 'Thoughtful, fast and a joy to work with.', name: 'Riley Park', role: 'PM, Northwind', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Let’s work together', subhead: 'Have a project in mind? I’d love to hear about it.', primaryLabel: 'Start a project', primaryHref: '#contact', secondaryShow: false, bgType: 'gradient', bg1: '#4f46e5', bg2: '#0ea5e9', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('contact-form', { heading: 'Get in touch', subhead: 'Tell me about your project — I reply within a day.', recipient: '', subject: 'Portfolio enquiry', showPhone: false, buttonLabel: 'Send message', align: 'center' }),
            C('footer', { tagline: 'Independent product designer & developer.', variant: 'light', copyright: '© {year} {brand}.', links: [{ group: 'Links', label: 'Work', href: '#work' }, { group: 'Links', label: 'About', href: '#about' }], social: [{ icon: 'bi-dribbble', href: '#' }, { icon: 'bi-github', href: '#' }, { icon: 'bi-linkedin', href: '#' }] })
        ]
    };

    // ── Restaurant ────────────────────────────────────────────────────────────
    var restaurant = {
        label: 'Restaurant', icon: 'bi-cup-hot', desc: 'Eatery site: hero, menu, gallery, reservations.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '🍽️ Open daily 12–11pm · Walk-ins welcome', linkLabel: 'Book a table', linkHref: '#reserve', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Menu', href: '#menu' }, { label: 'About', href: '#about' }, { label: 'Gallery', href: '#gallery' }, { label: 'Contact', href: '#reserve' }], ctaLabel: 'Book a table', ctaHref: '#reserve', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Est. 2012', headline: 'Authentic flavors, crafted with love', subhead: 'Seasonal dishes made from the finest local ingredients, in a warm and welcoming space.', primaryLabel: 'View the menu', primaryHref: '#menu', secondaryShow: true, secondaryLabel: 'Reserve a table', secondaryHref: '#reserve', bgType: 'gradient', bg1: '#7c2d12', bg2: '#b91c1c', bgAngle: 135, tone: 'light', minH: 'lg' }),
            C('feature-grid', { heading: 'Why dine with us', subhead: '', columns: '3', align: 'center', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-flower1', title: 'Fresh & local', text: 'Ingredients sourced daily from local farms.' },
                { icon: 'bi-fire', title: 'Expert chefs', text: 'A team with two decades of craft.' },
                { icon: 'bi-house-heart', title: 'Cozy ambiance', text: 'A warm room made for lingering.' }
            ] }, reveal('up')),
            C('post-grid', { heading: 'Signature dishes', subhead: 'A taste of the menu.', columns: '3', items: [
                { image: '', category: 'Starter', title: 'Burrata & heirloom tomato', excerpt: 'Basil oil, aged balsamic — $14', href: '' },
                { image: '', category: 'Main', title: 'Wood-fired ribeye', excerpt: 'Rosemary butter, roast potatoes — $34', href: '' },
                { image: '', category: 'Dessert', title: 'Dark chocolate tart', excerpt: 'Sea salt, crème fraîche — $11', href: '' }
            ] }, reveal('up')),
            C('gallery', { heading: 'The experience', columns: '3', gap: 'sm', lightbox: true, images: [{ image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }] }),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '12', suffix: '', label: 'Years' }, { value: '80', suffix: '+', label: 'Dishes' }, { value: '4.9', suffix: '★', label: 'Rating' }, { value: '15', suffix: 'k', label: 'Guests / yr' }
            ] }, reveal('fade')),
            C('testimonials', { heading: 'What guests say', columns: '3', items: [
                { quote: 'The best meal we’ve had all year. Impeccable.', name: 'Alex Rivera', role: 'Local guide', rating: 5 },
                { quote: 'Cozy, delicious, and the service is spot on.', name: 'Sam Chen', role: 'Regular', rating: 5 },
                { quote: 'A hidden gem — book ahead!', name: 'Jordan Lee', role: 'Food critic', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Reserve your table tonight', subhead: 'Walk-ins welcome, but weekends fill fast.', primaryLabel: 'Book a table', primaryHref: '#reserve', secondaryShow: false, bgType: 'solid', bg1: '#7c2d12', tone: 'light', align: 'center' }),
            C('contact-form', { heading: 'Make a reservation', subhead: 'Tell us the date, time and party size — we’ll confirm by email.', recipient: '', subject: 'Table reservation', showPhone: true, buttonLabel: 'Request a table', align: 'center' }),
            C('footer', { tagline: 'Open daily 12–11pm · 123 Market St.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Visit', label: 'Menu', href: '#menu' }, { group: 'Visit', label: 'Hours', href: '#' }, { group: 'Contact', label: 'Reservations', href: '#reserve' }], social: [{ icon: 'bi-instagram', href: '#' }, { icon: 'bi-facebook', href: '#' }] })
        ]
    };

    // ── App (mobile app landing) ───────────────────────────────────────────────
    var app = {
        label: 'App', icon: 'bi-phone', desc: 'Mobile app landing: hero, features, reviews, download.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }], ctaLabel: 'Download', ctaHref: '#download', variant: 'solid', sticky: true }),
            C('hero', { layout: 'split', align: 'left', eyebrow: 'iOS & Android', headline: 'Your day, beautifully organized', subhead: 'Plan, track and focus — the app that brings your tasks, calendar and notes into one calm place.', primaryLabel: 'App Store', primaryHref: '#download', secondaryShow: true, secondaryLabel: 'Google Play', secondaryHref: '#download', image: '', bgType: 'gradient', bg1: '#0ea5e9', bg2: '#6366f1', bgAngle: 135, tone: 'auto', minH: 'lg' }),
            C('logo-cloud', { heading: 'As featured in', grayscale: true, marquee: true, logos: [{ image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }] }),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Plan', title: 'Every task, one calm inbox', text: 'Capture anything in seconds and let smart lists keep you on track.', ctaLabel: '', ctaHref: '#', side: 'right' },
                { image: '', eyebrow: 'Focus', title: 'Do more with less noise', text: 'Time-blocking, reminders and a focus mode that actually works.', ctaLabel: '', ctaHref: '#', side: 'left' }
            ] }, reveal('up')),
            C('bento-grid', { heading: 'Everything in one place', subhead: '', items: [
                { icon: 'bi-check2-circle', title: 'Tasks', text: 'Lists, subtasks, priorities.', size: 'wide' },
                { icon: 'bi-calendar-week', title: 'Calendar', size: 'md', accent: '#0ea5e9' },
                { icon: 'bi-journal-text', title: 'Notes', size: 'md', accent: '#8b5cf6' },
                { icon: 'bi-bell', title: 'Reminders', text: 'Never miss a beat.', size: 'tall' },
                { icon: 'bi-cloud', title: 'Sync', size: 'md' },
                { icon: 'bi-shield-lock', title: 'Private', size: 'md' }
            ] }, reveal('fade')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '1', suffix: 'M+', label: 'Downloads' }, { value: '4.8', suffix: '★', label: 'App Store' }, { value: '50', suffix: 'k', label: 'Reviews' }, { value: '30', suffix: '+', label: 'Countries' }
            ] }, reveal('fade')),
            C('testimonials', { heading: 'Loved on the stores', columns: '3', items: [
                { quote: 'The only planner that’s ever stuck for me.', name: 'Alex R.', role: '★★★★★', rating: 5 },
                { quote: 'Gorgeous, fast, and genuinely useful.', name: 'Sam C.', role: '★★★★★', rating: 5 },
                { quote: 'Replaced three apps on my phone.', name: 'Jordan L.', role: '★★★★★', rating: 5 }
            ] }),
            C('pricing', { heading: 'Free to start', subhead: 'Upgrade to Pro when you need more.', showToggle: true, currency: '$', plans: [
                { name: 'Free', price: '0', priceYear: '0', period: '/mo', desc: 'For getting started.', features: 'Unlimited tasks\nCalendar & notes\n1 device', ctaLabel: 'Download', ctaHref: '#download' },
                { name: 'Pro', price: '4', priceYear: '3', period: '/mo', badge: 'Popular', highlighted: true, desc: 'For power users.', features: 'Everything in Free\nAll devices synced\nFocus mode\nThemes', ctaLabel: 'Go Pro', ctaHref: '#' }
            ] }),
            C('faq', { heading: 'Frequently asked questions', columns: '2', openFirst: true, items: [
                { q: 'Is there a free version?', a: 'Yes — the Free plan is free forever on one device.' },
                { q: 'Does it sync across devices?', a: 'Yes, on the Pro plan.' },
                { q: 'Is my data private?', a: 'Your data is encrypted and never sold.' },
                { q: 'Which platforms are supported?', a: 'iOS, Android, and the web.' }
            ] }),
            C('cta-band', { heading: 'Get started today', subhead: 'Free on the App Store and Google Play.', primaryLabel: 'App Store', primaryHref: '#download', secondaryShow: true, secondaryLabel: 'Google Play', secondaryHref: '#download', bgType: 'gradient', bg1: '#0ea5e9', bg2: '#6366f1', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('footer', { tagline: 'The calm way to organize your day.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Product', label: 'Features', href: '#features' }, { group: 'Product', label: 'Pricing', href: '#pricing' }, { group: 'Company', label: 'About', href: '#' }, { group: 'Company', label: 'Support', href: '#' }], social: [{ icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-instagram', href: '#' }] })
        ]
    };

    // ── Nonprofit ─────────────────────────────────────────────────────────────
    var nonprofit = {
        label: 'Nonprofit', icon: 'bi-heart', desc: 'Charity site: mission, impact, programs, donate.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '💛 Double your impact — every gift matched this month.', linkLabel: 'Donate', linkHref: '#donate', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Mission', href: '#mission' }, { label: 'Programs', href: '#programs' }, { label: 'Impact', href: '#impact' }, { label: 'Contact', href: '#contact' }], ctaLabel: 'Donate', ctaHref: '#donate', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Since 2005', headline: 'Together, we can make a difference', subhead: 'We work alongside communities to deliver education, clean water and healthcare where it’s needed most.', primaryLabel: 'Donate now', primaryHref: '#donate', secondaryShow: true, secondaryLabel: 'Become a volunteer', secondaryHref: '#', bgType: 'gradient', bg1: '#0d9488', bg2: '#059669', bgAngle: 135, tone: 'auto', minH: 'lg' }),
            C('stats-counter', { heading: 'Our impact so far', columns: '4', items: [
                { value: '250', suffix: 'k', label: 'People helped' }, { value: '5', suffix: 'k+', label: 'Volunteers' }, { value: '40', suffix: '', label: 'Countries' }, { value: '120', suffix: '+', label: 'Projects' }
            ] }, reveal('fade')),
            C('feature-grid', { heading: 'What we do', subhead: 'Three focus areas, one shared goal.', columns: '3', align: 'center', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-book', title: 'Education', text: 'Schools, scholarships and teacher training.' },
                { icon: 'bi-droplet', title: 'Clean water', text: 'Wells and sanitation for whole villages.' },
                { icon: 'bi-heart-pulse', title: 'Healthcare', text: 'Clinics, vaccines and maternal care.' }
            ] }, reveal('up')),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Our mission', title: 'Lasting change, led by communities', text: 'We don’t parachute in — we partner locally so every project keeps giving long after we’ve gone.', ctaLabel: 'Read our story', ctaHref: '#', side: 'left' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'Voices from the field', columns: '2', items: [
                { quote: 'The new well changed everything — our children are healthy and in school.', name: 'Amara N.', role: 'Community leader', rating: 5 },
                { quote: 'With support and training, we built a clinic that serves 3,000 people.', name: 'Dr. Kofi A.', role: 'Program partner', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Your gift changes lives', subhead: 'Give once, or become a monthly supporter.', primaryLabel: 'Donate now', primaryHref: '#donate', secondaryShow: true, secondaryLabel: 'Other ways to help', secondaryHref: '#', bgType: 'gradient', bg1: '#0d9488', bg2: '#059669', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('newsletter', { heading: 'Stay in the loop', subhead: 'Get impact stories and updates — no spam.', placeholder: 'you@example.com', buttonLabel: 'Subscribe', recipient: '', layout: 'inline' }),
            C('footer', { tagline: 'A registered charity working for lasting change.', variant: 'dark', copyright: '© {year} {brand}. Reg. charity.', links: [{ group: 'About', label: 'Mission', href: '#mission' }, { group: 'About', label: 'Reports', href: '#' }, { group: 'Get involved', label: 'Donate', href: '#donate' }, { group: 'Get involved', label: 'Volunteer', href: '#' }], social: [{ icon: 'bi-facebook', href: '#' }, { icon: 'bi-instagram', href: '#' }, { icon: 'bi-twitter-x', href: '#' }] })
        ]
    };

    // ── Real Estate ───────────────────────────────────────────────────────────
    var realestate = {
        label: 'Real Estate', icon: 'bi-house-door', desc: 'Agency site: listings, agents, valuation, contact.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Buy', href: '#listings' }, { label: 'Sell', href: '#sell' }, { label: 'Agents', href: '#agents' }, { label: 'Contact', href: '#contact' }], ctaLabel: 'Book a viewing', ctaHref: '#contact', variant: 'solid', sticky: true }),
            C('hero', { layout: 'split', align: 'left', eyebrow: 'Trusted since 1998', headline: 'Find a place you’ll love to call home', subhead: 'From first apartments to forever homes — our local experts help you buy and sell with confidence.', primaryLabel: 'Browse listings', primaryHref: '#listings', secondaryShow: true, secondaryLabel: 'Free valuation', secondaryHref: '#sell', image: '', bgType: 'none', tone: 'auto', minH: 'lg' }),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '2.5', suffix: 'k', label: 'Homes sold' }, { value: '30', suffix: '', label: 'Cities' }, { value: '45', suffix: '', label: 'Agents' }, { value: '25', suffix: '', label: 'Years' }
            ] }, reveal('fade')),
            C('post-grid', { heading: 'Featured listings', subhead: 'A few of our latest homes.', columns: '3', items: [
                { image: '', category: 'For sale', title: '12 Maple Avenue', excerpt: '3 bed · 2 bath · $650,000', href: '#' },
                { image: '', category: 'For sale', title: '5 Riverside Court', excerpt: '4 bed · 3 bath · $890,000', href: '#' },
                { image: '', category: 'For rent', title: '8 Park Lane, Apt 4B', excerpt: '2 bed · 1 bath · $2,400/mo', href: '#' }
            ] }, reveal('up')),
            C('feature-grid', { heading: 'Why choose us', subhead: '', columns: '3', align: 'left', variant: 'plain', iconStyle: 'tile', items: [
                { icon: 'bi-person-check', title: 'Expert agents', text: 'Decades of local experience on your side.' },
                { icon: 'bi-geo-alt', title: 'Local knowledge', text: 'We know every street and school district.' },
                { icon: 'bi-cash-coin', title: 'No hidden fees', text: 'Transparent pricing, start to finish.' }
            ] }),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Selling?', title: 'We make selling simple', text: 'Free valuation, pro photography and marketing that gets your home in front of the right buyers.', ctaLabel: 'Get a free valuation', ctaHref: '#sell', side: 'right' }
            ] }, reveal('up')),
            C('team-grid', { heading: 'Meet our agents', subhead: '', columns: '4', items: [
                { name: 'Jane Doe', role: 'Senior Agent', socials: 'bi-telephone | #' },
                { name: 'John Smith', role: 'Buyer’s Agent', socials: 'bi-telephone | #' },
                { name: 'Amy Lee', role: 'Lettings', socials: 'bi-telephone | #' },
                { name: 'Sam Park', role: 'New Homes', socials: 'bi-telephone | #' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'What clients say', columns: '3', items: [
                { quote: 'Sold above asking in a week. Couldn’t be happier.', name: 'The Rivera family', role: 'Sellers', rating: 5 },
                { quote: 'They found us the perfect first home.', name: 'Sam & Riley', role: 'Buyers', rating: 5 },
                { quote: 'Professional, honest and always available.', name: 'Morgan B.', role: 'Landlord', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Ready to find your next home?', subhead: 'Browse listings or book a viewing today.', primaryLabel: 'Browse listings', primaryHref: '#listings', secondaryShow: true, secondaryLabel: 'Talk to an agent', secondaryHref: '#contact', bgType: 'solid', bg1: '#0f172a', tone: 'light', align: 'center' }),
            C('contact-form', { heading: 'Book a viewing', subhead: 'Tell us the property and a good time — we’ll confirm by phone.', recipient: '', subject: 'Viewing request', showPhone: true, buttonLabel: 'Request a viewing', align: 'center' }),
            C('footer', { tagline: 'Your local property experts since 1998.', variant: 'light', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Explore', label: 'Buy', href: '#listings' }, { group: 'Explore', label: 'Sell', href: '#sell' }, { group: 'Company', label: 'Agents', href: '#agents' }, { group: 'Company', label: 'Contact', href: '#contact' }], social: [{ icon: 'bi-facebook', href: '#' }, { icon: 'bi-instagram', href: '#' }] })
        ]
    };

    // ── Course (online education) ──────────────────────────────────────────────
    var course = {
        label: 'Course', icon: 'bi-mortarboard', desc: 'Online course: curriculum, instructors, pricing.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '🎓 Next cohort starts soon — early-bird 20% off.', linkLabel: 'Enroll', linkHref: '#pricing', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Curriculum', href: '#curriculum' }, { label: 'Instructors', href: '#instructors' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }], ctaLabel: 'Enroll now', ctaHref: '#pricing', variant: 'solid', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: '8-week online course', headline: 'Master modern web development', subhead: 'Go from beginner to job-ready with hands-on projects, expert mentorship and a supportive community.', primaryLabel: 'Enroll now', primaryHref: '#pricing', secondaryShow: true, secondaryLabel: 'Watch the intro', secondaryHref: '#', bgType: 'gradient', bg1: '#4f46e5', bg2: '#7c3aed', bgAngle: 135, tone: 'auto', minH: 'lg' }),
            C('checklist', { heading: 'What’s included', subhead: '', columns: '2', items: [
                { text: '60+ video lessons', included: true }, { text: '8 hands-on projects', included: true },
                { text: 'Certificate of completion', included: true }, { text: 'Private community access', included: true },
                { text: 'Lifetime updates', included: true }, { text: '1:1 mentor sessions (Mentored plan)', included: true }
            ] }, reveal('up')),
            C('feature-grid', { heading: 'What you’ll learn', subhead: '', columns: '3', align: 'left', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-braces', title: 'Fundamentals', text: 'HTML, CSS, JavaScript and the DOM.' },
                { icon: 'bi-boxes', title: 'Frameworks', text: 'Build real apps with a modern stack.' },
                { icon: 'bi-cloud-arrow-up', title: 'Ship it', text: 'Deploy, monitor and iterate in production.' }
            ] }, reveal('up')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '12', suffix: 'k', label: 'Students' }, { value: '4.9', suffix: '★', label: 'Rating' }, { value: '60', suffix: '+', label: 'Lessons' }, { value: '8', suffix: '', label: 'Projects' }
            ] }, reveal('fade')),
            C('team-grid', { heading: 'Your instructors', subhead: '', columns: '3', items: [
                { name: 'Jane Doe', role: 'Lead Instructor', bio: '10 years building products.', socials: 'bi-linkedin | #' },
                { name: 'John Smith', role: 'Mentor', bio: 'Senior engineer & coach.', socials: 'bi-github | #' },
                { name: 'Amy Lee', role: 'Career Coach', bio: 'Helps grads land roles.', socials: 'bi-linkedin | #' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'Student success stories', columns: '3', items: [
                { quote: 'I landed a developer job two months after finishing.', name: 'Alex R.', role: 'Now @ Acme', rating: 5 },
                { quote: 'The projects made everything click.', name: 'Sam C.', role: 'Career switcher', rating: 5 },
                { quote: 'Best money I’ve ever spent on learning.', name: 'Jordan L.', role: 'Freelancer', rating: 5 }
            ] }),
            C('pricing', { heading: 'Choose your plan', subhead: 'One payment. Lifetime access.', showToggle: false, currency: '$', plans: [
                { name: 'Self-paced', price: '299', period: '', desc: 'Learn on your own schedule.', features: 'All 60+ lessons\n8 projects\nCommunity access\nCertificate', ctaLabel: 'Enroll', ctaHref: '#' },
                { name: 'Mentored', price: '699', period: '', badge: 'Best results', highlighted: true, desc: 'With 1:1 guidance.', features: 'Everything in Self-paced\nWeekly 1:1 mentorship\nCode reviews\nCareer coaching', ctaLabel: 'Enroll', ctaHref: '#' }
            ] }),
            C('faq', { heading: 'Frequently asked questions', columns: '2', openFirst: true, items: [
                { q: 'Do I need prior experience?', a: 'No — we start from the fundamentals.' },
                { q: 'How much time per week?', a: 'Plan for 8–10 hours a week over 8 weeks.' },
                { q: 'Is there a certificate?', a: 'Yes, you earn one on completion.' },
                { q: 'What if it’s not for me?', a: '14-day money-back guarantee, no questions asked.' }
            ] }),
            C('cta-band', { heading: 'Start learning today', subhead: 'Join thousands of graduates building their future.', primaryLabel: 'Enroll now', primaryHref: '#pricing', secondaryShow: false, bgType: 'gradient', bg1: '#4f46e5', bg2: '#7c3aed', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('footer', { tagline: 'Job-ready web development, taught by practitioners.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Course', label: 'Curriculum', href: '#curriculum' }, { group: 'Course', label: 'Pricing', href: '#pricing' }, { group: 'Support', label: 'FAQ', href: '#faq' }, { group: 'Support', label: 'Contact', href: '#' }], social: [{ icon: 'bi-youtube', href: '#' }, { icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-linkedin', href: '#' }] })
        ]
    };

    // ── Fitness (gym / studio) ─────────────────────────────────────────────────
    var fitness = {
        label: 'Fitness', icon: 'bi-heart-pulse', desc: 'Gym site: classes, trainers, membership, join.',
        chrome: 'blank',
        components: [
            C('announcement-bar', { text: '💪 7-day free trial — no card required.', linkLabel: 'Start now', linkHref: '#join', dismissible: true, align: 'center' }),
            C('navbar', { links: [{ label: 'Classes', href: '#classes' }, { label: 'Trainers', href: '#trainers' }, { label: 'Pricing', href: '#pricing' }, { label: 'Contact', href: '#contact' }], ctaLabel: 'Join now', ctaHref: '#join', variant: 'solid', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: '24/7 access', headline: 'Train harder. Feel stronger.', subhead: 'Expert coaching, modern equipment and a community that shows up. Your first week is on us.', primaryLabel: 'Start free trial', primaryHref: '#join', secondaryShow: true, secondaryLabel: 'View classes', secondaryHref: '#classes', bgType: 'gradient', bg1: '#0f172a', bg2: '#ea580c', bgAngle: 130, tone: 'light', minH: 'lg' }),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '2', suffix: 'k+', label: 'Members' }, { value: '60', suffix: '', label: 'Classes / week' }, { value: '25', suffix: '', label: 'Trainers' }, { value: '10', suffix: '', label: 'Years' }
            ] }, reveal('fade')),
            C('feature-grid', { heading: 'Why train with us', subhead: '', columns: '3', align: 'center', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-award', title: 'Expert coaches', text: 'Certified trainers who tailor every session.' },
                { icon: 'bi-lightning-charge', title: 'Top equipment', text: 'A fully-kitted floor for every discipline.' },
                { icon: 'bi-clock', title: 'Flexible hours', text: 'Open 24/7 — train on your schedule.' }
            ] }, reveal('up')),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Programs', title: 'A plan for every goal', text: 'Strength, HIIT, mobility or yoga — start where you are and build from there.', ctaLabel: 'See the timetable', ctaHref: '#classes', side: 'right' }
            ] }, reveal('up')),
            C('pricing', { heading: 'Membership', subhead: 'No contracts. Cancel anytime.', showToggle: true, currency: '$', plans: [
                { name: 'Basic', price: '29', priceYear: '24', period: '/mo', desc: 'Gym floor access.', features: 'Gym & equipment\nLocker room\nApp workouts', ctaLabel: 'Join', ctaHref: '#join' },
                { name: 'Pro', price: '49', priceYear: '39', period: '/mo', badge: 'Most popular', highlighted: true, desc: 'Classes included.', features: 'Everything in Basic\nUnlimited classes\n1 PT session / mo', ctaLabel: 'Join', ctaHref: '#join' },
                { name: 'Elite', price: '89', priceYear: '72', period: '/mo', desc: 'Full coaching.', features: 'Everything in Pro\nWeekly PT\nNutrition plan', ctaLabel: 'Join', ctaHref: '#join' }
            ] }),
            C('team-grid', { heading: 'Meet the trainers', subhead: '', columns: '4', items: [
                { name: 'Jade M.', role: 'Strength', socials: 'bi-instagram | #' },
                { name: 'Marcus T.', role: 'HIIT', socials: 'bi-instagram | #' },
                { name: 'Sofia R.', role: 'Yoga & mobility', socials: 'bi-instagram | #' },
                { name: 'Dan K.', role: 'Nutrition', socials: 'bi-instagram | #' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'Member stories', columns: '3', items: [
                { quote: 'Down 20kg and stronger than ever. This place changed my life.', name: 'Alex R.', role: 'Member, 2 yrs', rating: 5 },
                { quote: 'The coaches actually care. I look forward to every session.', name: 'Sam C.', role: 'Member, 1 yr', rating: 5 },
                { quote: 'Best gym community I’ve ever been part of.', name: 'Jordan L.', role: 'Member', rating: 5 }
            ] }),
            C('cta-band', { heading: 'Your first week is on us', subhead: 'Start your free trial today — no card needed.', primaryLabel: 'Start free trial', primaryHref: '#join', secondaryShow: false, bgType: 'gradient', bg1: '#0f172a', bg2: '#ea580c', bgAngle: 130, tone: 'light', align: 'center' }),
            C('footer', { tagline: 'Train 24/7 · 250 High Street.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Train', label: 'Classes', href: '#classes' }, { group: 'Train', label: 'Pricing', href: '#pricing' }, { group: 'Gym', label: 'Trainers', href: '#trainers' }, { group: 'Gym', label: 'Contact', href: '#contact' }], social: [{ icon: 'bi-instagram', href: '#' }, { icon: 'bi-facebook', href: '#' }, { icon: 'bi-youtube', href: '#' }] })
        ]
    };

    // ── Podcast ───────────────────────────────────────────────────────────────
    var podcast = {
        label: 'Podcast', icon: 'bi-mic', desc: 'Show site: episodes, hosts, subscribe.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Episodes', href: '#episodes' }, { label: 'About', href: '#about' }, { label: 'Guests', href: '#guests' }, { label: 'Subscribe', href: '#subscribe' }], ctaLabel: 'Subscribe', ctaHref: '#subscribe', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'New episode every Tuesday', headline: 'Conversations that move you forward', subhead: 'Candid interviews with founders, makers and thinkers — the ideas and stories behind the work.', primaryLabel: 'Listen now', primaryHref: '#episodes', secondaryShow: true, secondaryLabel: 'Watch on YouTube', secondaryHref: '#', bgType: 'gradient', bg1: '#7c3aed', bg2: '#db2777', bgAngle: 135, tone: 'auto', minH: 'lg' }),
            C('social-links', { heading: 'Listen on', variant: 'filled', size: 'md', align: 'center', items: [{ icon: 'bi-spotify', href: '#' }, { icon: 'bi-apple', href: '#' }, { icon: 'bi-youtube', href: '#' }, { icon: 'bi-rss', href: '#' }] }),
            C('post-grid', { heading: 'Latest episodes', subhead: '', columns: '3', items: [
                { image: '', category: 'Ep 42', title: 'Building in public with Jane Doe', excerpt: 'On shipping fast and staying sane · 48 min', href: '#' },
                { image: '', category: 'Ep 41', title: 'The craft of great design', excerpt: 'With John Smith · 52 min', href: '#' },
                { image: '', category: 'Ep 40', title: 'From side project to startup', excerpt: 'With Amy Lee · 44 min', href: '#' }
            ] }, reveal('up')),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'About the show', title: 'Real talk with people who build', text: 'Each week we go deep with a guest on how they work, what they’ve learned, and what’s next.', ctaLabel: 'Meet the hosts', ctaHref: '#about', side: 'left' }
            ] }, reveal('up')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '120', suffix: '+', label: 'Episodes' }, { value: '2', suffix: 'M', label: 'Downloads' }, { value: '50', suffix: 'k', label: 'Listeners' }, { value: '4.9', suffix: '★', label: 'Rating' }
            ] }, reveal('fade')),
            C('testimonials', { heading: 'What listeners say', columns: '3', items: [
                { quote: 'My favorite hour of the week. Consistently brilliant.', name: 'Alex R.', role: '★★★★★', rating: 5 },
                { quote: 'The interviews are so honest and useful.', name: 'Sam C.', role: '★★★★★', rating: 5 },
                { quote: 'I’ve learned more here than in any course.', name: 'Jordan L.', role: '★★★★★', rating: 5 }
            ] }),
            C('newsletter', { heading: 'Never miss an episode', subhead: 'Get new episodes and show notes in your inbox.', placeholder: 'you@example.com', buttonLabel: 'Subscribe', recipient: '', layout: 'inline' }),
            C('cta-band', { heading: 'Subscribe wherever you listen', subhead: 'Available on Spotify, Apple Podcasts and YouTube.', primaryLabel: 'Subscribe', primaryHref: '#subscribe', secondaryShow: false, bgType: 'gradient', bg1: '#7c3aed', bg2: '#db2777', bgAngle: 135, tone: 'auto', align: 'center' }),
            C('footer', { tagline: 'A weekly show about building things.', variant: 'dark', copyright: '© {year} {brand}.', links: [{ group: 'Show', label: 'Episodes', href: '#episodes' }, { group: 'Show', label: 'About', href: '#about' }, { group: 'Listen', label: 'Spotify', href: '#' }, { group: 'Listen', label: 'Apple', href: '#' }], social: [{ icon: 'bi-spotify', href: '#' }, { icon: 'bi-youtube', href: '#' }, { icon: 'bi-twitter-x', href: '#' }] })
        ]
    };

    // ── Wedding ───────────────────────────────────────────────────────────────
    var wedding = {
        label: 'Wedding', icon: 'bi-suit-heart', desc: 'Wedding site: story, details, countdown, RSVP.',
        chrome: 'blank',
        components: [
            C('navbar', { brand: 'S & J', showBrand: true, links: [{ label: 'Our Story', href: '#story' }, { label: 'Details', href: '#details' }, { label: 'Gallery', href: '#gallery' }, { label: 'RSVP', href: '#rsvp' }], ctaLabel: 'RSVP', ctaHref: '#rsvp', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'September 14, 2026 · Napa Valley', headline: 'Sarah & James', subhead: 'We’re getting married — and we’d love for you to be there to celebrate with us.', primaryLabel: 'RSVP now', primaryHref: '#rsvp', secondaryShow: true, secondaryLabel: 'Our story', secondaryHref: '#story', bgType: 'gradient', bg1: '#e11d48', bg2: '#f59e0b', bgAngle: 130, tone: 'light', minH: 'lg' }),
            C('countdown', { heading: 'Counting down to “I do”', target: '2026-09-14T15:00', expiredText: 'Today’s the day — we’re married!', variant: 'boxes', align: 'center' }),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'Our story', title: 'How it all began', text: 'From a chance meeting at a coffee shop to this — we can’t wait to share the next chapter with the people we love.', ctaLabel: 'Read our story', ctaHref: '#story', side: 'left' }
            ] }, reveal('up')),
            C('feature-grid', { heading: 'The details', subhead: '', columns: '3', align: 'center', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-flower2', title: 'Ceremony', text: '3:00 PM · Vineyard Lawn' },
                { icon: 'bi-cup-straw', title: 'Reception', text: '5:00 PM · The Barn' },
                { icon: 'bi-geo-alt', title: 'Getting there', text: 'Shuttles from the hotel at 2:15 PM' }
            ] }, reveal('up')),
            C('gallery', { heading: 'Our moments', columns: '3', gap: 'sm', lightbox: true, images: [{ image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }] }),
            C('team-grid', { heading: 'The wedding party', subhead: '', columns: '4', items: [
                { name: 'Emma', role: 'Maid of Honor' }, { name: 'Liam', role: 'Best Man' },
                { name: 'Ava', role: 'Bridesmaid' }, { name: 'Noah', role: 'Groomsman' }
            ] }, reveal('up')),
            C('cta-band', { heading: 'We can’t wait to celebrate with you', subhead: 'Kindly let us know by August 1st.', primaryLabel: 'RSVP now', primaryHref: '#rsvp', secondaryShow: false, bgType: 'gradient', bg1: '#e11d48', bg2: '#f59e0b', bgAngle: 130, tone: 'light', align: 'center' }),
            C('contact-form', { heading: 'RSVP', subhead: 'Let us know if you can make it, and any dietary needs.', recipient: '', subject: 'Wedding RSVP', showPhone: false, buttonLabel: 'Send RSVP', align: 'center' }),
            C('footer', { brand: 'Sarah & James', showBrand: true, tagline: 'With love — September 14, 2026.', variant: 'light', copyright: '© {year} Sarah & James.', links: [{ group: 'Wedding', label: 'Details', href: '#details' }, { group: 'Wedding', label: 'RSVP', href: '#rsvp' }], social: [{ icon: 'bi-instagram', href: '#' }] })
        ]
    };

    // ── Blog / Newsletter ─────────────────────────────────────────────────────
    var blog = {
        label: 'Blog', icon: 'bi-journal-richtext', desc: 'Blog / newsletter: articles, topics, subscribe.',
        chrome: 'blank',
        components: [
            C('navbar', { links: [{ label: 'Articles', href: '#articles' }, { label: 'Topics', href: '#topics' }, { label: 'About', href: '#about' }, { label: 'Subscribe', href: '#subscribe' }], ctaLabel: 'Subscribe', ctaHref: '#subscribe', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'The weekly newsletter', headline: 'Ideas worth reading', subhead: 'Fresh essays on design, code and building things — delivered every Sunday.', primaryLabel: 'Read the latest', primaryHref: '#articles', secondaryShow: true, secondaryLabel: 'Subscribe free', secondaryHref: '#subscribe', bgType: 'none', tone: 'auto', minH: 'md' }),
            C('post-grid', { heading: 'Latest articles', subhead: '', columns: '3', items: [
                { image: '', category: 'Design', title: 'The quiet power of good defaults', excerpt: 'Why the best interfaces get out of your way.', author: 'You', date: 'Aug 10, 2026', href: '#' },
                { image: '', category: 'Engineering', title: 'Shipping small, shipping often', excerpt: 'A case for tiny, frequent releases.', author: 'You', date: 'Aug 3, 2026', href: '#' },
                { image: '', category: 'Career', title: 'On doing work that matters', excerpt: 'Finding leverage in what you build.', author: 'You', date: 'Jul 27, 2026', href: '#' }
            ] }, reveal('up')),
            C('feature-grid', { heading: 'Browse by topic', subhead: '', columns: '3', align: 'center', variant: 'plain', iconStyle: 'plain', items: [
                { icon: 'bi-palette', title: 'Design', text: 'Craft, taste and interfaces.' },
                { icon: 'bi-braces', title: 'Engineering', text: 'Code, tools and systems.' },
                { icon: 'bi-compass', title: 'Career', text: 'Growth and doing great work.' }
            ] }),
            C('feature-split', { heading: '', subhead: '', rows: [
                { image: '', eyebrow: 'About', title: 'Written by a working practitioner', text: 'I share what I’m learning as I build — honestly, and in public. No fluff.', ctaLabel: 'More about me', ctaHref: '#about', side: 'left' }
            ] }, reveal('up')),
            C('testimonials', { heading: 'What readers say', columns: '2', items: [
                { quote: 'The only newsletter I read top to bottom every week.', name: 'Alex R.', role: 'Reader', rating: 5 },
                { quote: 'Consistently thoughtful and genuinely useful.', name: 'Sam C.', role: 'Reader', rating: 5 }
            ] }),
            C('newsletter', { heading: 'Join 20,000+ readers', subhead: 'One email every Sunday. Unsubscribe anytime.', placeholder: 'you@example.com', buttonLabel: 'Subscribe', recipient: '', layout: 'inline' }),
            C('footer', { tagline: 'Essays on design, code and building.', variant: 'light', copyright: '© {year} {brand}.', links: [{ group: 'Read', label: 'Articles', href: '#articles' }, { group: 'Read', label: 'Topics', href: '#topics' }], social: [{ icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-rss', href: '#' }] })
        ]
    };

    // ── SaaS (Dark) ───────────────────────────────────────────────────────────
    var saasdark = {
        label: 'SaaS (Dark)', icon: 'bi-moon-stars', desc: 'Dark product landing: hero, features, pricing.',
        chrome: 'blank', dark: true,
        components: [
            C('navbar', { links: [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'Docs', href: '#' }], ctaLabel: 'Start free', ctaHref: '#', variant: 'blur', sticky: true }),
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Built for developers', headline: 'The platform that ships with you', subhead: 'A fast, modern developer platform — deploy in seconds, scale without surprises.', primaryLabel: 'Start free', primaryHref: '#', secondaryShow: true, secondaryLabel: 'Read the docs', secondaryHref: '#', bgType: 'gradient', bg1: '#0b1220', bg2: '#4f46e5', bgAngle: 140, tone: 'light', minH: 'lg' }),
            C('logo-cloud', { heading: 'Trusted by engineering teams', grayscale: true, marquee: true, logos: [{ image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }, { image: '', alt: '' }] }),
            C('feature-grid', { heading: 'Everything you need', subhead: 'Batteries included, zero config.', columns: '3', align: 'left', variant: 'card', iconStyle: 'tile', items: [
                { icon: 'bi-lightning-charge', title: 'Instant deploys', text: 'Push to ship in seconds.' },
                { icon: 'bi-graph-up-arrow', title: 'Autoscale', text: 'Handles spikes automatically.' },
                { icon: 'bi-shield-lock', title: 'Secure by default', text: 'SSO, secrets and audit logs.' }
            ] }, reveal('up')),
            C('bento-grid', { heading: 'One platform', subhead: '', items: [
                { icon: 'bi-hdd-network', title: 'Edge network', text: 'Global by default.', size: 'wide' },
                { icon: 'bi-database', title: 'Databases', size: 'md', accent: '#38bdf8' },
                { icon: 'bi-diagram-3', title: 'Queues', size: 'md', accent: '#a78bfa' },
                { icon: 'bi-graph-up', title: 'Observability', text: 'Logs, metrics, traces.', size: 'tall' },
                { icon: 'bi-git', title: 'Git-native', size: 'md' },
                { icon: 'bi-shield-check', title: 'Compliance', size: 'md' }
            ] }, reveal('fade')),
            C('stats-counter', { heading: '', columns: '4', items: [
                { value: '99.99', suffix: '%', label: 'Uptime' }, { value: '40', suffix: 'ms', label: 'p50 latency' }, { value: '1', suffix: 'M+', label: 'Deploys / mo' }, { value: '30', suffix: '+', label: 'Regions' }
            ] }, reveal('fade')),
            C('pricing', { heading: 'Simple pricing', subhead: 'Start free, scale as you grow.', showToggle: true, currency: '$', plans: [
                { name: 'Hobby', price: '0', priceYear: '0', period: '/mo', desc: 'For personal projects.', features: '1 project\nCommunity support\n100 GB bandwidth', ctaLabel: 'Start free', ctaHref: '#' },
                { name: 'Pro', price: '20', priceYear: '16', period: '/mo', badge: 'Popular', highlighted: true, desc: 'For teams.', features: 'Unlimited projects\nAutoscaling\nSSO\nPriority support', ctaLabel: 'Start trial', ctaHref: '#' },
                { name: 'Enterprise', price: 'Custom', period: '', desc: 'For scale.', features: 'Everything in Pro\nSLA & security review\nDedicated support', ctaLabel: 'Contact us', ctaHref: '#' }
            ] }),
            C('testimonials', { heading: 'Developers love it', columns: '3', items: [
                { quote: 'We cut our deploy time from 20 minutes to 20 seconds.', name: 'Alex R.', role: 'Staff Eng, Acme', rating: 5 },
                { quote: 'It just works. That’s the highest praise I can give.', name: 'Sam C.', role: 'CTO, Globex', rating: 5 },
                { quote: 'The DX is unmatched.', name: 'Jordan L.', role: 'Founder', rating: 5 }
            ] }),
            C('faq', { heading: 'Questions', columns: '2', openFirst: true, items: [
                { q: 'Is there a free plan?', a: 'Yes — Hobby is free forever.' },
                { q: 'Can I self-host?', a: 'Enterprise includes self-hosting options.' },
                { q: 'Which frameworks are supported?', a: 'All the popular ones, zero config.' },
                { q: 'How does pricing scale?', a: 'Usage-based above generous free limits.' }
            ] }),
            C('cta-band', { heading: 'Start building today', subhead: 'Deploy your first project free.', primaryLabel: 'Start free', primaryHref: '#', secondaryShow: true, secondaryLabel: 'Read the docs', secondaryHref: '#', bgType: 'gradient', bg1: '#0b1220', bg2: '#4f46e5', bgAngle: 140, tone: 'light', align: 'center' }),
            C('footer', { tagline: 'The developer platform that ships with you.', variant: 'dark', copyright: '© {year} {brand}. All rights reserved.', links: [{ group: 'Product', label: 'Features', href: '#features' }, { group: 'Product', label: 'Pricing', href: '#pricing' }, { group: 'Company', label: 'Docs', href: '#' }, { group: 'Company', label: 'Contact', href: '#' }], social: [{ icon: 'bi-github', href: '#' }, { icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-discord', href: '#' }] })
        ]
    };

    // ── Coming Soon ───────────────────────────────────────────────────────────
    var comingsoon = {
        label: 'Coming Soon', icon: 'bi-hourglass-split', desc: 'Launch page: countdown, notify, social.',
        chrome: 'blank', dark: true,
        components: [
            C('hero', { layout: 'center', align: 'center', eyebrow: 'Launching soon', headline: 'Something big is coming', subhead: 'We’re putting the finishing touches on it. Sign up to be the first to know.', primaryLabel: 'Notify me', primaryHref: '#notify', secondaryShow: false, secondaryLabel: '', secondaryHref: '#', bgType: 'gradient', bg1: '#0f172a', bg2: '#6d28d9', bgAngle: 135, tone: 'light', minH: 'screen' }),
            C('countdown', { heading: 'Launching in', target: '2026-12-31T00:00', expiredText: 'We’re live — welcome!', variant: 'boxes', align: 'center' }),
            C('newsletter', { heading: 'Get early access', subhead: 'Join the waitlist — no spam, just launch news.', placeholder: 'you@example.com', buttonLabel: 'Notify me', recipient: '', layout: 'inline' }),
            C('social-links', { heading: 'Follow along', variant: 'outline', size: 'md', align: 'center', items: [{ icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-instagram', href: '#' }, { icon: 'bi-github', href: '#' }] }),
            C('footer', { tagline: 'Coming soon.', variant: 'dark', copyright: '© {year} {brand}.', links: [], social: [{ icon: 'bi-twitter-x', href: '#' }] })
        ]
    };

    // ── Link in Bio ───────────────────────────────────────────────────────────
    var linkinbio = {
        label: 'Link in Bio', icon: 'bi-person-circle', desc: 'Bio links: avatar, buttons, socials.',
        chrome: 'blank', dark: true,
        components: [
            C('image', { src: '', alt: '', width: 16, align: 'center', radius: 200, ratio: '1/1', fit: 'cover', bg: '' }),
            C('heading', { text: 'Your Name', level: 'h2' }, { align: 'center', class: '', customCss: '' }),
            C('text', { text: 'Creator · Designer · Coffee lover ☕' }, { align: 'center', class: '', customCss: '' }),
            C('link-list', { variant: 'solid', maxWidth: '460px', items: [
                { label: 'My website', href: '#', icon: 'bi-globe' },
                { label: 'Latest video', href: '#', icon: 'bi-youtube' },
                { label: 'Shop my picks', href: '#', icon: 'bi-bag' },
                { label: 'Newsletter', href: '#', icon: 'bi-envelope' },
                { label: 'Say hello', href: '#', icon: 'bi-chat-dots' }
            ] }),
            C('social-links', { heading: '', variant: 'plain', size: 'lg', align: 'center', items: [{ icon: 'bi-instagram', href: '#' }, { icon: 'bi-twitter-x', href: '#' }, { icon: 'bi-youtube', href: '#' }, { icon: 'bi-tiktok', href: '#' }] })
        ]
    };

    PPD.starters = { saas: saas, agency: agency, event: event, portfolio: portfolio, restaurant: restaurant, app: app, nonprofit: nonprofit, realestate: realestate, course: course, fitness: fitness, podcast: podcast, wedding: wedding, blog: blog, saasdark: saasdark, comingsoon: comingsoon, linkinbio: linkinbio };
    PPD.starterList = [
        { key: 'blank', label: 'Blank', icon: 'bi-file-earmark', desc: 'Start from scratch.' },
        { key: 'saas', label: saas.label, icon: saas.icon, desc: saas.desc },
        { key: 'agency', label: agency.label, icon: agency.icon, desc: agency.desc },
        { key: 'event', label: event.label, icon: event.icon, desc: event.desc },
        { key: 'portfolio', label: portfolio.label, icon: portfolio.icon, desc: portfolio.desc },
        { key: 'restaurant', label: restaurant.label, icon: restaurant.icon, desc: restaurant.desc },
        { key: 'app', label: app.label, icon: app.icon, desc: app.desc },
        { key: 'nonprofit', label: nonprofit.label, icon: nonprofit.icon, desc: nonprofit.desc },
        { key: 'realestate', label: realestate.label, icon: realestate.icon, desc: realestate.desc },
        { key: 'course', label: course.label, icon: course.icon, desc: course.desc },
        { key: 'fitness', label: fitness.label, icon: fitness.icon, desc: fitness.desc },
        { key: 'podcast', label: podcast.label, icon: podcast.icon, desc: podcast.desc },
        { key: 'wedding', label: wedding.label, icon: wedding.icon, desc: wedding.desc },
        { key: 'blog', label: blog.label, icon: blog.icon, desc: blog.desc },
        { key: 'saasdark', label: saasdark.label, icon: saasdark.icon, desc: saasdark.desc },
        { key: 'comingsoon', label: comingsoon.label, icon: comingsoon.icon, desc: comingsoon.desc },
        { key: 'linkinbio', label: linkinbio.label, icon: linkinbio.icon, desc: linkinbio.desc }
    ];

    /* ── Wireframe thumbnails — a mini SVG page preview generated from the actual
       section list, so a template's thumbnail always reflects its real layout. */
    function thumbCat(t) {
        return ({ 'announcement-bar': 'ann', 'marquee': 'ann', 'navbar': 'nav', 'hero': 'hero',
            'logo-cloud': 'logos', 'carousel': 'logos', 'social-links': 'logos',
            'feature-grid': 'cards', 'pricing': 'cards', 'testimonials': 'cards', 'post-grid': 'cards',
            'team-grid': 'circles', 'bento-grid': 'bento', 'feature-split': 'split',
            'stats-counter': 'stats', 'countdown': 'stats', 'faq': 'lines', 'checklist': 'lines',
            'comparison-table': 'lines', 'contact-form': 'form', 'newsletter': 'form',
            'cta-band': 'cta', 'footer': 'footer', 'video-embed': 'media', 'gallery': 'grid', 'link-list': 'links' })[t] || 'block';
    }
    function starterThumbSvg(components) {
        var x = 6, w = 88, y = 6, P = [];
        var A = 'var(--ppd-primary,#6d5dfc)', L = '#e5e7eb', M = '#cbd5e1', D = '#1e293b';
        function r(rx, ry, rw, rh, fill, rad) { P.push('<rect x="' + rx + '" y="' + ry + '" width="' + rw + '" height="' + rh + '" rx="' + (rad == null ? 1.5 : rad) + '" fill="' + fill + '"/>'); }
        function d(cx, cy, rr, fill) { P.push('<circle cx="' + cx + '" cy="' + cy + '" r="' + rr + '" fill="' + fill + '"/>'); }
        (components || []).forEach(function (c) {
            var k = thumbCat(c.type), i;
            if (k === 'ann') { r(x, y, w, 3, A); y += 5; }
            else if (k === 'nav') { r(x, y, 6, 6, D); d(x + w - 3, y + 3, 1, M); d(x + w - 9, y + 3, 1, M); d(x + w - 15, y + 3, 1, M); y += 9; }
            else if (k === 'hero') { r(x, y, w, 40, A, 3); r(x + w / 2 - 10, y + 8, 20, 3, '#ffffff', 1.5); r(x + w / 2 - 22, y + 15, 44, 6, 'rgba(255,255,255,.7)', 1.5); r(x + w / 2 - 9, y + 27, 18, 5, '#ffffff', 2); y += 44; }
            else if (k === 'logos') { for (i = 0; i < 5; i++) r(x + i * (w / 5) + 2, y + 2, w / 5 - 4, 4, M, 1); y += 10; }
            else if (k === 'cards') { for (i = 0; i < 3; i++) r(x + i * (w / 3) + 1.5, y, w / 3 - 3, 20, L, 2); y += 24; }
            else if (k === 'circles') { for (i = 0; i < 4; i++) { d(x + i * (w / 4) + w / 8, y + 6, 4, M); r(x + i * (w / 4) + w / 8 - 6, y + 12, 12, 2, L, 1); } y += 18; }
            else if (k === 'bento') { r(x, y, w / 2 - 2, 18, L, 2); r(x + w / 2 + 2, y, w / 2 - 2, 8, L, 2); r(x + w / 2 + 2, y + 10, w / 2 - 2, 8, L, 2); y += 22; }
            else if (k === 'split') { r(x, y, w / 2 - 3, 22, M, 2); r(x + w / 2 + 2, y + 3, w / 2 - 4, 3, L, 1); r(x + w / 2 + 2, y + 9, w / 2 - 10, 3, L, 1); r(x + w / 2 + 2, y + 15, 16, 4, A, 1.5); y += 26; }
            else if (k === 'stats') { for (i = 0; i < 4; i++) { r(x + i * (w / 4) + 4, y + 2, w / 4 - 8, 7, A, 1); r(x + i * (w / 4) + 3, y + 11, w / 4 - 6, 2, L, 1); } y += 16; }
            else if (k === 'lines') { r(x, y, w, 5, L, 1.5); r(x, y + 7, w, 5, L, 1.5); r(x, y + 14, w, 5, L, 1.5); y += 22; }
            else if (k === 'form') { r(x + 10, y, w - 20, 5, L, 1.5); r(x + 10, y + 8, w - 20, 5, L, 1.5); r(x + w / 2 - 10, y + 16, 20, 5, A, 2); y += 24; }
            else if (k === 'cta') { r(x, y, w, 18, A, 3); r(x + w / 2 - 9, y + 6, 18, 5, '#ffffff', 2); y += 22; }
            else if (k === 'footer') { r(x, y, w, 16, D, 2); for (i = 0; i < 3; i++) { r(x + 4 + i * 24, y + 3, 18, 2, 'rgba(255,255,255,.4)', 1); r(x + 4 + i * 24, y + 7, 14, 2, 'rgba(255,255,255,.22)', 1); } y += 18; }
            else if (k === 'media') { r(x, y, w, 28, D, 3); P.push('<path d="M' + (x + w / 2 - 3) + ' ' + (y + 10) + ' l7 4 -7 4 z" fill="#ffffff"/>'); y += 32; }
            else if (k === 'grid') { for (i = 0; i < 6; i++) r(x + (i % 3) * (w / 3) + 1.5, y + Math.floor(i / 3) * 11, w / 3 - 3, 9, L, 1.5); y += 24; }
            else if (k === 'links') { for (i = 0; i < 4; i++) r(x + 14, y + i * 9, w - 28, 6, A, 3); y += 38; }
            else { r(x, y, w, 16, L, 2); y += 20; }
        });
        var H = y + 4;
        return '<svg class="ppd-starter-thumb" viewBox="0 0 100 ' + H + '" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">' + P.join('') + '</svg>';
    }
    function blankThumb() {
        return '<svg class="ppd-starter-thumb" viewBox="0 0 100 120" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">'
            + '<rect x="8" y="8" width="84" height="104" rx="4" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4 3"/>'
            + '<line x1="50" y1="48" x2="50" y2="72" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round"/>'
            + '<line x1="38" y1="60" x2="62" y2="60" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round"/></svg>';
    }
    PPD.starterThumb = function (key) { return (key === 'blank' || !PPD.starters[key]) ? blankThumb() : starterThumbSvg(PPD.starters[key].components); };
})();
