import type { ServiceDetailContent } from '$lib/types/service-page';

const discoveryCallUrl =
    'https://cal.mifi.ventures/the-mifi/30min?utm_source=website&utm_medium=cta&utm_campaign=schedule_call&utm_content=hands_on_saas_arch_page';

export const pageContent: ServiceDetailContent = {
    hero: {
        title: 'Hands-On Product Architecture for Early-Stage SaaS',
        subtitle:
            "Most early-stage teams obsess over backend performance and treat the frontend as a thin layer. That's backwards. The frontend is the product—and if its foundations aren't built to scale, iteration slows, bugs multiply, and shipping becomes stressful. I work inside your codebase to build frontend systems that enable velocity: clean CSS architecture, reusable components, tokenized design systems, and accessibility from day one.",
        bookingLinkTitle: 'Book a discovery call',
        bookingLinkUrl: discoveryCallUrl,
        secondaryCta: {
            href: '#approach',
            label: 'See my approach',
            umamiEventLabel: 'see my approach',
        },
    },
    tocItems: [
        { label: 'Credibility', href: '#credibility' },
        { label: 'Why this matters', href: '#why-this-matters' },
        { label: 'The frontend is the product', href: '#frontend-is-product' },
        { label: 'What goes wrong', href: '#what-goes-wrong' },
        { label: 'My approach', href: '#approach' },
        { label: 'Outcomes', href: '#outcomes' },
        { label: 'Engagement options', href: '#engagement' },
        { label: "Who it's for", href: '#who-its-for' },
        { label: 'FAQ', href: '#faq' },
        { label: 'Get in touch', href: '#final-cta' },
    ],
    navItems: [
        { label: 'Home', href: '/', umamiEventLabel: 'home' },
        { label: 'My approach', href: '#approach', umamiEventLabel: 'approach' },
        { label: 'Outcomes', href: '#outcomes', umamiEventLabel: 'outcomes' },
        { label: 'Engagement', href: '#engagement', umamiEventLabel: 'engagement' },
        { label: 'FAQ', href: '#faq', umamiEventLabel: 'faq' },
        {
            label: 'Book a call',
            href: `${discoveryCallUrl}-navigation`,
            umamiEventLabel: 'book-call',
        },
    ],
    sections: [
        {
            id: 'credibility',
            heading: 'Credibility',
            headingSrOnly: true,
            sectionClass: 'service-credibility',
            narrowContainer: false,
            bulletsListClass: 'service-credibility__list',
            bullets: [
                'Product developer at heart; systems-minded by default',
                'Frontend foundations: CSS architecture, design tokens, component libraries',
                'Accessibility-first (bolting it on later is always expensive)',
                'Stage-aware decisions that preserve runway without slowing shipping',
            ],
        },
        {
            id: 'why-this-matters',
            headingId: 'why-heading',
            heading: "Shipping slows down quietly—until it suddenly doesn't",
            paragraphs: [
                "Early-stage SaaS rarely fails because the backend can't handle load. It fails because iteration becomes painful.",
                'When the frontend is ad hoc—CSS drift, inconsistent components, no tokens, accessibility bolted on later—every new feature costs more than it should. Engineers hesitate to touch code. Small changes break unrelated screens. Design becomes inconsistent. Velocity drops.',
                'This is not a "design problem." It\'s an architecture problem.',
            ],
        },
        {
            id: 'frontend-is-product',
            headingId: 'frontend-heading',
            heading: 'The frontend is the product',
            paragraphs: [
                "Your customers don't experience your database schema. They experience your UI.",
                "A performant backend matters—but it's not more important than a frontend built for iteration. The frontend drives conversion, communicates trust, and determines how quickly your team can ship new features without breaking old ones.",
                'If you want to move fast later, you have to build a foundation now.',
            ],
        },
        {
            id: 'what-goes-wrong',
            headingId: 'wrong-heading',
            heading: 'What I see most often',
            bullets: [
                'Backend-crafted frontends: functional, but brittle and inconsistent',
                '"CSS as an afterthought": global overrides, magic numbers, creeping specificity wars',
                "Component sprawl: dozens of one-off components that can't be reused",
                'No design tokens: colors, spacing, typography duplicated everywhere',
                'Accessibility postponed: expensive retrofits, inconsistent semantics',
                'Rebuilding instead of composing: no "lego system," so iteration is slow and repetitive',
            ],
        },
        {
            id: 'approach',
            headingId: 'approach-heading',
            heading: 'My approach: architecture through implementation',
            paragraphs: [
                "I'm not a diagram consultant. I'm hands-on. I get into the codebase and build the foundation your team can extend.",
                'The goal is simple: make iteration cheap.',
            ],
            subsections: [
                {
                    heading: '1) Fix the CSS foundation first',
                    paragraphs: [
                        'Bad CSS makes everything inconsistent and makes change arduous. I start by establishing a maintainable CSS architecture that supports a coherent visual language and reduces the bug surface area.',
                    ],
                },
                {
                    heading: '2) Build a reusable component system',
                    paragraphs: [
                        'I create a component library that lowers duplication and prevents developers from "re-solving" the same UI problems. This increases speed and improves consistency.',
                    ],
                },
                {
                    heading: '3) Tokenize the design system',
                    paragraphs: [
                        'Design tokens (color, spacing, typography, radii, shadows) allow the brand to evolve without rewrites. You can iterate quickly as you discover what your product should feel like.',
                    ],
                },
                {
                    heading: '4) Bake in accessibility from day one',
                    paragraphs: [
                        'Accessibility isn\'t optional and it isn\'t "later." Bolting it on later is always expensive. Doing it early saves time, improves UX, and strengthens SEO.',
                    ],
                },
                {
                    heading: '5) Keep the whole system stage-aligned',
                    paragraphs: [
                        "I'm pragmatic about tooling. Some things can stay on free tiers early. Some choices should be intentional because migration later is painful. The point is to preserve runway without slowing shipping.",
                    ],
                },
            ],
            footerLinks: [
                {
                    label: 'Fractional CTO for early-stage SaaS',
                    href: '/services/fractional-cto-for-early-stage-saas',
                },
                {
                    label: 'MVP architecture and launch',
                    href: '/services/mvp-architecture-and-launch',
                },
                {
                    label: 'Stage-aligned infrastructure',
                    href: '/services/stage-aligned-infrastructure',
                },
            ],
        },
        {
            id: 'outcomes',
            headingId: 'outcomes-heading',
            heading: 'What changes when the foundation is right',
            paragraphs: [
                "It's all connected—speed, bugs, confidence, and morale are one big ball of yarn. When the frontend foundation is right, the whole system gets calmer.",
            ],
            bullets: [
                'Developers ship faster with less hesitation',
                'Lower bug rate from fewer one-off implementations',
                'Cohesive UI and clearer product identity',
                'Faster design iteration without rewrites',
                'Accessibility becomes the default, not a retrofit',
                'SEO improves naturally via good structure and semantics',
                'Higher release confidence and better team morale',
            ],
        },
        {
            id: 'engagement',
            headingId: 'engagement-heading',
            heading: 'How we can work together',
            subsections: [
                {
                    heading: 'Architecture engagement (high-fee, fixed scope)',
                    bullets: [
                        'Codebase review focused on frontend foundations',
                        'CSS + component audit, prioritized action plan',
                        'Token strategy and incremental adoption plan',
                        'Accessibility baseline and standards',
                        'A roadmap your team can execute',
                    ],
                },
                {
                    heading: 'Implementation (optional, bounded)',
                    bullets: [
                        'Hands-on refactors and foundation building',
                        'Component library creation and rollout',
                        'Tokenization and theming support',
                        "Documentation and handoff so you're not dependent on me",
                    ],
                },
                {
                    heading: 'Advisory retainer (recurring, low-liability)',
                    bullets: [
                        'Regular check-ins to keep architecture clean as you ship',
                        'Review of component/API decisions and PRs (optional)',
                        'Guidance on tooling tradeoffs as you grow',
                        'No 24/7 pager-duty MSP model',
                    ],
                },
            ],
        },
    ],
    who: {
        whoForHeading: 'Who this is for',
        whoForList: [
            'Founder-led SaaS teams',
            '1–15 engineers (and growing)',
            'Teams shipping fast but feeling UI/UX friction',
            'Teams who want adult-level architecture without slowing down',
        ],
        whoNotList: [
            'Organizations looking for pure strategy decks and diagrams',
            'Teams wanting a long-term embedded full-time DevOps engineer',
            'Companies needing 24/7 managed hosting with strict SLAs',
        ],
    },
    scheduleCta: {
        sectionId: 'final-cta',
        headingId: 'final-cta-heading',
        title: 'Want to ship faster without frontend debt?',
        subtitle:
            "If your UI feels brittle, inconsistent, or slow to evolve, you're not alone—and you don't need a massive rewrite. Let's build a foundation that makes iteration cheap.",
        bookingLinkTitle: 'Book a discovery call',
        bookingLinkUrl: `${discoveryCallUrl}-schedule-section`,
        showEmailLink: true,
    },
    meta: {
        title: 'SaaS Product Architecture Consultant | mifi Ventures',
        description:
            'I help early-stage SaaS teams ship faster by building scalable frontend foundations—clean CSS, component libraries, design tokens, and accessibility from day one—so iteration accelerates instead of slowing down.',
        jsonLdServiceDescription:
            'Hands-on product architecture for early-stage SaaS: frontend foundations, CSS architecture, component libraries, design tokens, and accessibility from day one. Architecture engagement, implementation support, and advisory retainer.',
    },
};
