const DS = window.SolvraDesignSystem_5d8177;
const { Button, Card, Badge, Stat, Field, Input, Select, Textarea, Alert, Tabs } = DS;

const LEAD_EMAIL = "ameya@solvra.in";

/* ---------------------------------------------------------------- */
/* Content                                                           */
/* ---------------------------------------------------------------- */

const practiceAreas = {
  "business-strategy": {
    tag: "Business Strategy",
    icon: "compass",
    headline: "Make better strategic decisions.",
    body: "We help founders and leadership teams solve growth plateaus, unclear positioning, and market uncertainty with structured planning, market insight, and a credible growth story — including business model clarity and investor-facing narrative for funding and accelerator conversations.",
    bestFor: "Idea-stage and early-revenue founders, growth-stage leadership teams, and small teams that want strategic clarity without heavy jargon.",
    problems: ["Growth plateau", "No clear positioning", "Market uncertainty"],
    capabilities: ["Growth Strategy", "Market Research", "Business Models", "Go-to-Market", "Executive Workshops", "Board Presentations", "Strategic Planning", "Competitive Intelligence"],
    deliverables: ["Strategy Roadmap", "SWOT", "PESTLE", "Market Analysis", "Business Model Canvas", "Implementation Plan"],
    relatedTags: ["Startup GTM", "Readiness advisory"]
  },
  "business-operations": {
    tag: "Business Operations",
    icon: "workflow",
    headline: "Build a business that runs smoothly.",
    body: "We help owner-led teams set up the essentials: who does what, how work moves, what gets tracked, and which simple tools keep the business running without constant founder follow-up.",
    bestFor: "Founder-led agencies, micro teams, early service companies, and growing brands that need real structure without heavy corporate process.",
    problems: [],
    capabilities: ["Operating Models", "Process Design", "SOPs", "KPI Dashboards", "Meeting Cadence", "Governance", "Notion", "Google Workspace", "Microsoft 365"],
    deliverables: ["Operations Manual", "Org Structure", "RACI", "Dashboards", "SOP Library"],
    relatedTags: ["Agency operations"]
  },
  "marketing-operations": {
    tag: "Marketing Operations",
    icon: "target",
    headline: "Marketing systems, not just marketing activity.",
    body: "We help businesses move from random posting, referrals, and trial-and-error ads to a simple marketing plan: customer clarity, offer positioning, channel focus, basic funnel tracking, and weekly execution.",
    bestFor: "Founder-led service businesses, small agencies, local brands, D2C pilots, and early startups that need practical marketing direction before hiring a full team.",
    problems: [],
    capabilities: ["Planning", "Governance", "Reporting", "Workflows", "Measurement", "Marketing Technology"],
    deliverables: ["Marketing foundation audit", "Customer and offer positioning note", "Monthly content and campaign plan", "Lead tracking sheet or CRM starter setup", "Founder-friendly marketing SOPs"],
    relatedTags: ["Organic growth", "Digital transformation", "Brand activation"]
  },
  "ai-transformation": {
    tag: "AI Transformation",
    icon: "sparkles",
    headline: "Helping businesses integrate AI into everyday operations.",
    body: "Practical AI adoption for founder-led teams: workflow design, productivity systems, prompt libraries, and an adoption roadmap sized for the team you actually have.",
    bestFor: "Founder-led teams and growing organizations ready to build AI into everyday workflows without a dedicated AI function.",
    problems: [],
    capabilities: ["AI Strategy", "AI Readiness", "Prompt Libraries", "AI SOPs", "Workflow Automation", "Knowledge Management", "ChatGPT", "Claude", "Gemini", "Copilot", "Notion AI"],
    deliverables: ["AI Opportunity Assessment", "Tool Recommendations", "Workflow Design", "AI Adoption Roadmap"],
    relatedTags: []
  },
  "customer-experience": {
    tag: "Customer Experience",
    icon: "heart-handshake",
    headline: "Creating customer journeys that improve business performance.",
    body: "Journey mapping, service design, and experience audits that connect customer feedback to the systems and decisions the business already runs on.",
    bestFor: "Businesses whose growth depends on customer journeys, service quality, and repeat relationships.",
    problems: [],
    capabilities: ["Journey Mapping", "Retention", "Voice of Customer", "CX Metrics", "Experience Design"],
    deliverables: ["Customer Journey Mapping", "CX Strategy", "Service Design", "Experience Audits", "Customer Feedback Frameworks"],
    relatedTags: ["Digital transformation"]
  },
  "fractional-coo": {
    tag: "Fractional COO",
    icon: "briefcase",
    headline: "Executive leadership without full-time cost.",
    body: "Business planning, KPI reviews, and operational governance delivered as ongoing fractional leadership for founders who need the judgment without the full-time headcount.",
    bestFor: "Founder-led businesses, agencies, startups, SMEs, and professional services firms that need experienced operational leadership on a fractional basis.",
    problems: [],
    capabilities: ["Weekly Reviews", "Leadership Cadence", "KPIs", "Decision Support", "Transformation Roadmaps"],
    deliverables: ["Business Planning", "Team Management", "Process Design", "KPI Reviews", "Leadership Coaching", "Operational Governance"],
    engagementModels: ["Monthly", "Quarterly", "Retainer"],
    relatedTags: ["Agency operations"]
  }
};

const practiceOrder = ["business-strategy", "business-operations", "marketing-operations", "ai-transformation", "customer-experience", "fractional-coo"];

