import { useDeferredValue, useMemo, useState } from 'react'
import { ArrowRight, BookOpenText, Boxes, Download, ExternalLink, Landmark, MonitorCog, Sparkles } from 'lucide-react'
import { Link, useSearchParams } from 'react-router-dom'
import { MarketingShell } from '../components/layout/MarketingShell'
import { SiteMetadata } from '../components/seo/SiteMetadata'
import { HyperTwistButtonAnchor, HyperTwistButtonLink } from '../components/ui/HyperTwistButton'
import { PublicLaunchStatus } from '../components/ui/PublicLaunchStatus'
import { ProductSurfaceMatrix } from '../components/ui/ProductSurfaceMatrix'
import { brandConfig } from '../site-config'
import {
  advancedOperatorAdjunctTracks,
  audienceFitCards,
  browserLimitCards,
  capabilityPillars,
  changelogEntries,
  companyNarrative,
  degradedStateRecoveryTracks,
  desktopWorkflowTracks,
  desktopFirstLaunchCards,
  deploymentReadinessTracks,
  digitalDeliveryCards,
  firstSessionVerificationCards,
  featureAtlasCurrentTracks,
  heroMetrics,
  issueReportingChecklistCards,
  operatorManualTracks,
  operatorPlaybooks,
  puzzleCatalogCards,
  publicDocumentationPrinciples,
  releasePacketCards,
  releaseRolloutChecklist,
  productSurfaceMatrixRows,
  releaseStoryCards,
  resourceCollections,
  roadmapHonestyCards,
  shippingNowCards,
  privacyBoundaryCards,
  supportEscalationCards,
  supportFaqs,
} from '../site-data'
import {
  BrowserAuthMethodsSection,
  BrowserDesktopDecisionFaqSection,
  BrowserDesktopRealitySection,
  BulletCardSection,
  ControlProfileRosterSection,
  DeliverySurfaceResponsibilitiesGrid,
  DownloadableOperatorManualSection,
  FaqCardSection,
  HigherDimensionalRuntimeGuideSection,
  InputAndDevicePostureSection,
  OperatorDesktopQuickstartSection,
  PrincipleCardSection,
  PublicManualRouteAtlasSection,
  PublicPackagedDesktopProofSection,
  PublicReleaseDecisionGuideSection,
  ReleaseAuthorityBundleSection,
  RuntimeControlGuideSection,
  Section,
  SimulatorManualSection,
  StepCardSection,
  StepOnlyCardSection,
  SupportTopicDirectorySection,
  SurfaceChoiceGuideSection,
  supportTopicDirectory,
  supportTopicGuidance,
  usePublicReleaseManifestView,
} from './public-page-helpers'

function HomeHeroPanel() {
  return (
    <section className="hero-panel">
      <div className="hero-grid">
        <div className="hero-copy">
          <p>
            HyperTwist is built for people who want more than a timer. Start on the website
            when you want the story, plans, release notes, and setup guidance. Move into the
            desktop app when you want the real experience: fast daily solves, guided recovery,
            replay study, coaching, and deep 120‑cell or 5D sessions that feel like a place
            you can keep returning to.
          </p>
          <div className="button-row">
            <HyperTwistButtonLink to="/register?next=%2Fapp">
              Create account
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/download" tone="secondary">
              Get the desktop app
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/browser" tone="ghost">
              See what the website is for
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/help" tone="ghost">
              Explore the help center
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/app" tone="ghost">
              Open your dashboard
            </HyperTwistButtonLink>
          </div>
        </div>
        <div className="hero-visual-card">
          <img
            src="/branding/hypertwist-3d-symbol.png"
            alt="HyperTwist symbol"
            className="hero-visual-card__image"
          />
          <p className="hero-visual-card__caption">
            One product, two roles: a polished front door on the web and a far deeper training room on desktop.
          </p>
          <ul className="list top-gap">
            <li>Use the website for pricing, docs, release notes, legal details, and private downloads.</li>
            <li>Use the desktop app for real cube-state workflows, replay review, and higher-dimensional maps.</li>
            <li>Use keyboard and mouse today, with XR kept honest until packaged device proof is complete.</li>
          </ul>
        </div>
      </div>
      <div className="metric-grid">
        {heroMetrics.map((metric) => (
          <article key={metric.label} className="metric-card">
            <strong>{metric.value}</strong>
            <span>{metric.label}</span>
          </article>
        ))}
      </div>
    </section>
  )
}

function HomeShippingNowSection() {
  return (
    <Section
      title="What ships now"
      description="Every item here is already part of the product today."
    >
      <div className="card-grid">
        {shippingNowCards.map((item) => (
          <article key={item} className="card card--compact">
            <Sparkles size={18} />
            <p>{item}</p>
          </article>
        ))}
      </div>
    </Section>
  )
}

function HomeCapabilityPillarsSection() {
  return (
    <Section
      title="Capability pillars"
      description="HyperTwist combines training depth, higher-dimensional study, and a clean access experience across web and desktop."
    >
      <div className="card-grid">
        {capabilityPillars.map((pillar) => (
          <article key={pillar.title} className="card">
            <h3>{pillar.title}</h3>
            <p>{pillar.description}</p>
          </article>
        ))}
      </div>
    </Section>
  )
}

