// Winkz Designs 2026, SEO landing pages: service pages, niche/industry pages, location page.
// One shared template driven by a content object; each page gets a distinct accent color,
// hero icon and includes-layout so the set doesn't feel like one page copy-pasted 11 times.
(function () {
  const { Icon, Reveal, Eyebrow, Panel, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';
  const PALETTE = ['#2DE3EA', '#F23BFE', '#79BAFF'];

  const SERVICE_PAGES = {
    'website-design': {
      icon: 'Globe',
      image: 'assets/seo/website-design.png',
      eyebrow: 'Website Design & Development',
      sectionTitle: <>What the <Grad>build includes.</Grad></>,
      h1: <>Websites built to <Grad>convert, not just look nice.</Grad></>,
      sub: "Custom-designed, custom-coded sites, from a sharp one-pager to a full web app. No templates, no builder lock-in, and it's yours to keep.",
      keywordCopy: "Whether you're comparing custom website design, small business web design or a full website redesign, Winkz builds fast, mobile-first sites that are easy to find in Google and AI search results alike.",
      includes: [
        ['PenTool', 'Custom design', 'A layout, look and copy strategy built around your business, not a theme.'],
        ['Code2', 'Hand-built, fast', 'Real code, not a page builder. Loads fast, scores well, ages well.'],
        ['Smartphone', 'Every screen', 'Designed mobile-first and tested across devices before it ships.'],
        ['Search', 'SEO-ready from day one', 'Clean markup, fast load times and on-page SEO baked in, not bolted on.'],
      ],
      related: ['ai-seo', 'brand-identity'],
    },
    'custom-crm': {
      icon: 'Database',
      image: 'assets/seo/custom-crm.png',
      eyebrow: 'Custom CRM & Business Software',
      sectionTitle: <>What's <Grad>inside the system.</Grad></>,
      h1: <>A CRM built around <Grad>how your team actually works.</Grad></>,
      sub: "Stop paying per seat for software that fits everyone and no one. We build the pipeline, dashboard and automations your business actually needs, and you own it outright.",
      keywordCopy: "Searching for custom CRM software, a CRM built for small business, or an alternative to expensive per-seat platforms? We build CRM systems, client portals and business dashboards you own outright.",
      includes: [
        ['Database', 'Built to your workflow', 'Pipelines, stages and fields that match how you already sell.'],
        ['LayoutDashboard', 'One dashboard', 'Every number your team checks, in one place, no more spreadsheets.'],
        ['Workflow', 'Automations included', 'The busywork gets wired away: follow-ups, reminders, handoffs.'],
        ['ShieldCheck', 'You own it', 'Runs on your accounts. No lock-in, no monthly per-seat tax.'],
      ],
      related: ['ai-agents', 'website-design'],
    },
    'ai-agents': {
      icon: 'Bot',
      image: 'assets/seo/ai-agents.png',
      eyebrow: 'AI Chat & Voice Agents',
      sectionTitle: <>What your <Grad>agent comes with.</Grad></>,
      h1: <>Never miss a lead, <Grad>day or night.</Grad></>,
      sub: 'AI chat and voice agents that answer questions, qualify leads and book jobs in your voice, grounded in your real content, live on your site or your phone line.',
      keywordCopy: 'From AI chatbots for small business to AI phone answering services and 24/7 virtual receptionists, we build voice and chat agents that actually book work.',
      includes: [
        ['Bot', 'AI chat, trained on you', 'Answers grounded in your services, pricing rules and FAQs, not generic scripts.'],
        ['PhoneCall', 'Voice agents that book', 'Picks up every call, answers the real questions, books the appointment.'],
        ['MessageSquareWarning', 'Never lose a lead', 'Captures and routes every conversation your team would otherwise miss.'],
        ['Gauge', 'Live in weeks', 'Scoped, built and connected to your calendar and CRM in short iterations.'],
      ],
      related: ['custom-crm', 'ai-seo'],
    },
    'brand-identity': {
      icon: 'Palette',
      image: 'assets/seo/brand-identity.png',
      eyebrow: 'Brand Identity & Logo Design',
      sectionTitle: <>What's in the <Grad>identity kit.</Grad></>,
      h1: <>A brand that's <Grad>unmistakably yours.</Grad></>,
      sub: "Logo, identity system and guidelines your whole team can actually use, so every touchpoint looks like it came from the same business.",
      keywordCopy: 'Logo design, brand identity design and full brand guidelines, built for businesses that want a visual identity that holds up across web, print and social.',
      includes: [
        ['Palette', 'Logo & identity', 'A mark and system built to work everywhere, from a favicon to a truck wrap.'],
        ['Type', 'Color & type system', 'A palette and type pairing that scales across every page and platform.'],
        ['BookOpen', 'Guidelines you can use', 'Plain-English rules your team follows without asking us first.'],
        ['Layers', 'Applied everywhere', 'Carried through your site, socials and sales materials from day one.'],
      ],
      related: ['website-design', 'ai-seo'],
    },
    'ai-seo': {
      icon: 'Search',
      image: 'assets/seo/ai-seo.png',
      eyebrow: 'AI SEO',
      sectionTitle: <>How we get you <Grad>ranking.</Grad></>,
      h1: <>Be the answer, <Grad>on Google and AI search.</Grad></>,
      sub: "Search is splitting between Google results and AI answers. We tune your site and content so you show up, and get recommended, in both.",
      keywordCopy: 'AI SEO, generative engine optimization and technical SEO for small business: we structure your site to rank in Google and get recommended by AI assistants and chatbots.',
      includes: [
        ['Search', 'Technical SEO foundation', 'Fast load times, clean structure and markup search engines can actually read.'],
        ['Sparkles', 'Tuned for AI search', 'Structured, citable content so assistants like this one can recommend you.'],
        ['MapPin', 'Local & niche keywords', 'Ranking for the specific searches your real customers use, not vanity terms.'],
        ['LineChart', 'Tracked, not guessed', "Clear reporting on what's ranking and what's actually bringing in leads."],
      ],
      related: ['website-design', 'ai-agents'],
    },
  };

  const NICHE_PAGES = {
    'ecommerce': {
      icon: 'ShoppingBag',
      image: 'assets/seo/ecommerce.png',
      eyebrow: 'Website Design for E-commerce',
      sectionTitle: <>What ships with <Grad>your storefront.</Grad></>,
      h1: <>Storefronts built to <Grad>convert and stay fast.</Grad></>,
      sub: 'Custom e-commerce sites that load fast, showcase product and make checkout painless, without the bloat of a generic template.',
      keywordCopy: 'E-commerce website design, Shopify alternatives and custom online store development for retailers who want a fast, on-brand storefront instead of a generic template.',
      includes: [
        ['ShoppingBag', 'Product-first design', 'Merchandising and photography given room to sell, not fight the layout.'],
        ['Zap', 'Fast, always', 'Optimized for speed on every device, where slow load times cost sales.'],
        ['CreditCard', 'Frictionless checkout', 'A checkout flow built to reduce cart abandonment, not add steps.'],
        ['Search', 'Built to be found', 'SEO and AI-search structure for every product and category page.'],
      ],
    },
    'home-services': {
      icon: 'Wrench',
      image: 'assets/seo/home-services.png',
      eyebrow: 'Website Design for Home & Local Services',
      sectionTitle: <>What keeps the <Grad>phone ringing.</Grad></>,
      h1: <>Sites that <Grad>book jobs and answer calls.</Grad></>,
      sub: 'For trades, contractors and clinics: a site (and an AI agent, if you want one) that turns visitors into booked appointments.',
      keywordCopy: 'Website design for contractors, plumbers, electricians and home service businesses, built with booking, service-area pages and local SEO in mind.',
      includes: [
        ['Wrench', 'Built for the trade', 'Service lists, areas covered and pricing logic that match how you quote.'],
        ['CalendarCheck', 'Booking built in', 'Request-a-quote and scheduling flows that reduce phone tag.'],
        ['PhoneCall', 'AI answers the phone', "An optional voice agent that picks up and books when your team can't."],
        ['MapPin', 'Local search ready', 'Structured for the "near me" searches your next customer is typing.'],
      ],
    },
    'professional-services': {
      icon: 'Scale',
      image: 'assets/seo/professional-services.png',
      eyebrow: 'Website Design for Professional Services',
      sectionTitle: <>What builds the <Grad>trust.</Grad></>,
      h1: <>Look as sharp as <Grad>the work you do.</Grad></>,
      sub: 'For legal, accounting and finance teams: a site that signals credibility fast and makes it easy to book a consultation.',
      keywordCopy: 'Website design for law firms, accounting firms and financial advisors, professional website design that builds trust and books consultations.',
      includes: [
        ['Scale', 'Built for trust', 'A restrained, credible design system, not a stock template look.'],
        ['FileText', 'Case studies & credentials', 'A layout that surfaces your track record clearly, not buried in text.'],
        ['CalendarCheck', 'Consultations, simplified', 'Booking and intake flows that get the right details before the call.'],
        ['ShieldCheck', 'Compliant by design', 'Built with the standards your industry answers to in mind from day one.'],
      ],
    },
    'startups': {
      icon: 'Rocket',
      image: 'assets/seo/startups.png',
      eyebrow: 'Website Design for Startups & SaaS',
      sectionTitle: <>What launches in <Grad>week one.</Grad></>,
      h1: <>From landing page to <Grad>product, in one system.</Grad></>,
      sub: "A marketing site and product UI that share one design language, so the story you tell and the product you ship feel like the same company.",
      keywordCopy: 'Startup website design, SaaS landing pages and product UI design for early-stage companies that need to launch fast and scale their design system.',
      includes: [
        ['Rocket', 'Launch-ready fast', 'A credible site live in weeks, built to iterate as you learn.'],
        ['LayoutDashboard', 'Product UI, too', 'The same team can design and build the app your marketing site sells.'],
        ['LineChart', 'Built to measure', 'Analytics and events wired in from day one, not bolted on later.'],
        ['Workflow', 'Scales with you', 'Custom CRM and automations ready the moment you need them.'],
      ],
    },
    'restaurants': {
      icon: 'UtensilsCrossed',
      image: 'assets/seo/restaurants.png',
      eyebrow: 'Website Design for Restaurants & Hospitality',
      sectionTitle: <>What fills the <Grad>tables.</Grad></>,
      h1: <>Sites that <Grad>fill tables and rooms.</Grad></>,
      sub: 'For restaurants and venues: a site that makes the food and space look as good as they do in person, and makes booking effortless.',
      keywordCopy: 'Restaurant website design and hospitality web design with online reservations, menus and reviews built to fill tables and rooms.',
      includes: [
        ['UtensilsCrossed', 'Menu & atmosphere first', 'Photography and menu layout that do the selling for you.'],
        ['CalendarCheck', 'Reservations that work', 'Booking flows built for how guests actually plan a visit.'],
        ['Star', 'Reviews front and center', 'Social proof placed where it moves the decision, not buried in a footer.'],
        ['MapPin', 'Found by hungry locals', 'Structured for "near me" and neighborhood search from day one.'],
      ],
    },
    'personal-brands': {
      icon: 'User',
      image: 'assets/seo/personal-brands.png',
      eyebrow: 'Websites for Personal & Creator Brands',
      sectionTitle: <>What carries <Grad>your name.</Grad></>,
      h1: <>A site as sharp as <Grad>your name.</Grad></>,
      sub: 'For founders, coaches and creators: a personal site and brand system built to carry your name across every platform you show up on.',
      keywordCopy: 'Personal brand website design, creator portfolio sites and founder personal websites built to convert followers into clients.',
      includes: [
        ['User', 'Built around you', 'A site structured to sell your expertise, content or offer, not a generic bio page.'],
        ['Palette', 'A brand that travels', 'One visual identity across your site, socials and media kit.'],
        ['Layers', 'Portfolio & press', 'Work, features and testimonials laid out so credibility is instant.'],
        ['CalendarCheck', 'Book & sell built in', 'Booking, email capture or product links wired in from day one.'],
      ],
    },
    'health-wellness': {
      icon: 'HeartPulse',
      image: 'assets/seo/health-wellness.png',
      eyebrow: 'Website Design for Health & Wellness',
      sectionTitle: <>What earns the <Grad>first visit.</Grad></>,
      h1: <>Trust, built into <Grad>every pixel.</Grad></>,
      sub: 'For practices, studios and wellness brands: a calm, credible site that makes booking a first visit feel easy.',
      keywordCopy: 'Website design for wellness studios, medical practices and health brands, built to build trust fast and book appointments.',
      includes: [
        ['HeartPulse', 'Calm, credible design', 'A restrained visual system that signals trust, not a stock clinic template.'],
        ['CalendarCheck', 'Booking built in', 'Appointment and intake flows that reduce phone tag and no-shows.'],
        ['ShieldCheck', 'Privacy-minded by design', 'Built with the standards your practice answers to in mind.'],
        ['Star', 'Reviews & credentials', 'Certifications and testimonials placed where they build confidence.'],
      ],
    },
    'real-estate': {
      icon: 'Building2',
      image: 'assets/seo/real-estate.png',
      eyebrow: 'Website Design for Real Estate & Property',
      sectionTitle: <>What makes a <Grad>listing sell.</Grad></>,
      h1: <>Listings presented like <Grad>the asset they are.</Grad></>,
      sub: 'For agents, brokerages and developments: a site that makes every listing and project look as premium as the price tag.',
      keywordCopy: 'Real estate website design, property listing sites and developer showcase websites built to make every listing look premium and get more inquiries.',
      includes: [
        ['Building2', 'Listings that sell', 'Gallery-first layouts that let photography and floor plans do the work.'],
        ['MapPin', 'Neighborhood & area pages', 'Structured for the local and neighborhood searches buyers actually use.'],
        ['CalendarCheck', 'Tours & inquiries, simplified', 'Booking and lead-capture flows built for how buyers actually reach out.'],
        ['Users', 'Agent & team profiles', 'Credibility built in with bios, credentials and past sales.'],
      ],
    },
  };

  const LOCATION_PAGE = {
    icon: 'MapPin',
    image: 'assets/seo/tampa.png',
    eyebrow: 'Website Design in Tampa, Florida',
    sectionTitle: <>Built for <Grad>Tampa, specifically.</Grad></>,
    h1: <>Tampa businesses, <Grad>built and found online.</Grad></>,
    sub: 'A Tampa-based studio building custom websites, brand systems and AI tools for local businesses that want to rank, convert and grow, remote-friendly too.',
    keywordCopy: "Searching for Tampa web design, a Tampa website design company, or a web designer near you in Tampa Bay? We build custom sites and local SEO for businesses in Hyde Park, Ybor City, South Tampa, Westshore, Channelside, Seminole Heights and every Tampa Bay neighborhood in between.",
    includes: [
      ['MapPin', 'Local, and remote-ready', 'Based in Tampa, Florida, working with clients here and worldwide.'],
      ['Search', 'Built for local search', 'Neighborhood and "near me" structure so Tampa Bay customers find you first.'],
      ['Users', 'Senior, always', 'The people you meet are the people who design and build your project.'],
      ['Rocket', 'Any Tampa industry', "Retail, trades, professional services, hospitality, we've built for all of it."],
    ],
  };

  // Assign each page a rotating brand color and alternating layout so the set reads as a family, not one template.
  const ALL_KEYS = [...Object.keys(SERVICE_PAGES).map(k => ['s', k]), ...Object.keys(NICHE_PAGES).map(k => ['n', k]), ['l', 'tampa']];
  const LAYOUTS = ['grid', 'list', 'timeline'];
  ALL_KEYS.forEach(([kind, key], i) => {
    const obj = kind === 's' ? SERVICE_PAGES[key] : kind === 'n' ? NICHE_PAGES[key] : LOCATION_PAGE;
    obj.color = PALETTE[i % PALETTE.length];
    obj.layout = LAYOUTS[i % LAYOUTS.length];
    obj.glowSide = i % 2 === 0 ? 'right' : 'left';
  });

  function hexA(hex, alpha) {
    return hex + alpha;
  }

  function IncludesGrid({ items, color }) {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }} className="seo-inc-grid">
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 50}>
            <Panel pad={24} style={{ height: '100%' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 11, background: hexA(color, '1F'), border: `1px solid ${hexA(color, '3D')}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n={it[0]} s={20} color={color} /></span>
                <h3 style={{ fontSize: 17.5, margin: 0 }}>{it[1]}</h3>
              </div>
              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{it[2]}</p>
            </Panel>
          </Reveal>
        ))}
      </div>
    );
  }

  function IncludesList({ items, color }) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 50}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, padding: '22px 4px', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.07)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, color, flexShrink: 0, width: 26, paddingTop: 2 }}>0{i + 1}</span>
              <span style={{ width: 40, height: 40, borderRadius: 10, background: hexA(color, '1F'), border: `1px solid ${hexA(color, '3D')}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n={it[0]} s={19} color={color} /></span>
              <div>
                <h3 style={{ fontSize: 17, margin: '0 0 5px' }}>{it[1]}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{it[2]}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    );
  }

  function IncludesTimeline({ items, color }) {
    return (
      <div style={{ position: 'relative', paddingLeft: 4 }}>
        <div style={{ position: 'absolute', left: 19, top: 8, bottom: 8, width: 1, background: 'rgba(255,255,255,0.1)' }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ display: 'flex', gap: 22, position: 'relative' }}>
                <span style={{ width: 40, height: 40, borderRadius: 999, background: hexA(color, '1F'), border: `1px solid ${hexA(color, '3D')}`, display: 'grid', placeItems: 'center', flexShrink: 0, position: 'relative', zIndex: 1 }}><Icon n={it[0]} s={18} color={color} /></span>
                <div style={{ paddingTop: 6, maxWidth: 520 }}>
                  <h3 style={{ fontSize: 17.5, margin: '0 0 6px' }}>{it[1]}</h3>
                  <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{it[2]}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    );
  }

  function RelatedLinks({ slugs, onNavigate }) {
    if (!slugs || !slugs.length) return null;
    return (
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
        {slugs.map((s) => {
          const p = SERVICE_PAGES[s];
          if (!p) return null;
          return (
            <button key={s} onClick={() => onNavigate('seo-' + s)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '9px 16px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.03)', color: 'var(--text-secondary)', fontSize: 13.5, fontFamily: 'var(--font-body)', cursor: 'pointer' }}>
              {p.eyebrow} <Icon n="ArrowUpRight" s={13} color="currentColor" />
            </button>
          );
        })}
      </div>
    );
  }

  function SeoPageBody({ content, slotId, onNavigate }) {
    const c = content.color;
    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 30, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: '-10%', [content.glowSide || 'right']: '-6%', width: 480, height: 380, background: `radial-gradient(50% 50% at 50% 50%, ${hexA(c, '26')}, transparent 70%)`, filter: 'blur(10px)', pointerEvents: 'none' }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 48, alignItems: 'center', position: 'relative' }} className="seo-hero">
            <div style={{ maxWidth: 640 }}>
              <Reveal>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                  <span style={{ width: 30, height: 30, borderRadius: 9, background: hexA(c, '1F'), border: `1px solid ${hexA(c, '3D')}`, display: 'grid', placeItems: 'center' }}><Icon n={content.icon} s={15} color={c} /></span>
                  <Eyebrow>{content.eyebrow}</Eyebrow>
                </div>
              </Reveal>
              <Reveal delay={60}><h1 style={{ fontSize: 'clamp(32px,4.6vw,54px)', lineHeight: 1.05, letterSpacing: '-0.03em', margin: '18px 0 0' }}>{content.h1}</h1></Reveal>
              <Reveal delay={130}><p style={{ fontSize: 17.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '20px 0 0', maxWidth: 560 }}>{content.sub}</p></Reveal>
              <Reveal delay={180}>
                <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                  <button onClick={() => onNavigate('contact')} className="wk-cta">Book a call <Icon n="ArrowUpRight" s={16} color="#08080A" /></button>
                  <button onClick={() => onNavigate('portfolio')} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '13px 22px', borderRadius: 11, cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: '#fff', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.14)' }}>See our work</button>
                </div>
              </Reveal>
            </div>
            <Reveal delay={100}>
              <image-slot id={slotId} shape="rounded" radius={20} fit="cover" src={content.image} style={{ width: '100%', aspectRatio: '4/3' }} placeholder={`${content.eyebrow} hero image`}></image-slot>
            </Reveal>
          </div>
        </Section>

        <Section pad={30}>
          <Reveal><h2 style={{ fontSize: 'clamp(26px,3vw,36px)', margin: '0 0 26px', maxWidth: 600 }}>{content.sectionTitle}</h2></Reveal>
          {content.layout === 'list' ? <IncludesList items={content.includes} color={c} /> : content.layout === 'timeline' ? <IncludesTimeline items={content.includes} color={c} /> : <IncludesGrid items={content.includes} color={c} />}
          <RelatedLinks slugs={content.related} onNavigate={onNavigate} />
        </Section>

        <Section pad={20}>
          <Reveal>
            <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.7, maxWidth: 780, borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24 }}>{content.keywordCopy}</p>
          </Reveal>
        </Section>

        <Section pad={40}>
          <Reveal>
            <div style={{ borderRadius: 22, border: '1px solid rgba(255,255,255,0.1)', background: 'linear-gradient(160deg, rgba(255,255,255,0.03), transparent)', padding: 'clamp(32px,5vw,56px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
              <div>
                <h2 style={{ fontSize: 'clamp(26px,3.4vw,40px)', margin: 0, lineHeight: 1.05 }}>Let's scope yours.</h2>
                <p style={{ fontSize: 17, color: 'var(--text-secondary)', margin: '12px 0 0', maxWidth: 460, lineHeight: 1.6 }}>Free 30-minute call. Fixed scope before you pay a cent.</p>
              </div>
              <button onClick={() => onNavigate('contact')} className="wk-cta">Book a call <Icon n="ArrowUpRight" s={16} color="#08080A" /></button>
            </div>
          </Reveal>
        </Section>

        <style>{`@media (max-width:760px){.seo-inc-grid{grid-template-columns:1fr!important}.seo-hero{grid-template-columns:1fr!important}}`}</style>
      </React.Fragment>
    );
  }

  function ServiceSeoPage({ slug, onNavigate }) { return <SeoPageBody content={SERVICE_PAGES[slug]} slotId={'seo-' + slug} onNavigate={onNavigate} />; }
  function NicheSeoPage({ slug, onNavigate }) { return <SeoPageBody content={NICHE_PAGES[slug]} slotId={'niche-' + slug} onNavigate={onNavigate} />; }
  function LocationSeoPage({ onNavigate }) { return <SeoPageBody content={LOCATION_PAGE} slotId="tampa-hero" onNavigate={onNavigate} />; }

  Object.assign(window, { SERVICE_PAGES, NICHE_PAGES, LOCATION_PAGE, ServiceSeoPage, NicheSeoPage, LocationSeoPage });
})();