const caseStudies = [
  {
    tag: "Agency operations",
    practice: "business-operations",
    title: "Structuring for scale at Wit & Chai Media Group",
    body: "Redesigned org structure, delivery workflows, SOPs, and KPI reporting across a high-growth creative agency.",
    challenge: "Strong client acquisition was being slowed down by scattered delivery systems and team misalignment.",
    analysis: "Reviewed delivery workflows, role clarity, and reporting gaps across departments to find where acquisition strength was being lost to execution friction.",
    strategy: "Redesign the operating model around clear roles and a repeatable delivery workflow, backed by department-level KPI visibility.",
    implementation: "Mapped end-to-end workflows, redesigned roles, introduced SOPs, and built KPI dashboards for department heads.",
    lessons: "Clear ownership and visible KPIs compound faster than adding more headcount.",
    stats: [["Rs 7.2 cr", "Annualized revenue growth"], ["30%", "Execution time reduction"]]
  },
  {
    tag: "Organic growth",
    practice: "marketing-operations",
    title: "Scaling organic social for Amber",
    body: "Built platform-specific content systems, reporting loops, approval workflows, and team training.",
    challenge: "The brand had active channels but no cohesive content strategy, tone, or performance feedback loop.",
    analysis: "Audited channel activity, content themes, and reporting gaps to understand why active channels weren't compounding into consistent growth.",
    strategy: "Establish content pillars and a platform-specific cadence, with a reporting loop the team could act on weekly.",
    implementation: "Built content pillars, publishing SOPs, reporting dashboards, and trained the team on a consistent platform cadence.",
    lessons: "A consistent cadence beats sporadic high-effort content.",
    stats: [["68%", "Engagement increase"], ["20K+", "New organic followers"]]
  },
  {
    tag: "Digital transformation",
    practice: "marketing-operations",
    title: "Marketing backbone for Gravity Hospitality",
    body: "Unified fragmented brand activity with analytics, CRM tracking, playbooks, and property-level training.",
    challenge: "Customer journeys were poorly tracked across properties and campaign decisions were hard to measure.",
    analysis: "Reviewed tracking gaps across properties and how campaign decisions were being made without consistent measurement.",
    strategy: "Unify tracking and reporting across properties, with clear governance between local and central campaign decisions.",
    implementation: "Integrated GA4, Meta Pixel, and CRM systems, built property-level dashboards, and trained teams on the new governance model.",
    lessons: "Central governance with local flexibility is what makes multi-property tracking actually stick.",
    stats: [["12+ mo", "Transformation support"], ["Live", "Booking visibility"]]
  },
  {
    tag: "Startup GTM",
    practice: "business-strategy",
    title: "GTM acceleration for SimpleStore",
    body: "Built positioning, launch roadmap, early campaign pilots, founder-led content, and HubSpot lead tracking.",
    challenge: "The founder team needed traction without a full in-house marketing function.",
    analysis: "Assessed the founder team's capacity, market positioning, and existing GTM assets to identify the fastest path to traction.",
    strategy: "Build a lean GTM motion the founder team could run without hiring a full marketing function.",
    implementation: "Created B2B positioning, ran paid and organic pilots, founder-led content, and built early sales and investor assets.",
    lessons: "Founder-led GTM can outperform a full marketing hire when the positioning is right.",
    stats: [["2", "Pilot launches"], ["4", "Media partnerships"]]
  },
  {
    tag: "Readiness advisory",
    practice: "business-strategy",
    title: "Funding-readiness audit for early founders",
    body: "Reviewed basic business model clarity, traction proof, market story, and founder action plans before formal funding conversations.",
    challenge: "Founders had ambition and early traction, but their numbers, story, and next-step plan were not clear enough for external conversations.",
    analysis: "Interviewed founders and reviewed traction data, numbers, and existing pitch material to identify readiness gaps.",
    strategy: "Build a structured readiness checklist and narrative framework founders could use before external conversations.",
    implementation: "Delivered founder interviews, a simple KPI template, a pitch narrative outline, and a practical improvement roadmap.",
    lessons: "Investors respond to a clear checklist and narrative more than raw ambition.",
    stats: [["30-point", "Checklist"], ["2", "Founder workshops"]]
  },
  {
    tag: "Brand activation",
    practice: "marketing-operations",
    title: "Digital funnel for Bacardi NH7 InCampus",
    body: "Connected campaign storytelling, influencer activation, RSVPs, tracking, and stakeholder coordination.",
    challenge: "A multi-city youth campaign needed digital buzz, on-ground footfall, and clear ROI visibility.",
    analysis: "Mapped the campaign's city-wise audience, influencer landscape, and measurement gaps across the digital-to-footfall funnel.",
    strategy: "Connect pre-buzz, influencer activation, and paid media into one trackable funnel from RSVP to on-ground footfall.",
    implementation: "Built pre-buzz, influencer, UGC, RSVP, and paid media systems with footfall tracking across four cities.",
    lessons: "Connecting every channel into one funnel is what makes multi-city activation measurable.",
    stats: [["3x", "Activation ROI"], ["30%", "Attendance from digital"]]
  }
];

const trustedBy = ["Titan", "PhonePe", "John Deere", "HCL", "ZebPay", "Coca-Cola", "Red Bull", "Godrej", "Bacardi", "UTS Sydney"];

const problems = [
  ["users", "Your business depends on you", "Every decision, approval, and follow-up runs through the founder — nothing moves without you."],
  ["repeat", "No operating rhythm", "Work lives in chats. There's no weekly cadence for reviewing numbers, leads, or delivery."],
  ["megaphone", "Marketing without accountability", "Posting, boosting ads, and referrals happen without a plan or a way to measure what's working."],
  ["users-round", "Teams working in silos", "Sales, delivery, and marketing don't share the same picture of the business."],
  ["layout-dashboard", "No executive dashboards", "Leadership makes calls from memory instead of from leads, cash, and delivery numbers in one place."],
  ["sparkles", "AI without adoption", "Tools get purchased or tried once, but never become part of how the team actually works."],
  ["trending-up", "Scaling without systems", "Growth adds more chaos instead of more leverage, because nothing was built to scale in the first place."]
];

const whySolvra = [
  "Operator-first consulting",
  "Implementation focused",
  "Built for founder-led businesses",
  "Practical frameworks",
  "Leadership experience",
  "Boutique attention"
];

const methodology = [
  ["search", "Discover", "Understand the business, objectives, customers, challenges, and opportunities."],
  ["stethoscope", "Diagnose", "Analyze current processes, marketing effectiveness, operational bottlenecks, and business performance."],
  ["layout", "Design", "Develop practical strategies, operating models, frameworks, and implementation plans."],
  ["rocket", "Deploy", "Support implementation through workshops, documentation, governance, and stakeholder alignment."],
  ["trending-up", "Drive", "Measure outcomes, refine processes, and establish continuous improvement mechanisms."]
];

const industries = [
  ["megaphone", "Marketing Agencies"],
  ["laptop", "Technology"],
  ["hotel", "Hospitality"],
  ["graduation-cap", "Education"],
  ["shopping-bag", "Consumer Brands"],
  ["briefcase", "Professional Services"],
  ["store", "Retail"],
  ["trophy", "Sports"],
  ["clapperboard", "Entertainment"],
  ["rocket", "Startups"]
];

const founder = {
  name: "Ameya Jalihal",
  tagline: "Business Strategy · Marketing Operations · AI Transformation · Customer Experience · Fractional COO",
  positioning: "A marketing and operations leader who helps founder-led businesses turn instinct, hustle, and fragmented activity into usable systems.",
  intro: "I work with founders, leadership teams, and growing organizations to build scalable businesses by improving strategy, marketing operations, customer experience, and organizational execution. With over 8.5 years of experience across India and Australia, I combine strategic thinking with operational excellence to solve complex business challenges.",
  experience: ["Former COO at Ideamint", "Led Rs 7+ crore annual revenue teams", "Drove campaigns for Titan, PhonePe, John Deere, HCL, and ZebPay", "Former marketing tutor at the University of Technology, Sydney"],
  expertise: ["Business Strategy", "Marketing Operations", "Business Operations", "Business Transformation", "Customer Experience", "Program Management", "Digital Transformation", "AI Strategy", "Organizational Design", "Strategic Planning", "Stakeholder Management", "Leadership"],
  mission: "I believe sustainable business growth comes from aligning strategy, people, processes, technology, and customer experience. My mission is to help organizations build scalable systems that turn ambitious ideas into measurable business outcomes."
};