function HomeRoadmapHonestySection() {
  return (
    <Section
      title="What to expect from web and desktop"
      description="Clear expectations make the product easier to trust."
    >
      <div className="split-grid">
        {roadmapHonestyCards.map((item) => (
          <article key={item} className="callout">
            <p>{item}</p>
          </article>
        ))}
      </div>
    </Section>
  )
}

function HomeDeliverySurfacesSection() {
  return (
    <Section
      title="How HyperTwist comes together"
      description="Start on the website. Train in the desktop app. Both parts matter, but each one exists to do a different job well."
    >
      <div className="feature-band">
        <article className="feature-band__card">
          <MonitorCog size={22} />
          <h3>Website account and dashboard</h3>
          <p>Signed-in web access for release status, desktop pairing, notices, and account management.</p>
          <Link to="/app" className="inline-link">
            Open dashboard <ArrowRight size={15} />
          </Link>
        </article>
        <article className="feature-band__card">
          <Download size={22} />
          <h3>Desktop download and release path</h3>
          <p>Download guidance for the native Unreal build, with release notes and notices kept close to the build itself.</p>
          <Link to="/download" className="inline-link">
            Open download center <ArrowRight size={15} />
          </Link>
        </article>
        <article className="feature-band__card">
          <Landmark size={22} />
          <h3>Plans, checkout, and notices</h3>
          <p>Pricing, checkout, and public notices stay visible together so buying and download decisions are easy to understand.</p>
          <Link to="/open-source-notices" className="inline-link">
            Review notices <ArrowRight size={15} />
          </Link>
        </article>
      </div>
    </Section>
  )
}