const pageSeo = {
  home: {
    title: "Solvra | Strategy, Operations, and AI Transformation for Founder-Led Businesses",
    answer: "Solvra is a boutique advisory firm helping founder-led businesses build scalable operating systems across strategy, operations, marketing, AI, customer experience, and fractional executive leadership.",
    faqs: [
      ["What does Solvra do?", "Solvra helps founder-led businesses build scalable operating systems across six practice areas: business strategy, business operations, marketing operations, AI transformation, customer experience, and fractional COO leadership."],
      ["Who is Solvra for?", "Founder-led businesses, agencies, startups, SMEs, and professional services firms that have outgrown ad-hoc systems and need structured, implementation-focused advisory."],
      ["How does an engagement start?", "Every engagement starts with a strategy diagnostic that reviews the business, its numbers, its systems, and its leadership priorities before recommending a path forward."]
    ]
  },
  "about-solvra": {
    title: "About Solvra | Building Better Businesses",
    answer: "Solvra exists because businesses fail when strategy, operations, marketing, and execution don't connect. Solvra combines operator experience with consulting discipline to build systems founder-led teams can actually run.",
    faqs: [
      ["Why does Solvra exist?", "Most consultants hand over recommendations. Solvra builds the systems that make those recommendations stick, because businesses fail when systems don't connect, not when they lack ideas."],
      ["What makes Solvra different from a typical consulting firm?", "Operator experience, consulting-grade thinking, execution discipline, AI-enabled workflows, and a founder-first approach, delivered with boutique attention instead of large-firm overhead."],
      ["Who does Solvra work with?", "Founder-led businesses across technology, marketing agencies, hospitality, consumer brands, professional services, retail, and early-stage startups."]
    ]
  },
  "practice-areas": {
    title: "Practice Areas | Solvra",
    answer: "Solvra's six practice areas are business strategy, business operations, marketing operations, AI transformation, customer experience, and fractional COO leadership, each starting from the same strategy diagnostic.",
    faqs: [
      ["How many practice areas does Solvra offer?", "Six: business strategy, business operations, marketing operations, AI transformation, customer experience, and fractional COO leadership."],
      ["Can I engage more than one practice area?", "Yes. Many clients start with one practice area and expand into others as systems mature."],
      ["Do all practice areas start the same way?", "Yes. Every engagement opens with a diagnostic of the business before recommending which practice areas to prioritize."]
    ]
  },
  "business-strategy": {
    title: "Business Strategy | Solvra",
    answer: "Solvra's business strategy practice helps founders and leadership teams solve growth plateaus, unclear positioning, and market uncertainty with structured planning and a credible growth story.",
    faqs: [
      ["Who is business strategy advisory for?", "Idea-stage and early-revenue founders, growth-stage leadership teams, and small teams that want strategic clarity without heavy jargon."],
      ["What deliverables can I expect?", "A strategy roadmap, SWOT and PESTLE analysis, market analysis, business model canvas, and an implementation plan."],
      ["Is this only for fundraising?", "No. It also applies to growth planning, market entry, and board-level strategic decisions outside of a raise."]
    ]
  },
  "business-operations": {
    title: "Business Operations | Solvra",
    answer: "Solvra's business operations practice gives founder-led teams operating models, SOPs, KPI dashboards, and governance so the business runs without constant founder follow-up.",
    faqs: [
      ["Who is business operations advisory for?", "Founder-led agencies, micro teams, early service companies, and growing brands that need real structure without heavy corporate process."],
      ["What tools are used?", "Lightweight tools such as Notion, Google Workspace, and Microsoft 365, not heavy enterprise software."],
      ["What deliverables can I expect?", "An operations manual, org structure, RACI matrix, dashboards, and an SOP library."]
    ]
  },
  "marketing-operations": {
    title: "Marketing Operations | Solvra",
    answer: "Solvra's marketing operations practice replaces random posting and trial-and-error ads with a simple marketing plan: customer clarity, offer positioning, channel focus, and basic funnel tracking.",
    faqs: [
      ["How is this different from a marketing agency?", "The focus is on marketing systems, planning, governance, and measurement, not running campaigns on your behalf."],
      ["What deliverables can I expect?", "A marketing foundation audit, positioning note, monthly content and campaign plan, lead tracking setup, and founder-friendly SOPs."],
      ["Do I need a big budget?", "No. The plan is built around affordable channel priorities sized for the budget you actually have."]
    ]
  },
  "ai-transformation": {
    title: "AI Transformation | Solvra",
    answer: "Solvra's AI transformation practice helps businesses integrate AI into everyday operations through workflow design, productivity systems, prompt libraries, and an adoption roadmap.",
    faqs: [
      ["What does AI transformation actually involve?", "AI strategy, readiness assessment, prompt libraries, AI-enabled SOPs, workflow automation, and knowledge management sized for the team you have."],
      ["Which tools are covered?", "Common tools such as ChatGPT, Claude, Gemini, Copilot, and Notion AI, matched to your workflows rather than sold as a one-size-fits-all stack."],
      ["What deliverables can I expect?", "An AI opportunity assessment, tool recommendations, workflow design, and an AI adoption roadmap."]
    ]
  },
  "customer-experience": {
    title: "Customer Experience | Solvra",
    answer: "Solvra's customer experience practice connects journey mapping, service design, and experience audits to the systems and decisions the business already runs on.",
    faqs: [
      ["Who is customer experience advisory for?", "Businesses whose growth depends on customer journeys, service quality, and repeat relationships."],
      ["What deliverables can I expect?", "Customer journey mapping, a CX strategy, service design recommendations, experience audits, and customer feedback frameworks."],
      ["Does this connect to marketing and operations?", "Yes. CX work is deliberately connected to marketing operations and business operations rather than treated as a standalone project."]
    ]
  },
  "fractional-coo": {
    title: "Fractional COO | Solvra",
    answer: "Solvra's fractional COO service gives founders experienced operational leadership, weekly reviews, KPIs, and decision support without hiring a full-time executive.",
    faqs: [
      ["Who is fractional COO support for?", "Founder-led businesses, agencies, startups, SMEs, and professional services firms that need executive judgment without full-time headcount."],
      ["What does the engagement include?", "Weekly reviews, a leadership cadence, KPI tracking, decision support, and transformation roadmaps."],
      ["What engagement models are available?", "Monthly, quarterly, and retainer arrangements, depending on how much ongoing leadership support the business needs."]
    ]
  },
  industries: {
    title: "Industries | Solvra",
    answer: "Solvra has direct experience across marketing agencies, technology, hospitality, education, consumer brands, professional services, retail, sports, entertainment, and startups.",
    faqs: [
      ["Which industries has Solvra worked with?", "Marketing agencies, technology, hospitality, education, consumer brands, professional services, retail, sports, entertainment, and startups."],
      ["Does Solvra specialize in one industry?", "No. The frameworks are industry-agnostic; what changes is how they're applied to each business's customers and operating model."],
      ["Is Solvra only for India?", "Solvra is built around Indian small and micro businesses, with experience also spanning Australia."]
    ]
  },
  "case-studies": {
    title: "Case Studies | Solvra",
    answer: "Solvra's case studies span agency operations, organic growth, hospitality systems, startup GTM, funding readiness, and multi-city brand activation, each with measurable outcomes.",
    faqs: [
      ["What results has Solvra delivered?", "Selected outcomes include Rs 7.2 crore annualized revenue growth, 30% execution time reduction, 68% engagement lift, and 3x activation ROI."],
      ["How are case studies structured?", "Each one covers the challenge, analysis, strategy, implementation, results, and lessons learned."],
      ["Can I filter by practice area?", "Yes. Case studies can be filtered by the practice area they relate to."]
    ]
  },
  insights: {
    title: "Insights | Solvra",
    answer: "Solvra Insights is a growing library of frameworks, articles, and resources on business strategy, operations, marketing, AI, and leadership for founder-led businesses.",
    faqs: [
      ["What kind of content will Insights cover?", "Business strategy, operations, marketing, AI, leadership, frameworks, productivity, and business transformation."],
      ["Is there content available yet?", "Insights is a new section being built out. Categories are live; articles and frameworks are being added over time."],
      ["Can I request a topic?", "Yes — reach out via the contact page with what you'd find useful."]
    ]
  },
  "about-ameya": {
    title: "About Ameya Jalihal | Founder, Solvra",
    answer: "Ameya Jalihal is a marketing and operations leader who founded Solvra to help founder-led businesses turn instinct and fragmented activity into usable systems.",
    faqs: [
      ["Who is Ameya Jalihal?", "The founder of Solvra — a marketing and operations leader with experience leading revenue teams and campaigns for major brands."],
      ["What is Ameya's background?", "Former COO at Ideamint, with experience leading Rs 7+ crore annual revenue teams, campaigns for Titan, PhonePe, John Deere, HCL, and ZebPay, and time as a marketing tutor at the University of Technology, Sydney."],
      ["Why did Ameya start Solvra?", "To give founder-led businesses the operator judgment of an experienced executive without the overhead of a large consulting firm."]
    ]
  },
  "book-a-diagnostic": {
    title: "Book a Strategy Diagnostic | Solvra",
    answer: "A strategy diagnostic is the first step in every Solvra engagement: a structured review of the business, its numbers, its systems, and its goals before recommending a path forward.",
    faqs: [
      ["What is a strategy diagnostic?", "A structured business health assessment covering your business stage, team size, revenue range, goals, and current challenges."],
      ["How long does it take?", "The form takes a few minutes; the follow-up conversation is typically a focused discovery call."],
      ["What happens after I submit?", "Solvra reviews the context and responds with the appropriate diagnostic or consultation path."]
    ]
  },
  contact: {
    title: "Contact | Solvra",
    answer: "To contact Solvra, share your business type, current stage, main challenge, and whether you need help with strategy, operations, marketing, AI, or executive leadership.",
    faqs: [
      ["How do I contact Solvra?", "Email directly, or use the strategy diagnostic form for a structured intake."],
      ["What should I include in the inquiry?", "Your business type, stage, current challenge, and the area where you need help."],
      ["What happens after I submit the form?", "Solvra reviews the context and responds with the appropriate diagnostic or consultation path."]
    ]
  }
};

const navLinks = [
  ["Practice Areas", "practice-areas.html"],
  ["Industries", "industries.html"],
  ["Case Studies", "case-studies.html"],
  ["Insights", "insights.html"],
  ["About", "about-solvra.html"],
  ["Contact", "contact.html"]
];

/* ---------------------------------------------------------------- */
/* SEO / routing helpers                                             */
/* ---------------------------------------------------------------- */

function currentPage() {
  return document.body.dataset.page || "home";
}

function pageUrl(page = currentPage()) {
  const path = page === "home" ? "index.html" : `${page}.html`;
  return `${window.location.origin}/${path}`;
}

function JsonLd({ data }) {
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />;
}

function SeoSchema() {
  const page = currentPage();
  const current = pageSeo[page] || pageSeo.home;
  const organization = {
    "@type": "ProfessionalService",
    "@id": `${window.location.origin}/#organization`,
    name: "Solvra",
    url: `${window.location.origin}/index.html`,
    logo: `${window.location.origin}/assets/solvra-lockup.svg`,
    image: `${window.location.origin}/assets/solvra-mark.svg`,
    description: pageSeo.home.answer,
    areaServed: ["India"],
    founder: { "@id": `${window.location.origin}/about-ameya.html#ameya-jalihal` },
    serviceType: practiceOrder.map((slug) => practiceAreas[slug].tag)
  };
  const founderEntity = {
    "@type": "Person",
    "@id": `${window.location.origin}/about-ameya.html#ameya-jalihal`,
    name: founder.name,
    jobTitle: "Founder, Solvra",
    image: `${window.location.origin}/assets/ameya-jalihal-founder.jpeg`,
    worksFor: { "@id": `${window.location.origin}/#organization` },
    knowsAbout: founder.expertise
  };
  const webPage = {
    "@type": "WebPage",
    "@id": `${pageUrl(page)}#webpage`,
    url: pageUrl(page),
    name: current.title,
    description: current.answer,
    isPartOf: { "@type": "WebSite", "@id": `${window.location.origin}/#website`, name: "Solvra", url: `${window.location.origin}/index.html` },
    about: { "@id": `${window.location.origin}/#organization` }
  };
  const breadcrumb = {
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: `${window.location.origin}/index.html` },
      ...(page === "home" ? [] : [{ "@type": "ListItem", position: 2, name: current.title.replace(" | Solvra", ""), item: pageUrl(page) }])
    ]
  };
  const faq = {
    "@type": "FAQPage",
    mainEntity: current.faqs.map(([question, answer]) => ({
      "@type": "Question",
      name: question,
      acceptedAnswer: { "@type": "Answer", text: answer }
    }))
  };
  const graph = [organization, founderEntity, webPage, breadcrumb, faq];
  if (practiceAreas[page]) {
    graph.push({
      "@type": "Service",
      "@id": `${pageUrl(page)}#service`,
      name: practiceAreas[page].tag,
      description: practiceAreas[page].body,
      provider: { "@id": `${window.location.origin}/#organization` },
      serviceType: practiceAreas[page].tag,
      audience: { "@type": "Audience", audienceType: practiceAreas[page].bestFor }
    });
  }
  return <JsonLd data={{ "@context": "https://schema.org", "@graph": graph }} />;
}

/* ---------------------------------------------------------------- */
/* Shared shell                                                      */
/* ---------------------------------------------------------------- */

function PageShell({ children }) {
  return (
    <React.Fragment>
      <SeoSchema />
      <SiteHeader />
      {children}
      <SiteFooter />
    </React.Fragment>
  );
}