function HomeFirstSessionSection() {
  return (
    <Section
      title="How a real first session flows"
      description="This is the real path from curiosity into the actual simulator, without pretending the website already replaced the desktop app."
    >
      <div className="card-grid">
        {operatorManualTracks.slice(0, 3).map((track) => (
          <article key={track.title} className="card">
            <h3>{track.title}</h3>
            <p>{track.description}</p>
            <ul className="list top-gap">
              {track.steps.map((step) => (
                <li key={step}>{step}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  )
}

type ResourceCollection = {
  readonly title: string
  readonly items: readonly string[]
}

function filterResourceCollections(query: string): readonly ResourceCollection[] {
  const normalized = query.trim().toLowerCase()
  if (!normalized) return resourceCollections

  return resourceCollections
    .map((collection) => ({
      ...collection,
      items: collection.items.filter((item) => (
        item.toLowerCase().includes(normalized) || collection.title.toLowerCase().includes(normalized)
      )),
    }))
    .filter((collection) => collection.items.length > 0)
}

function ResourcesFinderSection({
  query,
  filteredCollections,
  onQueryChange,
}: {
  query: string
  filteredCollections: readonly ResourceCollection[]
  onQueryChange: (value: string) => void
}) {
  return (
    <Section title="Resource finder" description="Search the guides, references, and training materials that matter to players, teams, and buyers.">
      <label className="input-label" htmlFor="resource-query">Filter resources</label>
      <input
        id="resource-query"
        className="input"
        value={query}
        onChange={(event) => onQueryChange(event.target.value)}
        placeholder="Search training, downloads, notices..."
      />
      <div className="card-grid top-gap">
        {filteredCollections.map((collection) => (
          <article key={collection.title} className="card">
            <h3>{collection.title}</h3>
            <ul className="list">
              {collection.items.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  )
}

function ResourcesDirectRoutesSection() {
  return (
    <Section title="Direct routes">
      <div className="feature-band">
        <Link to="/browser" className="feature-band__card feature-band__card--link">
          <ExternalLink size={22} />
          <h3>Browser guide</h3>
          <p>The public explanation of what the web experience is for, where the desktop app goes deeper, and when to move into it.</p>
        </Link>
        <Link to="/features" className="feature-band__card feature-band__card--link">
          <Boxes size={22} />
          <h3>Feature atlas</h3>
          <p>One public page for puzzle families, controls, higher-dimensional depth, and what ships today.</p>
        </Link>
        <Link to="/help" className="feature-band__card feature-band__card--link">
          <MonitorCog size={22} />
          <h3>Help center</h3>
          <p>Knowledge-base style guidance for onboarding, controls, release handoff, and practical troubleshooting.</p>
        </Link>
        <Link to="/getting-started" className="feature-band__card feature-band__card--link">
          <MonitorCog size={22} />
          <h3>Getting started</h3>
          <p>The clearest first-session path from website account setup into the downloadable app.</p>
        </Link>
        <Link to="/launch-status" className="feature-band__card feature-band__card--link">
          <Landmark size={22} />
          <h3>Launch status</h3>
          <p>The public checklist for early access, release readiness, and current availability.</p>
        </Link>
        <Link to="/docs" className="feature-band__card feature-band__card--link">
          <BookOpenText size={22} />
          <h3>Docs landing</h3>
          <p>Product-facing documentation, controls, setup, and deeper guidance.</p>
        </Link>
        <Link to="/support" className="feature-band__card feature-band__card--link">
          <ExternalLink size={22} />
          <h3>Support</h3>
          <p>Contact, account help, download help, and setup questions.</p>
        </Link>
        <Link to="/contact" className="feature-band__card feature-band__card--link">
          <Landmark size={22} />
          <h3>Contact</h3>
          <p>The direct contact route for access, desktop-app issues, pricing, and team planning.</p>
        </Link>
        <Link to="/changelog" className="feature-band__card feature-band__card--link">
          <Sparkles size={22} />
          <h3>Release notes</h3>
          <p>Recent public-facing release packets and product updates.</p>
        </Link>
      </div>
    </Section>
  )
}

function ResourcesOperatorPlaybooksSection() {
  return (
    <Section
      title="Training and team playbooks"
      description="These are the practical patterns that matter once a player, team, or studio moves from curiosity into real use."
    >
      <div className="card-grid">
        {operatorPlaybooks.map((playbook) => (
          <article key={playbook.title} className="card">
            <h3>{playbook.title}</h3>
            <ul className="list top-gap">
              {playbook.steps.map((step) => (
                <li key={step}>{step}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  )
}

function ResourcesDeploymentSnapshotSection() {
  return (
    <Section
      title="Release snapshot"
      description="The public site stays easier to trust when account access, package proof, and legal guidance stay clearly separated."
    >
      <div className="card-grid">
        {deploymentReadinessTracks.map((track) => (
          <article key={track.title} className="card">
            <h3>{track.title}</h3>
            <ul className="list top-gap">
              {track.steps.map((step) => (
                <li key={step}>{step}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  )
}

export function HomeLanding() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-home')

  return (
    <>
      <SiteMetadata
        title="HyperTwist"
        description="HyperTwist is a desktop-first cube and hypercube training environment for recognition, replay, coaching, and higher-dimensional puzzle study."
        canonicalPath="/"
      />
      <MarketingShell
        eyebrow="Desktop-first simulator. Website-first access."
        title="One serious home for classic cubes, 120‑cell, 5D, and deep daily practice."
        lede="HyperTwist gives you a polished website for account access, plans, guides, and release updates, then hands you into a much deeper desktop app for recognition, replay, guided training, and higher-dimensional puzzle study."
      >
        <HomeHeroPanel />

        <Section
          title="Current access snapshot"
          description="See what is available right now before you decide whether to create an account, compare plans, or download the app."
        >
          <PublicLaunchStatus title="Public website and release access" />
        </Section>

        <BulletCardSection
          title="Why the desktop app does the heavy lifting"
          description="This is the honest answer to the obvious question: why the downloadable remains the strongest, richest way to experience HyperTwist."
          cards={browserLimitCards}
        />

        <BrowserDesktopRealitySection />

        <BrowserDesktopDecisionFaqSection
          description="First-time visitors should not have to decode the split themselves. These answers explain what the website is for and why the desktop app stays central."
        />

        <HomeShippingNowSection />

        <BulletCardSection
          title="Puzzle families and study lanes"
          description="HyperTwist is broader than one timer or one browser widget. These are the real practice and puzzle experiences already waiting inside the product."
          cards={puzzleCatalogCards}
        />

        <HomeCapabilityPillarsSection />

        <BulletCardSection
          title="Who HyperTwist is for"
          description="The website and desktop app work together differently depending on whether the next job is practice, team setup, or higher-dimensional study."
          cards={audienceFitCards}
        />

        <HomeRoadmapHonestySection />

        <HomeDeliverySurfacesSection />

        <PublicManualRouteAtlasSection
          title="Which public page should you open next?"
          description="The website is more than a landing page. This atlas points you to the next guide, plan, or download step that fits what you want to do."
          limit={8}
        />

        <DownloadableOperatorManualSection
          description="The homepage also exposes an offline guide so the desktop-first product story, first-session path, and current runtime boundary can leave the browser cleanly when needed."
        />

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/changelog', label: 'Review release notes' },
          ]}
        />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The homepage should not stop at explanation alone. It should also show whether your next best move is to create an account, compare plans, download the app, or review the release details."
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The homepage is part of the real release story, so it keeps docs, release notes, source links, notices, and support references bundled instead of scattering them behind later pages."
        />

        <BrowserAuthMethodsSection
          description="The homepage also makes the available sign-in methods visible before you commit to signup, pricing, or downloads."
        />

        <HomeFirstSessionSection />

        <StepCardSection
          title="Desktop workflows already supported"
          description="The homepage is more useful when it also points at the concrete desktop workflows the software already supports today."
          cards={desktopWorkflowTracks.slice(0, 3)}
        />

        <OperatorDesktopQuickstartSection title="What the first serious session should look like" />

        <SurfaceChoiceGuideSection description="This is the shortest practical answer to the website-versus-desktop question: stay public for release context, move signed-in for account-aware access, and move native for the actual simulator." />

        <Section
          title="Where each part of HyperTwist lives"
          description="HyperTwist spans a website, a signed-in dashboard, in-app web tools, and a desktop simulator. This map keeps each part clear."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>
      </MarketingShell>
    </>
  )
}

export function AboutPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-about')

  return (
    <>
      <SiteMetadata
        title="About HyperTwist"
        description="Learn why HyperTwist exists, how it treats higher-dimensional training as first-class work, and why the website stays honest about a desktop-first simulator."
        canonicalPath="/about"
      />
      <MarketingShell
        eyebrow="Why HyperTwist exists"
        title="A training stack built for people who want more than a timer."
        lede="HyperTwist exists because cubers deserve one coherent system for practice, replay, explanation, recognition-assisted recovery, and serious higher-dimensional exploration without stitching together five different tools."
      >
        <Section title="Mission">
          <div className="card">
            <p>{companyNarrative.mission}</p>
            <p>{companyNarrative.posture}</p>
            <p>{companyNarrative.distribution}</p>
          </div>
        </Section>

        <BrowserDesktopRealitySection />

        <Section
          title="Why the website still matters"
          description="Keeping the website does not weaken the desktop-first vision. It gives HyperTwist a clean place for accounts, plans, release updates, downloads, and a product story people can actually understand before they install."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <BrowserDesktopDecisionFaqSection
          description="The about page should answer the recurring web-versus-desktop questions directly: what the website can do, what it should not claim, and why both parts exist."
        />

        <Section title="What makes the product different">
          <div className="card-grid">
            <article className="card">
              <Boxes size={22} />
              <h3>It treats higher-dimensional puzzles as first-class work</h3>
              <p><span className="no-break">120‑cell</span> and 5D study are not hand-wavy aspirations. They are part of the current product.</p>
            </article>
            <article className="card">
              <BookOpenText size={22} />
              <h3>It stays product-honest</h3>
              <p>Shipped, retained, and future-facing surfaces remain clearly separated so public copy matches actual capability.</p>
            </article>
            <article className="card">
              <MonitorCog size={22} />
              <h3>It keeps the website and simulator honest</h3>
              <p>The public website helps people access the product without pretending the browser already replaces the desktop app.</p>
            </article>
          </div>
        </Section>

        <BulletCardSection
          title="What you can actually train today"
          description="The public narrative is stronger when it names the concrete puzzle and workflow families the downloadable already owns."
          cards={puzzleCatalogCards}
        />

        <BulletCardSection
          title="Who the product is built for"
          description="HyperTwist is not one flat audience product. The website companion and desktop app serve different needs across these groups."
          cards={audienceFitCards}
        />

        <Section
          title="How a real HyperTwist session unfolds"
          description="The product story is strongest when the public site explains the genuine journey instead of flattening website access and simulator use into one vague promise."
        >
          <div className="card-grid">
            {operatorManualTracks.map((track) => (
              <article key={track.title} className="card">
                <h3>{track.title}</h3>
                <p>{track.description}</p>
                <ul className="list top-gap">
                  {track.steps.map((step) => (
                    <li key={step}>{step}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <StepCardSection
          title="How the software is actually used"
          description="These are the practical desktop and training workflows that already exist behind the product narrative."
          cards={desktopWorkflowTracks}
        />

        <SurfaceChoiceGuideSection description="Keeping the website and the desktop build together only makes sense if the handoff is explicit. This guide keeps the right surface choice visible in plain language." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The about page should also say what the next move is, not only why the product exists."
        />

        <InputAndDevicePostureSection
          title="Current desktop control and headset truth"
          description="The product can be ambitious without overclaiming. This page makes the current input, controller, and headset boundary explicit."
        />

        <ControlProfileRosterSection
          title="Selectable control and settings roster"
          description="This keeps the public manual concrete about what users can already choose or persist today without inflating that into finished controller rebinding or headset-runtime completion."
        />

        <Section
          title="Release and deployment maturity"
          description="Production seriousness comes from clean separation between identity, package proof, legal details, and runtime execution."
        >
          <div className="card-grid">
            {deploymentReadinessTracks.map((track) => (
              <article key={track.title} className="card">
                <h3>{track.title}</h3>
                <ul className="list top-gap">
                  {track.steps.map((step) => (
                    <li key={step}>{step}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="Current public access state"
          description="Narrative claims stay more credible when this page also shows live public access status and current packaged desktop proof."
        >
          <PublicLaunchStatus title="About-page launch and release access" />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/docs', label: 'Open public manual' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The about page should keep its product narrative tied to the same docs, release notes, source links, legal pages, and support references people need in real use."
        />
      </MarketingShell>
    </>
  )
}

export function ResourcesPage() {
  const [query, setQuery] = useState('')
  const deferredQuery = useDeferredValue(query)
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-resources')

  const filteredCollections = useMemo(() => filterResourceCollections(deferredQuery), [deferredQuery])

  return (
    <>
      <SiteMetadata
        title="HyperTwist resources"
        description="Browse HyperTwist resources for release notes, documentation, onboarding, controls, and higher-dimensional product guidance."
        canonicalPath="/resources"
      />
      <MarketingShell
        eyebrow="Public resources"
        title="Every guide you need to start, train, and grow with HyperTwist."
        lede="This resource library brings together product guides, onboarding help, release references, higher-dimensional study material, and the practical routes that carry a new player or a whole team from curiosity into real use."
      >
        <ResourcesFinderSection
          query={query}
          filteredCollections={filteredCollections}
          onQueryChange={setQuery}
        />

        <ResourcesDirectRoutesSection />

        <PublicManualRouteAtlasSection
          description="The resource portal gets much more useful when it also explains what each public page is for, so teams can move from reading into the exact route that owns the next question."
        />

        <DownloadableOperatorManualSection
          description="Resources now also expose the downloadable manual directly so teams can carry one offline guide beside the richer live route atlas."
        />

        <SurfaceChoiceGuideSection description="The resource portal is most useful when it also tells people where to go next: stay public for references, move signed-in for release access, and move native for simulator execution." />

        <BrowserDesktopRealitySection />

        <SupportTopicDirectorySection
          title="Support topic quick routes"
          description="These topic cards bridge the public resource portal into concrete help paths without making people guess which part of the product owns the next step."
          topics={supportTopicDirectory}
        />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Resources are stronger when they do not stop at explanation: this guide says plainly whether the next move is the desktop download, pricing, account access, or release details."
        />

        <ResourcesOperatorPlaybooksSection />

        <StepCardSection
          title="Practical software workflows"
          description="These cards focus on how the actual software is used today once the website has already done its access job."
          cards={desktopWorkflowTracks}
        />

        <SimulatorManualSection
          title="Simulator use today"
          description="This summary is deliberately practical: what you actually do in the desktop runtime once browser identity and release access are already resolved."
        />

        <BulletCardSection
          title="Advanced companion systems"
          description="The resources portal should also surface the live speech, provider, and continuity families that surround the simulator, so teams do not mistake them for hidden internal-only work."
          cards={advancedOperatorAdjunctTracks}
        />

        <BulletCardSection
          title="Puzzle families and training lanes"
          description="Resources should also expose the actual study surfaces the downloadable already owns instead of only the broader manual taxonomy."
          cards={puzzleCatalogCards}
        />

        <HigherDimensionalRuntimeGuideSection
          title="Higher-dimensional runtime guide"
          description="These public-safe cards explain which higher-dimensional family lanes are already real and what runtime host each one uses."
        />

        <InputAndDevicePostureSection
          title="Current control and device state"
          description="This keeps public resources honest about what input/runtime ownership is already strong and what remains in the later packaged headset/controller validation track."
        />

        <ControlProfileRosterSection
          title="Selectable control and settings roster"
          description="This keeps the public resources lane concrete about the shipped keyboard profile, scenic presets, family selectors, and current persistence boundary."
        />

        <RuntimeControlGuideSection
          title="Runtime control guide"
          description="This public-safe guide focuses on how operators and trainees actually drive the current desktop runtime today."
        />

        <ResourcesDeploymentSnapshotSection />

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/app', label: 'Open dashboard' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The resources portal is stronger when docs, release notes, source links, legal pages, and support contact remain visible as part of the same reference bundle."
        />
      </MarketingShell>
    </>
  )
}

function GettingStartedPageContent({
  releaseManifest,
  windowsValidationPlatform,
}: Pick<ReturnType<typeof usePublicReleaseManifestView>, 'releaseManifest' | 'windowsValidationPlatform'>) {
  return (
    <>
      <OperatorDesktopQuickstartSection
        title="The first serious HyperTwist session"
        description="This quickstart stays faithful to the current product shape: browser first for identity and release access, desktop first for the actual simulator."
      />

      <StepCardSection
        title="Operator path"
        description="These are the current working stages from public discovery through signed-in access and into the native simulator."
        cards={operatorManualTracks}
      />

      <StepCardSection
        title="Practical desktop workflows after first launch"
        description="Once access and pairing are done, these are the concrete software workflows HyperTwist already supports in the native runtime."
        cards={desktopWorkflowTracks}
      />

      <DownloadableOperatorManualSection
        description="The onboarding route now also ships an offline manual reference so the first-session path, control truth, and browser-to-desktop split can travel with the desktop install."
      />

      <BrowserAuthMethodsSection
        description="The onboarding path is easier to trust when the shared-auth provider lineup is visible before people cross into the signed-in account area."
      />

      <Section
        title="First launch and desktop setup"
        description="These are the concrete checks that should happen immediately after the package is in hand."
      >
        <div className="card-grid">
          {desktopFirstLaunchCards.map((card) => (
            <article key={card.title} className="card">
              <h3>{card.title}</h3>
              <p>{card.description}</p>
              <ul className="list top-gap">
                {card.bullets.map((bullet) => (
                  <li key={bullet}>{bullet}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </Section>

      <BulletCardSection
        title="First-session verification checklist"
        description="This keeps the onboarding route operationally stronger by showing the exact checks that should happen before a new install is treated as a trustworthy training runtime."
        cards={firstSessionVerificationCards}
      />

      <BrowserDesktopRealitySection />

      <SimulatorManualSection
        title="Simulator use today"
        description="This keeps onboarding anchored to the lanes that actually execute in the current native runtime."
      />

      <HigherDimensionalRuntimeGuideSection
        title="Higher-dimensional family guide"
        description="The onboarding route is stronger when it also teaches which higher-dimensional lanes already exist and what host/runtime model each one uses."
      />

      <InputAndDevicePostureSection
        title="Current control and device truth"
        description="This is the practical runtime boundary that first-session onboarding should teach directly instead of leaving as a later surprise."
      />

      <ControlProfileRosterSection
        title="Selectable control and settings roster"
        description="The current desktop runtime already has real profile and settings ownership, but it stays narrower than a finished XR/controller/preferences suite."
      />

      <RuntimeControlGuideSection
        title="Runtime control guide"
        description="This onboarding route should also show practical desktop controls so people do not have to leave the canonical first-session page just to find the real input and diagnostics guidance."
      />

      <SurfaceChoiceGuideSection description="Onboarding is smoother when the right next surface is explicit too: public for orientation, protected for entitled access, and desktop for simulator execution." />

      <PublicReleaseDecisionGuideSection
        releaseManifest={releaseManifest}
        description="This onboarding lane should also tell people whether the next move is the desktop download, pricing, account access, or the release details around it."
      />

      <PublicPackagedDesktopProofSection
        platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/app', label: 'Open dashboard' },
          ]}
        />

      <SupportTopicDirectorySection
        title="Need help on the way in?"
        description="Use these quick routes when the next onboarding step turns into a launch, access, or release issue."
        topics={supportTopicDirectory}
      />

      <ReleaseAuthorityBundleSection
        releaseManifest={releaseManifest}
        description="A professional onboarding page should keep docs, release notes, source links, legal pages, and support visible as part of the same release story."
      />
    </>
  )
}

export function GettingStartedPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-getting-started')

  return (
    <>
      <SiteMetadata
        title="Getting started with HyperTwist"
        description="Follow the real first-session path in HyperTwist: browser account access, signed-in release access, desktop pairing, first launch, and current simulator boundary truth."
        canonicalPath="/getting-started"
      />
      <MarketingShell
        eyebrow="Getting started"
        title="Start on the website. Train in the desktop app."
        lede="This page gives you the cleanest path into HyperTwist: get access, pair your install, verify the first session, and understand exactly what is ready today."
      >
        <GettingStartedPageContent
          releaseManifest={releaseManifest}
          windowsValidationPlatform={windowsValidationPlatform}
        />
      </MarketingShell>
    </>
  )
}

export function DocsPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-docs')

  return (
    <>
      <SiteMetadata
        title="HyperTwist documentation"
        description="Open the HyperTwist public documentation lane for feature-backed product truth, honest capability boundaries, and distribution guidance."
        canonicalPath="/docs"
      />
      <MarketingShell
        eyebrow="Documentation"
        title="The complete HyperTwist manual."
        lede="This manual covers what HyperTwist does today, how the website and desktop app work together, how the controls behave, and how to move from first launch into real training."
      >
        <PrincipleCardSection title="Documentation principles" cards={publicDocumentationPrinciples} />

        <Section
          title="Manual entry points"
          description="These entry points help you choose the right reading depth quickly, whether you need a quick answer or a deeper manual pass."
        >
          <div className="feature-band">
            <Link to="/browser" className="feature-band__card feature-band__card--link">
              <MonitorCog size={22} />
              <h3>Browser guide</h3>
              <p>Open the public explanation of the website companion, account dashboard, and desktop app.</p>
            </Link>
            <Link to="/help" className="feature-band__card feature-band__card--link">
              <BookOpenText size={22} />
              <h3>Help center</h3>
              <p>Open the practical troubleshooting and onboarding lane when the next job is not full manual study.</p>
            </Link>
            <Link to="/contact" className="feature-band__card feature-band__card--link">
              <ExternalLink size={22} />
              <h3>Contact</h3>
              <p>Open the direct human contact route when the next best move is escalation instead of more reading.</p>
            </Link>
          </div>
        </Section>

        <PublicManualRouteAtlasSection
          title="Documentation and route atlas"
          description="The manual is easier to use when it also says which public route owns which question, so people do not have to infer structure from navigation labels alone."
        />

        <DownloadableOperatorManualSection
          description="The docs page now also provides a same-origin offline manual asset for people who want the current route atlas, first-session flow, and control boundary in one downloadable reference."
        />

        <BulletCardSection
          title="Current shipped capability"
          description="This section is the public manual's feature-registry-backed answer to the obvious question: what is actually live in HyperTwist today?"
          cards={featureAtlasCurrentTracks}
        />

        <BulletCardSection
          title="Advanced companion and continuity systems"
          description="The public manual is more truthful when it also surfaces the already-live speech, provider, and continuity families that support deeper work around the simulator."
          cards={advancedOperatorAdjunctTracks}
        />

        <StepCardSection
          title="How HyperTwist is actually used"
          description="This is the public-facing manual for how HyperTwist is actually used today: website first for access and release updates, desktop first for the simulator."
          cards={operatorManualTracks}
        />

        <StepCardSection
          title="Core software workflows"
          description="This is the practical use manual for the actual software once access is resolved and the desktop runtime is in hand."
          cards={desktopWorkflowTracks}
        />

        <BulletCardSection
          title="Operational verification checklist"
          description="The public manual is more useful when it also shows how to verify a fresh install and a serious training session before operators widen into rollout or support work."
          cards={firstSessionVerificationCards}
        />

        <OperatorDesktopQuickstartSection />

        <BrowserAuthMethodsSection
          description="The public manual now makes the current sign-in lineup explicit too, so people do not have to infer provider support only from the sign-in form buttons."
        />

        <StepCardSection
          title="Recovery and degraded-state manual"
          description="This manual section explains how to move through auth or release-service interruptions without confusing recovery guidance for live production authority."
          cards={degradedStateRecoveryTracks}
        />

        <BulletCardSection
          title="Issue reporting checklist"
          description="This is the public-safe reporting packet for account, release, app, and launch issues so support receives higher-signal reports."
          cards={issueReportingChecklistCards}
        />

        <SupportTopicDirectorySection
          title="Support topic quick routes"
          description="These are the public docs entry points for the concrete help paths HyperTwist already recognizes: launch readiness, account access, and team rollout."
          topics={supportTopicDirectory}
        />

        <Section
          title="Where each part of HyperTwist lives"
          description="This is the quickest way to understand which part of HyperTwist owns what today, including the difference between the public website and the in-app web tools that ship with the desktop runtime."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

        <BrowserDesktopRealitySection />

        <Section
          title="When to use browser versus desktop"
          description="The public manual is more useful when it says plainly which jobs stay on the web and which ones stay inside the native runtime."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <SurfaceChoiceGuideSection description="This keeps the public manual from stopping at architecture explanation alone: the next surface choice is explicit as well." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The public manual should not only explain the surface split. It should also tell people whether the next move is pricing, account access, the desktop download, or the release details around it."
        />

        <SimulatorManualSection />

        <HigherDimensionalRuntimeGuideSection />

        <StepOnlyCardSection
          title="Deployment readiness manual"
          description="This is the public-safe checklist for moving from account-gated early access to a broader rollout."
          cards={deploymentReadinessTracks}
        />

        <InputAndDevicePostureSection />

        <ControlProfileRosterSection />

        <RuntimeControlGuideSection />

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/changelog', label: 'Review release notes' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The public manual stays more useful when it ends with the same docs, release notes, source links, legal pages, and support bundle teams need in real use."
        />

        <FaqCardSection
          title="Common questions"
          description="These answers keep the public manual direct about the current website companion, desktop runtime, and bounded XR/settings truth."
          cards={supportFaqs}
        />

        {releaseManifest.public_docs_url ? (
          <Section title="External docs portal">
            <HyperTwistButtonAnchor href={releaseManifest.public_docs_url} target="_blank" rel="noreferrer">
              Open public docs portal
            </HyperTwistButtonAnchor>
          </Section>
        ) : null}
      </MarketingShell>
    </>
  )
}

export function SupportPage() {
  const [searchParams] = useSearchParams()
  const supportTopic = searchParams.get('topic')
  const selectedSupportTopicKey = supportTopic && supportTopicGuidance[supportTopic] ? supportTopic : null
  const selectedSupportTopic = selectedSupportTopicKey ? supportTopicGuidance[selectedSupportTopicKey] : null
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-support')

  return (
    <>
      <SiteMetadata
        title="HyperTwist support"
        description="Get help with HyperTwist setup, desktop downloads, pricing, legal readiness, and website-to-desktop account access."
        canonicalPath="/support"
      />
      <MarketingShell
        eyebrow="Support"
        title="Help for access, downloads, setup, and launch."
        lede="Support is focused on getting people unstuck without flattening the product: website and release issues stay website-side, simulator issues stay attached to the desktop app, and launch questions stay distinct from both."
      >
        {selectedSupportTopic ? (
          <Section title="Selected help topic">
            <article className="callout">
              <p className="status-pill status-pill--info">{selectedSupportTopic.title}</p>
              <p>{selectedSupportTopic.description}</p>
            </article>
          </Section>
        ) : null}

        {selectedSupportTopicKey ? (
          <SupportTopicDirectorySection
            title="Selected topic next steps"
            description="This is the concrete recovery and routing shape for the currently selected support topic."
            topics={supportTopicDirectory.filter((topic) => topic.topicKey === selectedSupportTopicKey)}
            selectedTopicKey={selectedSupportTopicKey}
          />
        ) : null}

        <Section
          title="Current release and package state"
          description="Support gets easier when current launch-readiness truth and current packaged desktop proof remain visible beside the help lanes themselves."
        >
          <PublicLaunchStatus title="Current support-facing launch access" />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/changelog', label: 'Review release notes' },
          ]}
        />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Support is faster when the current next move is explicit too: pricing, downloads, account follow-through, and release details all stay separated here."
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Support conversations move faster when docs, release notes, source, notices, and contact stay visible beside the launch and build evidence."
        />

        <BrowserAuthMethodsSection
          title="Current browser sign-in methods"
          description="Support and recovery lanes are easier to navigate when the actual shared-auth method lineup is visible next to the launch, package, and help surfaces."
        />

        <Section title="Contact">
          <article className="card">
            <p>
              Email <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> for account activation,
              release enablement, pricing configuration, or deployment help.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonLink to="/help" tone="ghost">
                Open help center
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/contact">
                Open contact route
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>

        <Section title="Frequently asked questions">
          <div className="card-grid">
            {supportFaqs.map((faq) => (
              <article className="card" key={faq.question}>
                <h3>{faq.question}</h3>
                <p>{faq.answer}</p>
              </article>
            ))}
          </div>
        </Section>

        <SurfaceChoiceGuideSection description="Most support confusion disappears once people pick the right surface first: public for guidance, signed-in for account-aware release work, desktop for simulator execution." />

        <BrowserDesktopRealitySection />

        <Section
          title="Browser and desktop responsibilities"
          description="This keeps support conversations anchored to the real live surfaces so people know whether they need public guidance, signed-in account access, or desktop-app follow-through."
        >
          <DeliverySurfaceResponsibilitiesGrid limit={3} />
        </Section>

        <Section
          title="Support lanes"
          description="Support works best when people know whether they need public guidance, signed-in website access, or native desktop follow-through."
        >
          <div className="card-grid">
            {operatorPlaybooks.map((playbook) => (
              <article key={playbook.title} className="card">
                <h3>{playbook.title}</h3>
                <ul className="list top-gap">
                  {playbook.steps.map((step) => (
                    <li key={step}>{step}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <BulletCardSection
          title="Issue reporting checklist"
          description="These reporting prompts keep support requests concrete and route-aware so launch, account, package, and runtime issues do not blur together."
          cards={issueReportingChecklistCards}
        />

        <SupportTopicDirectorySection
          title="Support topic quick routes"
          description="Use these cards when the issue already has a clear help path and you want the shortest route through public, signed-in, and release-safe surfaces."
          topics={supportTopicDirectory}
          selectedTopicKey={selectedSupportTopicKey}
        />

        <StepCardSection
          title="Recovery and degraded-state guidance"
          description="This keeps support answers aligned with the now-explicit auth and release recovery model in the product itself."
          cards={degradedStateRecoveryTracks}
        />

        <Section
          title="Digital delivery workflow"
          description="Support can move faster when the website and installed desktop app are described as one continuous delivery experience."
        >
          <div className="card-grid">
            {digitalDeliveryCards.map((card) => (
              <article key={card.title} className="card">
                <h3>{card.title}</h3>
                <p>{card.description}</p>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="Privacy and compliance boundary"
          description="Support and launch guidance should stay clear about what belongs to browser identity, what belongs to the desktop runtime, and what remains legal/compliance follow-through."
        >
          <div className="card-grid">
            {privacyBoundaryCards.map((card) => (
              <article key={card.title} className="card">
                <h3>{card.title}</h3>
                <p>{card.description}</p>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="Escalation map"
          description="This keeps support conversations concrete by separating account, package, runtime, and launch/compliance problems instead of flattening them together."
        >
          <div className="card-grid">
            {supportEscalationCards.map((card) => (
              <article key={card.title} className="card">
                <h3>{card.title}</h3>
                <p>{card.description}</p>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>
      </MarketingShell>
    </>
  )
}

export function ChangelogPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-changelog')

  return (
    <>
      <SiteMetadata
        title="HyperTwist release notes"
        description="Review recent public-facing HyperTwist changes across website access, desktop improvements, packaging, and release readiness."
        canonicalPath="/changelog"
      />
      <MarketingShell
        eyebrow="Release notes"
        title="Release notes for players, teams, and studios."
        lede="This page combines grouped release stories with the chronological feed so you can see what changed on the website, what changed in the desktop app, and what changed in release delivery without digging through internal notes."
      >
        <Section
          title="Recent release packets"
          description="These grouped cards are the higher-signal public version of the release story: what changed, where it changed, and why it matters."
        >
          <div className="timeline">
            {releasePacketCards.map((entry) => (
              <article key={`${entry.date}-${entry.version}`} className="timeline-entry">
                <p className="timeline-entry__date">{entry.date}</p>
                <p className="status-pill status-pill--info">{entry.category}</p>
                <h3>{entry.version}</h3>
                <ul className="list top-gap">
                  {entry.notes.map((note) => (
                    <li key={note}>{note}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="Detailed chronological feed"
          description="The detailed feed keeps the finer-grained public history visible once you want the full story behind the latest updates."
      >
          <div className="timeline">
            {changelogEntries.map((entry) => (
              <article key={`${entry.date}-${entry.title}`} className="timeline-entry">
                <p className="timeline-entry__date">{entry.date}</p>
                <h3>{entry.title}</h3>
                <p>{entry.details}</p>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="How to read the release feed"
          description="HyperTwist release notes stay useful when they distinguish desktop-app work, website work, and distribution follow-through instead of collapsing everything together."
        >
          <div className="card-grid">
            {releaseStoryCards.map((card) => (
              <article key={card.title} className="card">
                <h3>{card.title}</h3>
                <p>{card.description}</p>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <SurfaceChoiceGuideSection description="Release notes are easier to use when the next surface is explicit too: public for change context, signed-in access for account-aware release details, and desktop for the actual runtime under discussion." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Release notes become more actionable when they also say whether the next move is the desktop download, pricing, account continuity, or the release details around it."
        />

        <Section
          title="Release rollout checklist"
          description="Use the public release notes as a real rollout tool, not just a chronology. This keeps each change tied to build proof, account access, and distribution follow-through."
        >
          <div className="card-grid">
            {releaseRolloutChecklist.map((card) => (
              <article key={card.title} className="card">
                <h3>{card.title}</h3>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/docs', label: 'Open public manual' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Release notes are operationally stronger when the feed also carries the same docs, source, notices, and support references needed to act on a change safely."
        />

        {releaseManifest.release_notes_url ? (
          <Section title="External release notes">
            <HyperTwistButtonAnchor href={releaseManifest.release_notes_url} target="_blank" rel="noreferrer" tone="ghost">
              Open release feed
            </HyperTwistButtonAnchor>
          </Section>
        ) : null}
      </MarketingShell>
    </>
  )
}