function SiteHeader() {
  const [open, setOpen] = React.useState(false);
  const active = currentPage();
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 40, background: "rgba(255,255,255,0.82)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="container" style={{ height: 72, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-4)" }}>
        <a href="index.html" style={{ display: "inline-flex", alignItems: "center" }}>
          <img src="assets/solvra-lockup.svg" alt="Solvra" style={{ height: 32 }} />
        </a>
        <nav className="nav-links">
          {navLinks.map(([label, href]) => (
            <a
              key={label}
              href={href}
              style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", fontWeight: 600, color: href === (active === "home" ? "index.html" : `${active}.html`) ? "var(--text-primary)" : "var(--text-secondary)", textDecoration: "none" }}
            >{label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
          <div className="header-cta-desktop">
            <Button size="sm" variant="primary" as="a" href="book-a-diagnostic.html">Book Diagnostic</Button>
          </div>
          <button
            type="button"
            className="mobile-only nav-toggle"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            style={{ background: "none", border: "1.5px solid var(--border-default)", borderRadius: "var(--radius-md)", width: 40, height: 40, alignItems: "center", justifyContent: "center", color: "var(--ink-900)", cursor: "pointer" }}
          >
            <i data-lucide={open ? "x" : "menu"} aria-hidden="true" style={{ width: 20, height: 20 }} />
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-nav-panel">
          {navLinks.map(([label, href]) => (
            <a key={label} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <Button variant="primary" fullWidth as="a" href="book-a-diagnostic.html">Book Diagnostic</Button>
        </div>
      )}
    </header>
  );
}

function SiteFooter() {
  const columns = [
    ["Practice Areas", ...practiceOrder.map((slug) => [practiceAreas[slug].tag, `${slug}.html`])],
    ["Firm", ["Industries", "industries.html"], ["Case Studies", "case-studies.html"], ["Insights", "insights.html"], ["About Solvra", "about-solvra.html"], ["About Ameya", "about-ameya.html"]],
    ["Contact", ["Book a Diagnostic", "book-a-diagnostic.html"], ["Contact", "contact.html"]]
  ];
  return (
    <footer style={{ background: "var(--ink-900)", color: "var(--ink-300)" }}>
      <div className="container" style={{ paddingTop: "var(--space-16)", paddingBottom: "var(--space-10)" }}>
        <div className="grid-4" style={{ paddingBottom: "var(--space-12)", borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
          <div>
            <img src="assets/solvra-lockup-inverse.svg" alt="Solvra" style={{ height: 30, marginBottom: "var(--space-5)" }} />
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--white)", margin: 0, maxWidth: 280, lineHeight: 1.4 }}>Structure. Strategy. Scale.</p>
          </div>
          {columns.map(([head, ...items]) => (
            <div key={head}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: "var(--space-4)" }}>{head}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
                {items.map(([label, href]) => <a key={label} href={href} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-300)", textDecoration: "none" }}>{label}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "var(--space-6)", flexWrap: "wrap", gap: "var(--space-3)" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-500)" }}>© 2026 Solvra. A thinking partner.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------------------------------------------------------- */
/* Shared building blocks                                            */
/* ---------------------------------------------------------------- */

function PageHero({ eyebrow, title, body, action, secondaryAction }) {
  return (
    <section className="page-hero">
      <div className="container" style={{ paddingTop: "var(--space-20)", paddingBottom: "var(--space-20)" }}>
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="display" style={{ fontSize: "clamp(42px, 6vw, 72px)", maxWidth: 940 }}>{title}</h1>
        <p className="body-lg" style={{ maxWidth: 720, marginTop: "var(--space-6)" }}>{body}</p>
        {(action || secondaryAction) && (
          <div style={{ marginTop: "var(--space-8)", display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
            {action}
            {secondaryAction}
          </div>
        )}
      </div>
    </section>
  );
}

function AnswerBlock({ page }) {
  const seo = pageSeo[page] || pageSeo.home;
  return (
    <section style={{ background: "var(--ink-50)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="container" style={{ paddingTop: "var(--space-10)", paddingBottom: "var(--space-10)" }}>
        <Card variant="default" padding="26px">
          <div className="eyebrow" style={{ marginBottom: "var(--space-3)" }}>— In brief</div>
          <p className="body-lg" style={{ maxWidth: 880 }}>{seo.answer}</p>
        </Card>
      </div>
    </section>
  );
}

function FAQSection({ page, title = "What people usually ask first." }) {
  const seo = pageSeo[page] || pageSeo.home;
  return (
    <section className="section" style={{ background: "var(--surface-page)" }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div className="eyebrow">— Questions</div>
        <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-10)" }}>{title}</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
          {seo.faqs.map(([question, answer]) => (
            <Card key={question} variant="default" padding="24px">
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "0 0 var(--space-3)", color: "var(--text-primary)" }}>{question}</h3>
              <p className="body-copy">{answer}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ title = "Ready to scale?", body = "Book a strategy diagnostic and get a clear read on where structure, systems, or leadership support will move the needle first." }) {
  return (
    <section className="section" style={{ background: "var(--ink-900)", color: "var(--ink-50)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <h2 className="display" style={{ color: "var(--white)", fontSize: "var(--text-h1)", margin: "0 auto", maxWidth: 640 }}>{title}</h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body-lg)", color: "var(--ink-300)", margin: "var(--space-5) auto 0", maxWidth: 560 }}>{body}</p>
        <div style={{ marginTop: "var(--space-8)" }}>
          <Button variant="accent" size="lg" as="a" href="book-a-diagnostic.html">Book a Strategy Diagnostic</Button>
        </div>
      </div>
    </section>
  );
}

function IconTile({ icon, tone = "blue" }) {
  const tones = {
    blue: { bg: "var(--blue-100)", fg: "var(--blue-700)" },
    inverse: { bg: "rgba(255,255,255,0.06)", fg: "var(--blue-300)" }
  };
  const t = tones[tone] || tones.blue;
  return (
    <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: t.bg, display: "grid", placeItems: "center", color: t.fg, flex: "none" }}>
      <i data-lucide={icon} aria-hidden="true" style={{ width: 22, height: 22 }} />
    </div>
  );
}

function CheckList({ items, tone = "var(--blue-600)" }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((item) => (
        <div key={item} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
          <i data-lucide="check" aria-hidden="true" style={{ width: 16, height: 16, color: tone, marginTop: 3, flex: "none" }} />
          <span className="body-copy">{item}</span>
        </div>
      ))}
    </div>
  );
}

/* ---------------------------------------------------------------- */
/* Home-page sections                                                */
/* ---------------------------------------------------------------- */

function HomeHero() {
  return (
    <section id="top" style={{ background: "var(--surface-page)" }}>
      <div className="container" style={{ paddingTop: "var(--space-24)", paddingBottom: "var(--space-16)" }}>
        <div className="eyebrow">— Strategy. Operations. AI. Execution.</div>
        <h1 className="display" style={{ fontSize: "clamp(42px, 6.4vw, 80px)", maxWidth: 980 }}>Build a business that scales.</h1>
        <p className="body-lg" style={{ maxWidth: 720, marginTop: "var(--space-6)", marginBottom: "var(--space-8)" }}>
          Helping founder-led businesses transform ambition into scalable operating systems.
        </p>
        <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
          <Button variant="accent" size="lg" as="a" href="book-a-diagnostic.html" iconRight={<i data-lucide="arrow-right" aria-hidden="true" style={{ width: 20, height: 20 }} />}>Book Strategy Diagnostic</Button>
          <a className="text-link" href="practice-areas.html" style={{ display: "inline-flex", alignItems: "center", height: 54, padding: "0 var(--space-5)", border: "1.5px solid var(--ink-900)", borderRadius: "var(--radius-pill)" }}>Explore Practice Areas</a>
        </div>
      </div>
    </section>
  );
}

function TrustedByBar() {
  return (
    <section style={{ background: "var(--ink-50)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="container" style={{ paddingTop: "var(--space-8)", paddingBottom: "var(--space-8)" }}>
        <div className="eyebrow" style={{ marginBottom: "var(--space-5)", textAlign: "center" }}>— Brands worked with</div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "var(--space-8)" }}>
          {trustedBy.map((name) => (
            <span key={name} style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, letterSpacing: "0.02em", color: "var(--text-muted)" }}>{name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProblemsGrid() {
  return (
    <section id="problems" className="section" style={{ background: "var(--surface-page)" }}>
      <div className="container">
        <div style={{ maxWidth: 780, marginBottom: "var(--space-10)" }}>
          <div className="eyebrow">— Business problems</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>The patterns that keep founder-led businesses stuck.</h2>
        </div>
        <div className="grid-3">
          {problems.map(([icon, title, body]) => (
            <Card key={title} variant="default" padding="26px">
              <IconTile icon={icon} />
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "var(--space-4) 0 8px", color: "var(--text-primary)" }}>{title}</h3>
              <p className="body-copy" style={{ fontSize: "var(--text-sm)" }}>{body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function PracticeAreasPreview() {
  return (
    <section className="section" style={{ background: "var(--ink-50)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "var(--space-6)", marginBottom: "var(--space-10)" }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow">— Practice areas</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>How we help.</h2>
          </div>
          <a className="text-link" href="practice-areas.html">See all practice areas →</a>
        </div>
        <div className="grid-3">
          {practiceOrder.map((slug) => {
            const p = practiceAreas[slug];
            return (
              <Card key={slug} variant="default" interactive padding="26px" onClick={() => { window.location.href = `${slug}.html`; }}>
                <IconTile icon={p.icon} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "var(--space-4) 0 8px", color: "var(--text-primary)" }}>{p.tag}</h3>
                <p className="body-copy" style={{ fontSize: "var(--text-sm)", marginBottom: "var(--space-4)" }}>{p.headline}</p>
                <a className="text-link" href={`${slug}.html`}>Learn more →</a>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function WhySolvraSection() {
  return (
    <section className="section" style={{ background: "var(--surface-page)" }}>
      <div className="container">
        <div style={{ maxWidth: 680, marginBottom: "var(--space-10)" }}>
          <div className="eyebrow">— Why Solvra</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Consulting thinking. Operator execution.</h2>
        </div>
        <div className="grid-3">
          {whySolvra.map((item) => (
            <div key={item} style={{ display: "flex", gap: "var(--space-3)", alignItems: "center" }}>
              <i data-lucide="check-circle" aria-hidden="true" style={{ width: 20, height: 20, color: "var(--blue-700)", flex: "none" }} />
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--text-h4)", color: "var(--text-primary)" }}>{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MethodologySection({ inverse = true }) {
  return (
    <section className="section" style={inverse ? { background: "var(--ink-900)", color: "var(--ink-50)" } : { background: "var(--ink-50)" }}>
      <div className="container">
        <div className="eyebrow" style={inverse ? { color: "var(--blue-300)" } : {}}>— Methodology</div>
        <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-4)", color: inverse ? "var(--white)" : "var(--text-primary)" }}>The Solvra Operating System.</h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body-lg)", color: inverse ? "var(--ink-300)" : "var(--text-secondary)", maxWidth: 680, marginBottom: "var(--space-12)" }}>A structured five-stage approach behind every engagement, regardless of practice area.</p>
        <div className="grid-3">
          {methodology.map(([icon, title, body], index) => (
            <div key={title} style={{ display: "flex", gap: "var(--space-5)" }}>
              <div style={{ flex: "none", width: 48, height: 48, borderRadius: "var(--radius-md)", background: inverse ? "rgba(255,255,255,0.06)" : "var(--blue-100)", border: inverse ? "1px solid rgba(255,255,255,0.14)" : "none", display: "grid", placeItems: "center", color: inverse ? "var(--blue-300)" : "var(--blue-700)" }}>
                <i data-lucide={icon} aria-hidden="true" style={{ width: 22, height: 22 }} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: inverse ? "var(--ink-400)" : "var(--text-muted)", marginBottom: 6 }}>{String(index + 1).padStart(2, "0")}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h3)", fontWeight: 700, margin: "0 0 8px", color: inverse ? "var(--white)" : "var(--text-primary)" }}>{title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.6, color: inverse ? "var(--ink-300)" : "var(--text-secondary)", margin: 0 }}>{body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudyCard({ item, full = false }) {
  const stages = [["Challenge", "challenge"], ["Analysis", "analysis"], ["Approach", "strategy"], ["Implementation", "implementation"]];
  return (
    <Card variant="raised" padding="26px">
      <Badge tone="accent">{item.tag}</Badge>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", fontWeight: 700, lineHeight: 1.18, margin: "var(--space-5) 0 var(--space-3)", color: "var(--text-primary)" }}>{item.title}</h3>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.55, color: "var(--text-secondary)", margin: "0 0 var(--space-5)" }}>{item.body}</p>
      {full && (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", margin: "0 0 var(--space-6)" }}>
          {stages.map(([label, key]) => (
            <div key={key}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-accent)", marginBottom: 4 }}>{label}</div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.55, color: "var(--text-primary)", margin: 0 }}>{item[key]}</p>
            </div>
          ))}
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-accent)", marginBottom: 4 }}>Results</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)", marginTop: 8 }}>
              {item.stats.map(([value, label]) => (
                <div key={label}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 800, color: "var(--text-accent)", lineHeight: 1 }}>{value}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: 6 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-accent)", marginBottom: 4 }}>Lessons learned</div>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.55, color: "var(--text-primary)", margin: 0 }}>{item.lessons}</p>
          </div>
        </div>
      )}
      {!full && (
        <div className="metric-row" style={{ gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
          {item.stats.map(([value, label]) => (
            <div key={label}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 800, color: "var(--text-accent)", lineHeight: 1 }}>{value}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: 6 }}>{label}</div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}

function FeaturedCaseStudies() {
  const featured = caseStudies.slice(0, 4);
  return (
    <section className="section" style={{ background: "var(--surface-page)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "var(--space-6)", marginBottom: "var(--space-10)" }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow">— Featured case studies</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Evidence of sharper execution.</h2>
          </div>
          <a className="text-link" href="case-studies.html">See all case studies →</a>
        </div>
        <div className="grid-4">
          {featured.map((item) => <CaseStudyCard key={item.title} item={item} />)}
        </div>
      </div>
    </section>
  );
}

function InsightsTeaser() {
  return (
    <section className="section" style={{ background: "var(--ink-50)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ justifyContent: "center" }}>— Insights</div>
        <h2 className="display" style={{ fontSize: "var(--text-h1)", maxWidth: 620, margin: "0 auto" }}>Frameworks and insights, built for founder-led businesses.</h2>
        <p className="body-copy" style={{ maxWidth: 560, margin: "var(--space-5) auto 0" }}>A growing library on business strategy, operations, marketing, AI, and leadership.</p>
        <div style={{ marginTop: "var(--space-6)" }}><a className="text-link" href="insights.html">Visit Insights →</a></div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <React.Fragment>
      <HomeHero />
      <AnswerBlock page="home" />
      <TrustedByBar />
      <ProblemsGrid />
      <PracticeAreasPreview />
      <WhySolvraSection />
      <MethodologySection />
      <FeaturedCaseStudies />
      <InsightsTeaser />
      <FAQSection page="home" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* About Solvra                                                      */
/* ---------------------------------------------------------------- */

function AboutSolvraPage() {
  const differentiators = [
    ["Operator experience", "Built and run revenue teams and campaigns before advising anyone else's."],
    ["Consulting thinking", "Structured diagnostics, frameworks, and a repeatable methodology behind every engagement."],
    ["Execution discipline", "Recommendations come with the workshops, documentation, and governance to make them stick."],
    ["AI-enabled", "Modern workflows and AI adoption built into how the work gets done, not bolted on after."],
    ["Founder-first", "Every engagement is sized and paced for founder-led teams, not enterprise procurement cycles."]
  ];
  return (
    <React.Fragment>
      <PageHero
        eyebrow="— About Solvra"
        title="Building better businesses."
        body="Solvra is a boutique advisory firm helping founder-led businesses turn ambition into scalable operating systems, across strategy, operations, marketing, AI, and customer experience."
        action={<Button variant="accent" size="lg" as="a" href="book-a-diagnostic.html">Book a Strategy Diagnostic</Button>}
        secondaryAction={<a className="text-link" href="about-ameya.html" style={{ display: "inline-flex", alignItems: "center", height: 54, padding: "0 var(--space-5)", border: "1.5px solid var(--ink-900)", borderRadius: "var(--radius-pill)" }}>Meet the founder</a>}
      />
      <AnswerBlock page="about-solvra" />

      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="eyebrow">— Our story</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-5)" }}>Why Solvra exists.</h2>
          <p className="body-lg">Businesses don't struggle because they lack ideas. They struggle because strategy, operations, marketing, and execution aren't aligned. Solvra exists to solve that problem directly, combining marketing judgment, operations setup, and founder coaching into one advisory relationship instead of three disconnected vendors.</p>
        </div>
      </section>

      <section className="section" style={{ background: "var(--ink-50)" }}>
        <div className="container grid-3">
          <Card variant="default" padding="26px">
            <Badge tone="neutral">Mission</Badge>
            <p className="body-copy" style={{ marginTop: "var(--space-4)" }}>Help founder-led businesses build scalable operating systems that turn ambition into measurable outcomes.</p>
          </Card>
          <Card variant="default" padding="26px">
            <Badge tone="neutral">Vision</Badge>
            <p className="body-copy" style={{ marginTop: "var(--space-4)" }}>A generation of founder-led businesses run on clear systems, not constant founder firefighting.</p>
          </Card>
          <Card variant="default" padding="26px">
            <Badge tone="neutral">Values</Badge>
            <p className="body-copy" style={{ marginTop: "var(--space-4)" }}>Operator honesty, practical execution, and boutique attention over generic playbooks.</p>
          </Card>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="eyebrow">— Our philosophy</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Businesses fail because systems don't connect.</h2>
          <p className="body-lg" style={{ marginTop: "var(--space-5)" }}>Strategy without operations stalls. Operations without marketing starves. Marketing without customer experience churns. Solvra's work always looks at how the pieces connect, not just the piece in front of us.</p>
        </div>
      </section>

      <section className="section" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: "var(--space-10)" }}>
            <div className="eyebrow">— What makes us different</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Not another marketing agency.</h2>
          </div>
          <div className="grid-3">
            {differentiators.map(([title, body]) => (
              <Card key={title} variant="default" padding="24px">
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "0 0 8px" }}>{title}</h3>
                <p className="body-copy" style={{ fontSize: "var(--text-sm)" }}>{body}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <MethodologySection inverse={false} />

      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: "var(--space-8)" }}>
            <div className="eyebrow">— Who we work with</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Founder-led, across industries and stages.</h2>
          </div>
          <div className="grid-2">
            <Card variant="default" padding="26px">
              <Badge tone="neutral">Industries</Badge>
              <p className="body-copy" style={{ marginTop: "var(--space-4)" }}>Marketing agencies, technology, hospitality, education, consumer brands, professional services, retail, sports, entertainment, and startups. See the full <a className="text-link" href="industries.html">industries page</a>.</p>
            </Card>
            <Card variant="default" padding="26px">
              <Badge tone="neutral">Business sizes and teams</Badge>
              <p className="body-copy" style={{ marginTop: "var(--space-4)" }}>Founder-led businesses, agencies, startups, SMEs, and professional services firms — from idea-stage teams to growth-stage leadership groups.</p>
            </Card>
          </div>
        </div>
      </section>

      <FAQSection page="about-solvra" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Practice Areas                                                    */
/* ---------------------------------------------------------------- */

function PracticeAreasHub() {
  return (
    <React.Fragment>
      <PageHero eyebrow="— Practice areas" title="How we help." body="Six practice areas, one operating philosophy — every engagement starts with the same strategy diagnostic before recommending where to focus." />
      <AnswerBlock page="practice-areas" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container grid-3">
          {practiceOrder.map((slug) => {
            const p = practiceAreas[slug];
            return (
              <Card key={slug} variant="default" interactive padding="26px" onClick={() => { window.location.href = `${slug}.html`; }}>
                <IconTile icon={p.icon} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "var(--space-4) 0 8px" }}>{p.tag}</h3>
                <p className="body-copy" style={{ fontSize: "var(--text-sm)", marginBottom: "var(--space-4)" }}>{p.headline}</p>
                <a className="text-link" href={`${slug}.html`}>Learn more →</a>
              </Card>
            );
          })}
        </div>
      </section>
      <MethodologySection />
      <FAQSection page="practice-areas" />
      <CtaBand />
    </React.Fragment>
  );
}

function PracticeAreaDetailPage({ slug }) {
  const p = practiceAreas[slug];
  const related = caseStudies.filter((c) => p.relatedTags.includes(c.tag));
  return (
    <React.Fragment>
      <PageHero
        eyebrow={`— ${p.tag}`}
        title={p.headline}
        body={p.body}
        action={<Button variant="accent" size="lg" as="a" href="book-a-diagnostic.html">Discuss this practice area</Button>}
        secondaryAction={<a className="text-link" href="practice-areas.html" style={{ display: "inline-flex", alignItems: "center", height: 54, padding: "0 var(--space-5)", border: "1.5px solid var(--ink-900)", borderRadius: "var(--radius-pill)" }}>All practice areas</a>}
      />
      <AnswerBlock page={slug} />

      {p.problems.length > 0 && (
        <section className="section" style={{ background: "var(--surface-page)" }}>
          <div className="container">
            <div className="eyebrow">— Problems this solves</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-8)" }}>Where this practice area starts.</h2>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {p.problems.map((item) => <Badge key={item} tone="neutral">{item}</Badge>)}
            </div>
          </div>
        </section>
      )}

      <section className="section" style={{ background: p.problems.length > 0 ? "var(--ink-50)" : "var(--surface-page)" }}>
        <div className="container grid-2">
          <Card variant="default" padding="30px">
            <Badge tone="accent">Capabilities</Badge>
            <div style={{ marginTop: "var(--space-5)", display: "flex", flexWrap: "wrap", gap: 8 }}>
              {p.capabilities.map((c) => <Badge key={c} tone="neutral">{c}</Badge>)}
            </div>
          </Card>
          <Card variant="default" padding="30px">
            <Badge tone="neutral">Best for</Badge>
            <p className="body-lg" style={{ marginTop: "var(--space-5)" }}>{p.bestFor}</p>
            {p.engagementModels && (
              <React.Fragment>
                <div style={{ marginTop: "var(--space-5)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>Engagement models</div>
                <div style={{ marginTop: 8, display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {p.engagementModels.map((m) => <Badge key={m} tone="neutral">{m}</Badge>)}
                </div>
              </React.Fragment>
            )}
          </Card>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container">
          <div className="eyebrow">— Deliverables</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-10)" }}>Clear assets for decisions and execution.</h2>
          <div className="grid-3">
            {p.deliverables.map((item) => (
              <Card key={item} variant="default" padding="24px">
                <i data-lucide="check-circle" aria-hidden="true" style={{ width: 20, height: 20, color: "var(--blue-700)", marginBottom: "var(--space-4)" }} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: 0 }}>{item}</h3>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section" style={{ background: "var(--ink-50)" }}>
          <div className="container">
            <div className="eyebrow">— Related case studies</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-10)" }}>Where this practice area shows up in the work.</h2>
            <div className="grid-3">
              {related.map((item) => <CaseStudyCard key={item.title} item={item} />)}
            </div>
          </div>
        </section>
      )}

      <FAQSection page={slug} />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Industries                                                        */
/* ---------------------------------------------------------------- */

function IndustriesPage() {
  return (
    <React.Fragment>
      <PageHero eyebrow="— Industries" title="Deep industry experience." body="Solvra's frameworks are industry-agnostic; what changes is how they're applied to each business's customers and operating model." />
      <AnswerBlock page="industries" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container grid-4">
          {industries.map(([icon, name]) => (
            <Card key={name} variant="default" padding="24px" style={{ textAlign: "center" }}>
              <div style={{ display: "flex", justifyContent: "center", marginBottom: "var(--space-4)" }}><IconTile icon={icon} /></div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: 0 }}>{name}</h3>
            </Card>
          ))}
        </div>
      </section>
      <FAQSection page="industries" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Case Studies                                                      */
/* ---------------------------------------------------------------- */

function CaseStudiesPage() {
  const [filter, setFilter] = React.useState("all");
  const tabs = [
    { label: "All", value: "all" },
    { label: "Business Strategy", value: "business-strategy" },
    { label: "Business Operations", value: "business-operations" },
    { label: "Marketing Operations", value: "marketing-operations" }
  ];
  const shown = filter === "all" ? caseStudies : caseStudies.filter((c) => c.practice === filter);
  return (
    <React.Fragment>
      <PageHero eyebrow="— Case studies" title="Better structure shows up in better execution." body="Selected work across agency operations, organic growth, hospitality systems, startup GTM, funding readiness, and multi-city brand activation." />
      <AnswerBlock page="case-studies" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "var(--space-8)" }}>
            <div style={{ minWidth: 420 }}><Tabs tabs={tabs} value={filter} onChange={setFilter} /></div>
          </div>
          <div className="grid-2">
            {shown.map((item) => <CaseStudyCard key={item.title} item={item} full />)}
          </div>
        </div>
      </section>
      <FAQSection page="case-studies" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Insights (structure only)                                         */
/* ---------------------------------------------------------------- */

function InsightsPage() {
  const categories = ["Business Strategy", "Operations", "Marketing", "AI", "Leadership", "Frameworks", "Productivity", "Founder Office", "Decision Making", "Transformation"];
  const resources = ["Templates", "Downloads", "Playbooks", "Diagnostics"];
  return (
    <React.Fragment>
      <PageHero eyebrow="— Insights" title="Frameworks and insights, built for founder-led businesses." body="A growing library on business strategy, operations, marketing, AI, and leadership. This section is new — categories are live, and articles are being added over time." />
      <AnswerBlock page="insights" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: "var(--space-10)" }}>
            <div className="eyebrow">— Categories</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>What's coming.</h2>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {categories.map((c) => <Badge key={c} tone="neutral">{c}</Badge>)}
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: "var(--space-8)" }}>
            <div className="eyebrow">— Resources</div>
            <h2 className="display" style={{ fontSize: "var(--text-h1)" }}>Templates and playbooks, coming soon.</h2>
          </div>
          <div className="grid-4">
            {resources.map((r) => (
              <Card key={r} variant="default" padding="24px" style={{ textAlign: "center" }}>
                <i data-lucide="file-text" aria-hidden="true" style={{ width: 22, height: 22, color: "var(--blue-700)" }} />
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", margin: "var(--space-3) 0 0" }}>{r}</h3>
                <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: 6 }}>Coming soon</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
      <FAQSection page="insights" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* About Ameya                                                       */
/* ---------------------------------------------------------------- */

function AboutAmeyaPage() {
  return (
    <React.Fragment>
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container founder-grid">
          <div>
            <div className="eyebrow">— About the founder</div>
            <h1 className="display" style={{ fontSize: "clamp(36px, 5vw, 56px)", marginBottom: "var(--space-3)" }}>Ameya Jalihal.</h1>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-accent)", marginBottom: "var(--space-5)" }}>{founder.tagline}</p>
            <p className="body-lg">{founder.positioning}</p>
            <p className="body-copy" style={{ marginTop: "var(--space-5)" }}>{founder.intro}</p>
          </div>
          <div style={{ border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--ink-50)", aspectRatio: "4 / 5" }}>
            <img src="assets/ameya-jalihal-founder.jpeg" alt="Ameya Jalihal, founder of Solvra" style={{ width: "100%", height: "100%", display: "block", objectFit: "cover", objectPosition: "50% 22%" }} />
          </div>
          <Card variant="default" padding="30px">
            {founder.experience.map((item) => (
              <div key={item} style={{ display: "flex", gap: "var(--space-3)", alignItems: "flex-start", padding: "var(--space-4) 0", borderBottom: "1px solid var(--border-subtle)" }}>
                <i data-lucide="check-circle" aria-hidden="true" style={{ width: 18, height: 18, color: "var(--blue-700)", marginTop: 3, flex: "none" }} />
                <span style={{ fontFamily: "var(--font-sans)", color: "var(--text-primary)", lineHeight: 1.5 }}>{item}</span>
              </div>
            ))}
          </Card>
        </div>
      </section>
      <AnswerBlock page="about-ameya" />

      <section className="section" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div className="eyebrow">— Core expertise</div>
          <h2 className="display" style={{ fontSize: "var(--text-h1)", marginBottom: "var(--space-8)" }}>Grounded in.</h2>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {founder.expertise.map((e) => <Badge key={e} tone="neutral">{e}</Badge>)}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--ink-900)", color: "var(--ink-50)" }}>
        <div className="container" style={{ maxWidth: 780 }}>
          <div className="eyebrow" style={{ color: "var(--blue-300)" }}>— Personal mission</div>
          <p className="display" style={{ color: "var(--white)", fontSize: "var(--text-h2)", lineHeight: 1.4, margin: 0 }}>"{founder.mission}"</p>
        </div>
      </section>

      <FAQSection page="about-ameya" />
      <CtaBand />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Book a Diagnostic                                                 */
/* ---------------------------------------------------------------- */

function BookDiagnosticPage() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ business: "", email: "", employees: "", revenue: "", goals: "", challenges: "" });
  const update = (key) => (event) => setForm((f) => ({ ...f, [key]: event.target.value }));
  const submit = (event) => {
    event.preventDefault();
    const subject = `Strategy diagnostic request${form.business ? ` — ${form.business}` : ""}`;
    const body = [
      `Business name: ${form.business || "—"}`,
      `Work email: ${form.email}`,
      `Employees: ${form.employees || "—"}`,
      `Revenue range: ${form.revenue || "—"}`,
      "",
      "Goals:",
      form.goals || "—",
      "",
      "Current challenges:",
      form.challenges || "—"
    ].join("\n");
    window.location.href = `mailto:${LEAD_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  return (
    <React.Fragment>
      <PageHero eyebrow="— Book a diagnostic" title="Start with a business health assessment." body="Every Solvra engagement opens with a strategy diagnostic: a structured read on your business stage, team, numbers, and goals before recommending a path forward." />
      <AnswerBlock page="book-a-diagnostic" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container" style={{ maxWidth: 640 }}>
          <Card variant="raised" padding="30px">
            {sent ? (
              <Alert tone="success" title="Your email app should now be open" icon={<i data-lucide="check-circle" aria-hidden="true" style={{ width: 18, height: 18 }} />}>We pre-filled a message to {LEAD_EMAIL} with your details — just hit send from your mail app. If nothing opened, email us directly at {LEAD_EMAIL}.</Alert>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
                <Field label="Business name" required htmlFor="diag-business"><Input id="diag-business" name="business" placeholder="Your business name" required value={form.business} onChange={update("business")} /></Field>
                <Field label="Work email" required htmlFor="diag-email"><Input id="diag-email" name="email" type="email" placeholder="you@company.com" required value={form.email} onChange={update("email")} /></Field>
                <div className="grid-2" style={{ gap: "var(--space-5)" }}>
                  <Field label="Employees" htmlFor="diag-employees">
                    <Select id="diag-employees" name="employees" placeholder="Select one" value={form.employees} onChange={update("employees")} options={[
                      { label: "1–5", value: "1-5" },
                      { label: "6–20", value: "6-20" },
                      { label: "21–50", value: "21-50" },
                      { label: "51+", value: "51-plus" }
                    ]} />
                  </Field>
                  <Field label="Revenue range" htmlFor="diag-revenue">
                    <Select id="diag-revenue" name="revenue" placeholder="Select one" value={form.revenue} onChange={update("revenue")} options={[
                      { label: "Pre-revenue", value: "pre-revenue" },
                      { label: "Under Rs 25 lakh", value: "under-25l" },
                      { label: "Rs 25 lakh – 1 crore", value: "25l-1cr" },
                      { label: "Rs 1 crore – 5 crore", value: "1cr-5cr" },
                      { label: "Rs 5 crore+", value: "5cr-plus" }
                    ]} />
                  </Field>
                </div>
                <Field label="Goals" htmlFor="diag-goals"><Textarea id="diag-goals" name="goals" rows={3} placeholder="What are you trying to achieve in the next 6–12 months?" value={form.goals} onChange={update("goals")} /></Field>
                <Field label="Current challenges" htmlFor="diag-challenges"><Textarea id="diag-challenges" name="challenges" rows={3} placeholder="What's stuck right now?" value={form.challenges} onChange={update("challenges")} /></Field>
                <Button type="submit" variant="accent" size="lg" fullWidth>Book Discovery Call</Button>
              </form>
            )}
          </Card>
        </div>
      </section>
      <FAQSection page="book-a-diagnostic" />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Contact                                                           */
/* ---------------------------------------------------------------- */

function ContactPage() {
  return (
    <React.Fragment>
      <PageHero eyebrow="— Contact" title="Start with a sharper diagnosis." body="Share your business stage, current challenge, and whether you need help with strategy, operations, marketing, AI, or executive leadership." />
      <AnswerBlock page="contact" />
      <section className="section" style={{ background: "var(--surface-page)" }}>
        <div className="container" style={{ maxWidth: 640 }}>
          <Card variant="raised" padding="30px" style={{ textAlign: "center" }}>
            <IconTile icon="mail" />
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h3)", margin: "var(--space-5) 0 8px" }}>Email</h2>
            <a className="text-link" href={`mailto:${LEAD_EMAIL}`} style={{ fontSize: "var(--text-body-lg)" }}>{LEAD_EMAIL}</a>
            <div style={{ marginTop: "var(--space-8)" }}>
              <Button variant="accent" size="lg" as="a" href="book-a-diagnostic.html">Book a Strategy Diagnostic</Button>
            </div>
          </Card>
        </div>
      </section>
      <FAQSection page="contact" />
    </React.Fragment>
  );
}

/* ---------------------------------------------------------------- */
/* Router                                                             */
/* ---------------------------------------------------------------- */

function RenderPage() {
  const page = currentPage();
  if (page === "about-solvra") return <AboutSolvraPage />;
  if (page === "practice-areas") return <PracticeAreasHub />;
  if (practiceAreas[page]) return <PracticeAreaDetailPage slug={page} />;
  if (page === "industries") return <IndustriesPage />;
  if (page === "case-studies") return <CaseStudiesPage />;
  if (page === "insights") return <InsightsPage />;
  if (page === "about-ameya") return <AboutAmeyaPage />;
  if (page === "book-a-diagnostic") return <BookDiagnosticPage />;
  if (page === "contact") return <ContactPage />;
  return <HomePage />;
}

function App() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  React.useEffect(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    const timer = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 60);
    return () => clearTimeout(timer);
  }, []);
  return <PageShell><RenderPage /></PageShell>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
setTimeout(() => window.lucide && window.lucide.createIcons(), 60);