import { useMemo } from 'react'
import { Link } from 'react-router-dom'
import { MarketingShell } from '../components/layout/MarketingShell'
import { SiteMetadata } from '../components/seo/SiteMetadata'
import { HyperTwistButtonLink } from '../components/ui/HyperTwistButton'
import { OperationalStatusCallout } from '../components/ui/OperationalStatusCallout'
import { ProductSurfaceMatrix } from '../components/ui/ProductSurfaceMatrix'
import { PublicLaunchStatus } from '../components/ui/PublicLaunchStatus'
import { ReleaseValidationSummary } from '../components/ui/ReleaseValidationSummary'
import { brandConfig, paddleReadyDescription } from '../site-config'
import { buildReleaseMetadataItems, resolveReleaseCommerceView } from '../release-manifest'
import type { ReleaseManifestPlatformView } from '../release-manifest'
import { buildLoginPath, buildProtectedDownloadPath, buildSupportPath } from '../site-routes'
import {
  browserLimitCards,
  desktopFirstLaunchCards,
  desktopDownloadSteps,
  desktopReleaseSignals,
  digitalDeliveryCards,
  distributionDoctrineCards,
  firstSessionVerificationCards,
  inputAndDevicePostureCards,
  openSourceNotices,
  operatorManualTracks,
  privacyBoundaryCards,
  productSurfaceMatrixRows,
  puzzleCatalogCards,
  releaseRolloutChecklist,
  runtimeControlGuideCards,
  supportEscalationCards,
  termsBoundaryCards,
} from '../site-data'
import {
  BulletCardSection,
  BrowserAuthMethodsSection,
  BrowserDesktopRealitySection,
  DeliverySurfaceResponsibilitiesGrid,
  DownloadableOperatorManualSection,
  explorerFallbackPlan,
  HigherDimensionalRuntimeGuideSection,
  OperatorDesktopQuickstartSection,
  operatorFallbackPlan,
  PlanActionLink,
  PublicPackagedDesktopProofSection,
  PublicManualRouteAtlasSection,
  PublicReleaseDecisionGuideSection,
  ReleaseAuthorityBundleSection,
  releaseCommerceFallback,
  Section,
  SimulatorManualSection,
  StepCardSection,
  studioFallbackPlan,
  SurfaceChoiceGuideSection,
  usePublicReleaseManifestView,
} from './public-page-helpers'

export function PricingPage() {
  const { releaseManifestQuery, releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-pricing')
  const releaseCommerce = useMemo(
    () => resolveReleaseCommerceView(releaseManifestQuery.data?.manifest, releaseCommerceFallback),
    [releaseManifestQuery.data?.manifest],
  )
  const runtimePlanCatalog = useMemo(() => ([
    explorerFallbackPlan,
    {
      ...operatorFallbackPlan,
      price: releaseCommerce.plan_price_operator,
      ctaLabel: releaseCommerce.operator_checkout_url ? 'Open Paddle checkout' : operatorFallbackPlan.ctaLabel,
      ctaHref: releaseCommerce.operator_checkout_url || operatorFallbackPlan.ctaHref,
    },
    {
      ...studioFallbackPlan,
      price: releaseCommerce.plan_price_studio,
      ctaLabel: releaseCommerce.studio_checkout_url ? 'Open Paddle checkout' : studioFallbackPlan.ctaLabel,
      ctaHref: releaseCommerce.studio_checkout_url || studioFallbackPlan.ctaHref,
    },
  ]), [releaseCommerce])

  return (
    <>
      <SiteMetadata
        title="HyperTwist pricing"
        description="View HyperTwist pricing for individuals and studios with account-backed downloads, Paddle-ready checkout, and clear desktop delivery guidance."
        canonicalPath="/pricing"
      />
      <MarketingShell
        eyebrow="Paddle-ready plans"
        title="Pricing that matches the actual delivery model."
        lede="Choose a plan, unlock your account, and move into the full desktop simulator. Billing lives on the website so downloads, subscriptions, and support stay simple while the desktop app stays focused on training."
      >
        <Section title="Plan lineup" description={paddleReadyDescription}>
          <div className="card-grid card-grid--pricing">
            {runtimePlanCatalog.map((plan) => (
              <article key={plan.key} className="card card--pricing">
                <p className="status-pill">{plan.name}</p>
                <h3>{plan.price}</h3>
                <p>{plan.notes}</p>
                <ul className="list">
                  {plan.features.map((feature) => (
                    <li key={feature}>{feature}</li>
                  ))}
                </ul>
                <PlanActionLink href={plan.ctaHref} label={plan.ctaLabel} />
              </article>
            ))}
          </div>
        </Section>

        <BulletCardSection
          title="Why accounts live on the website while training lives in the desktop app"
          description="Pricing should explain the product clearly instead of making buyers infer it from scattered support notes."
          cards={browserLimitCards}
        />

        <Section title="Launch access status">
          <PublicLaunchStatus />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/open-source-notices', label: 'Review notices' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Pricing is part of the real delivery path, so it should carry the same docs, release notes, source links, and support bundle as the rest of the public site."
        />

        <BrowserAuthMethodsSection
          description="Pricing decisions are easier to trust when the current sign-in options are visible before checkout, desktop access, or account follow-through."
        />

        <StepCardSection
          title="What happens after access is granted"
          description="Pricing only stays professional when it explains the real path from account access into the desktop simulator instead of stopping at the checkout button."
          cards={operatorManualTracks.slice(0, 3)}
        />

        <SimulatorManualSection
          title="What the software actually does after access is granted"
          description="Plans only make sense if the public pricing lane also says what the entitled desktop software is for once it is installed."
        />

        <BulletCardSection
          title="What those plans unlock in practice"
          description="Pricing gets stronger when it points at the concrete experiences the desktop app already owns."
          cards={puzzleCatalogCards}
        />

        <HigherDimensionalRuntimeGuideSection
          title="Higher-dimensional families behind the plans"
          description="This keeps commercial copy tied to the real runtime families the desktop product already owns instead of leaving serious capability buried elsewhere in the manual."
        />

        <BulletCardSection
          title="Current input and runtime control truth"
          description="The pricing page should also be explicit about current controls so buyers can see what is ready today and what still needs more device validation."
          cards={[...inputAndDevicePostureCards, ...runtimeControlGuideCards]}
        />

        <SurfaceChoiceGuideSection description="This keeps pricing honest about what should happen next: stay public for plan comparison, move protected for account-aware access, and move native for the actual simulator." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Pricing should also say plainly whether the next best move is checkout, the desktop download, account continuity, or the release details around it."
        />

        <BrowserDesktopRealitySection />

        <Section
          title="Why plans live on the website while training stays native"
          description="Accounts, billing, and release status belong on the website so the simulator can stay focused on training quality."
        >
          <DeliverySurfaceResponsibilitiesGrid limit={3} />
        </Section>

        <BulletCardSection
          title="Commercial distribution doctrine"
          description="Commercial pages should stay as explicit about release and legal details as the rest of the public site."
          cards={distributionDoctrineCards}
        />

        <BulletCardSection
          title="Terms of access in practice"
          description="Pricing is easier to trust when the access model, simulator boundary, and buyer obligations stay visible before checkout."
          cards={termsBoundaryCards}
        />

        <Section title="Important launch note">
          <article className="callout">
            <p>
              Public pricing, checkout, and download pages are part of the real product delivery story. That is why HyperTwist keeps release notes,
              notices, and source links close to the buying path whenever a desktop build includes open-source obligations.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonLink to="/browser" tone="ghost">
                Open browser guide
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/help" tone="ghost">
                Open help center
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/contact">
                Contact HyperTwist
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>
      </MarketingShell>
    </>
  )
}

function ReleaseManifestStatusSections({
  isLoading,
  isError,
}: {
  isLoading: boolean
  isError: boolean
}) {
  return (
    <>
      {isLoading ? (
        <Section title="Release manifest status">
          <article className="callout">
            <p>Loading the current server-backed release manifest. Static target guidance remains visible until live release authority arrives.</p>
          </article>
        </Section>
      ) : null}

      {isError ? (
        <Section title="Release manifest status">
          <OperationalStatusCallout
            badge="Release service recovery"
            title="The live release manifest could not be loaded from the auth server right now."
            summary="This page is showing bounded static target guidance instead of current runtime release authority, and direct package delivery stays intentionally withheld until that authority returns."
            sections={[
              {
                title: 'What still works',
                items: [
                  'Supported targets, packaged proof, and public release guidance remain visible.',
                  'Platform selection can still be preserved into the protected sign-in and download handoff.',
                ],
              },
              {
                title: 'What stays intentionally withheld',
                items: [
                  'Raw desktop delivery URLs remain behind the protected release lane.',
                  'This public page does not claim live entitled release authority while the auth server is unavailable.',
                ],
              },
              {
                title: 'Recommended recovery order',
                items: [
                  'Use the signed-in dashboard once the auth server recovers if you need actual package delivery.',
                  'Open support if release-authority recovery persists during purchase or release work.',
                ],
              },
            ]}
            actions={[
              { label: 'Open protected download center', to: buildProtectedDownloadPath('windows') },
              { label: 'Open support', to: buildSupportPath('operator-access') },
            ]}
          />
        </Section>
      ) : null}
    </>
  )
}

function AvailableTargetsSection({ platforms }: { platforms: readonly ReleaseManifestPlatformView[] }) {
  return (
    <Section title="Available targets">
      <div className="card-grid">
        {platforms.map((platform) => {
          const metadataItems = buildReleaseMetadataItems(platform)
          return (
            <article key={platform.platform_key} className="card">
              <h3>{platform.platform}</h3>
              <p className="status-pill">{platform.subtitle}</p>
              <p>{platform.details}</p>
              {metadataItems.length > 0 ? (
                <ul className="list top-gap">
                  {metadataItems.map((item) => (
                    <li key={`${platform.platform_key}-${item.label}`}>
                      {item.label}: {item.value}
                    </li>
                  ))}
                </ul>
              ) : null}
              <ReleaseValidationSummary platform={platform} />
              {platform.configured ? (
                <HyperTwistButtonLink className="button--full" to={buildProtectedDownloadPath(platform.platform_key)}>
                  Sign in for {platform.platform} access
                </HyperTwistButtonLink>
              ) : (
                <div className="button button--ghost button--full is-disabled" aria-disabled="true">
                  Release access opens after account approval
                </div>
              )}
            </article>
          )
        })}
      </div>
    </Section>
  )
}

export function DownloadPage() {
  const { releaseManifestQuery, releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-download')

  return (
    <>
      <SiteMetadata
        title="Download HyperTwist desktop"
        description="Download the HyperTwist desktop build, preserve your target platform into the signed-in release path, and pair the installed app with your browser account."
        canonicalPath="/download"
      />
      <MarketingShell
        eyebrow="Desktop distribution"
        title="Download the desktop build and pair it with your browser account."
        lede="The website provides account, release, and legal surfaces. The actual simulator ships through the desktop app, with package validation and release discipline carried into every signed-in download."
      >
        <ReleaseManifestStatusSections
          isLoading={releaseManifestQuery.isLoading}
          isError={releaseManifestQuery.isError}
        />

        <AvailableTargetsSection platforms={releaseManifest.platforms} />

        <Section title="How the release lane works">
          <div className="card-grid">
            {desktopDownloadSteps.map((step, index) => (
              <article key={step} className="card card--compact">
                <p className="status-pill">{index + 1}</p>
                <p>{step}</p>
              </article>
            ))}
          </div>
        </Section>

        <Section
          title="Need the web-version explanation before you install?"
          description="The download page should still link back to the public routes that explain what the website is for and how the signed-in handoff works."
        >
          <div className="feature-band">
            <Link to="/browser" className="feature-band__card feature-band__card--link">
              <h3>Browser guide</h3>
              <p>Read what the web experience is for, what it does well, and where the desktop app goes deeper.</p>
            </Link>
            <Link to="/help" className="feature-band__card feature-band__card--link">
              <h3>Help center</h3>
              <p>Open practical onboarding, controls, and troubleshooting guidance before or after the first install.</p>
            </Link>
            <Link to="/contact" className="feature-band__card feature-band__card--link">
              <h3>Contact</h3>
              <p>Open the human contact lane when the next move is support, team coordination, or pricing follow-through.</p>
            </Link>
          </div>
        </Section>

        <SimulatorManualSection
          title="What the installed runtime already owns"
          description="The download page is stronger when it also explains the real software experience you receive after the package handoff."
        />

        <HigherDimensionalRuntimeGuideSection
          title="Higher-dimensional family guide"
          description="This keeps the download lane concrete about which serious family runtimes are already real and what host model each one currently uses."
        />

        <BulletCardSection
          title="Current input and runtime control truth"
          description="The download lane should also teach the real control boundary before the first session starts, including what is strong now and what remains in later device validation."
          cards={[...inputAndDevicePostureCards, ...runtimeControlGuideCards]}
        />

        <BrowserDesktopRealitySection />

        <SurfaceChoiceGuideSection description="Download guidance is clearer when the current best surface is explicit: public for target and release context, protected for entitlement, and desktop for the real training runtime." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The download page should also say whether the next best move is the desktop download, pricing, account continuity, or the release details around it."
        />

        <BrowserAuthMethodsSection
          description="Download guidance is clearer when the current sign-in options are visible before you cross into protected access and package delivery."
        />

        <BulletCardSection
          title="First launch and desktop setup"
          description="This keeps the download page useful after the archive is in hand: what to verify, how to pair the app, and which current runtime lanes matter first."
          cards={desktopFirstLaunchCards}
        />

        <BulletCardSection
          title="First-session verification checklist"
          description="The download lane is stronger when it also tells you exactly what to confirm before treating a fresh install as a trustworthy training runtime."
          cards={firstSessionVerificationCards}
        />

        <DownloadableOperatorManualSection
          description="The download lane now also includes a same-origin offline manual so the first-session path, current controls, higher-dimensional runtime guide, and release boundary can be carried alongside the desktop build."
        />

        <OperatorDesktopQuickstartSection title="First desktop session after install" />

        <Section title="Release access state">
          <PublicLaunchStatus title="Desktop release access stays launch-honest" />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/changelog', label: 'Review release notes' },
            { to: '/open-source-notices', label: 'Review notices' },
          ]}
        />

        <BulletCardSection
          title="Digital delivery workflow"
          description="The download page should explain the real delivery sequence from platform selection to protected entitlement and first desktop launch."
          cards={digitalDeliveryCards}
        />

        <Section
          title="Browser and desktop responsibilities"
          description="The release lane is easier to trust when the site explains why some actions stay public, some stay protected, and the simulator itself stays native."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <BulletCardSection
          title="Distribution doctrine"
          description="Download guidance should stay tied to package proof, notices, and the desktop-first simulator boundary."
          cards={distributionDoctrineCards}
        />

        <Section title="Release integrity and documentation">
          <div className="card-grid">
            {desktopReleaseSignals.map((signal) => (
              <article key={signal.title} className="card">
                <h3>{signal.title}</h3>
                <p>{signal.description}</p>
              </article>
            ))}
          </div>
        </Section>

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Download guidance is more trustworthy when docs, release notes, corresponding source, notices, and support remain visible as one coherent release bundle."
        />

        <Section title="Why this page does not expose raw download URLs">
          <article className="callout">
            <p>
              HyperTwist treats desktop distribution as an account-gated release surface.
              Public pages can describe supported targets and release status, but the actual
              download links live behind the signed-in dashboard where plan and entitlement
              state are resolved.
            </p>
            <HyperTwistButtonLink to={buildProtectedDownloadPath('windows')} tone="ghost">
              Open protected download center
            </HyperTwistButtonLink>
          </article>
        </Section>

        <Section title="Pair the desktop app with your browser account">
          <article className="callout">
            <p>
              After sign-in, open the dashboard to generate a desktop-link token.
              That token is designed to hand browser identity and plan status over to the local desktop app without exposing your password.
            </p>
            <HyperTwistButtonLink to={buildLoginPath('/app')} tone="ghost">
              Open dashboard
            </HyperTwistButtonLink>
          </article>
        </Section>
      </MarketingShell>
    </>
  )
}

export function OpenSourceNoticesPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView(
    'public-open-source-notices',
  )

  return (
    <>
      <SiteMetadata
        title="HyperTwist open-source notices"
        description="Review HyperTwist public open-source notices and corresponding-source guidance for downloadable distribution surfaces."
        canonicalPath="/open-source-notices"
      />
      <MarketingShell
        eyebrow="Legal and notices"
        title="Open-source notices for public distribution surfaces."
        lede="HyperTwist pricing, checkout, release, and download pages keep legal and corresponding-source guidance visible whenever a shipped build requires it."
      >
        <Section title="Key components">
          <div className="card-grid">
            {openSourceNotices.map((item) => (
              <article className="card" key={item.component}>
                <h3>{item.component}</h3>
                <p className="status-pill">{item.license}</p>
                <p>{item.whyItMatters}</p>
              </article>
            ))}
          </div>
        </Section>

        <Section title="Corresponding source">
          <div className="card">
            <p>
              MPL-covered shipped builds need a stable corresponding-source location for the exact distributed material.
            </p>
            <ul className="list">
              <li>
                Public corresponding-source URL:{' '}
                {releaseManifest.corresponding_source_url ? (
                  <a href={releaseManifest.corresponding_source_url} target="_blank" rel="noreferrer">{releaseManifest.corresponding_source_url}</a>
                ) : (
                  'configure the public corresponding-source URL before external launch'
                )}
              </li>
              <li>
                Public repository / notices reference:{' '}
                {releaseManifest.open_source_repo_url ? (
                  <a href={releaseManifest.open_source_repo_url} target="_blank" rel="noreferrer">{releaseManifest.open_source_repo_url}</a>
                ) : (
                  'configure the public repository/notices URL before external launch'
                )}
              </li>
            </ul>
            <p>
              Official MPL 2.0 license text:{' '}
              <a href="https://www.mozilla.org/en-US/MPL/2.0/" target="_blank" rel="noreferrer">
                https://www.mozilla.org/en-US/MPL/2.0/
              </a>
            </p>
          </div>
        </Section>

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          title="Release and source references"
          description="The notices page is stronger when corresponding source, release notes, docs, repo/notices references, and support escalation stay visible together instead of being scattered across separate public pages."
        />

        <Section title="Distribution readiness">
          <PublicLaunchStatus title="Notices and corresponding-source readiness" />
        </Section>

        <SurfaceChoiceGuideSection description="Legal pages are more useful when they still tell you where to go next: public for release-safe notice context, protected for account-aware release work, and desktop for the actual shipped build." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The notices lane should say plainly whether you need the desktop download, pricing help, account continuity, or the legal details around a release."
        />

        <BrowserDesktopRealitySection
          title="Why notices stay on the website while execution stays native"
          description="Legal and corresponding-source follow-through belong to the website and signed-in dashboard even when the actual simulator remains a desktop-first runtime."
        />

        <Section
          title="Where each part of HyperTwist lives"
          description="Distribution and corresponding-source language stays safer when the live public, protected, embedded-browser, and native simulator boundaries remain explicit."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

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

        <Section
          title="Distribution doctrine"
          description="These public legal surfaces should explain why the website is part of the release story without pretending it has replaced the native simulator."
        >
          <div className="card-grid">
            {distributionDoctrineCards.map((card) => (
              <article className="card" key={card.title}>
                <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="Release and redistribution checklist"
          description="Legal pages stay more useful when they explain the concrete release checks that should happen before broader redistribution."
        >
          <div className="card-grid">
            {releaseRolloutChecklist.map((card) => (
              <article className="card" key={card.title}>
                <h3>{card.title}</h3>
                <ul className="list top-gap">
                  {card.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </Section>

        <PublicManualRouteAtlasSection
          title="Which public route should you open next?"
          description="The notices lane is part of the same public guide family as the rest of the site, so it should keep the strongest adjacent routes visible instead of acting like an isolated compliance stub."
          limit={6}
        />

        <DownloadableOperatorManualSection
          description="The legal and distribution lane now also keeps the offline desktop guide reachable so source links, release notes, downloads, and native-runtime boundary guidance can travel together."
        />

        <Section title="Questions about notices or redistribution?">
          <article className="callout">
            <p>
              Contact <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> when the next question is redistribution, corresponding source, or release-surface notices rather than simulator behavior.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonLink to="/support?topic=launch-readiness" tone="ghost">
                Open launch support
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/contact">
                Open contact route
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>
      </MarketingShell>
    </>
  )
}

export function PrivacyPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-privacy')

  return (
    <>
      <SiteMetadata
        title="HyperTwist privacy"
        description="Understand the HyperTwist privacy model for browser account access, desktop-link issuance, and the desktop-first simulator boundary."
        canonicalPath="/privacy"
      />
      <MarketingShell
        eyebrow="Privacy"
        title="Privacy model"
        lede="HyperTwist keeps the website focused on account and delivery work while the simulator stays desktop-first. Privacy descriptions should reflect that split clearly."
      >
        <Section title="Core points">
          <article className="card">
            <ul className="list">
              <li>The public website stores account/session data needed for authentication, plan access, and desktop-link issuance.</li>
              <li>The website does not claim ownership over the full simulator runtime state unless a future browser-client branch is explicitly opened.</li>
              <li>Support, billing, and release operations should collect only the data required to deliver digital access and maintain legal compliance.</li>
            </ul>
          </article>
        </Section>

        <Section
          title="Practical privacy boundary"
          description="Privacy wording should follow the actual product split instead of flattening the website and native simulator into one vague surface."
        >
          <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>

        <SurfaceChoiceGuideSection description="Privacy guidance is clearer when the next working surface is explicit too: public for policy context, protected for identity and account work, and desktop for simulator execution." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Privacy guidance is stronger when it also says whether you need the desktop download, pricing help, account continuity, or the legal details around a release."
        />

        <Section
          title="Browser and desktop responsibilities"
          description="Privacy language stays honest when it says plainly which surface owns public identity work and which surface owns simulator execution."
        >
          <DeliverySurfaceResponsibilitiesGrid limit={3} />
        </Section>

        <Section
          title="Where each part of HyperTwist lives"
          description="This keeps privacy expectations grounded in the live product topology instead of a vague all-in-one app claim."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

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

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Privacy guidance remains more actionable when docs, release notes, corresponding source, notices, and support stay reachable from the same public page."
        />

        <Section
          title="Support-safe escalation boundary"
          description="When privacy or access concerns show up during rollout, support should keep account, runtime, and compliance questions separated 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>

        <Section title="Privacy contact and policy help">
          <article className="callout">
            <p>
              For account, billing, release-access, or policy questions, contact <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> and include whether the concern is on the public site, inside your account, or inside the desktop app.
            </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>
      </MarketingShell>
    </>
  )
}

export function TermsPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-terms')

  return (
    <>
      <SiteMetadata
        title="HyperTwist terms"
        description="Review the HyperTwist terms of access for browser account routes, desktop delivery, and open-source notice obligations."
        canonicalPath="/terms"
      />
      <MarketingShell
        eyebrow="Terms"
        title="Terms of access"
        lede="HyperTwist access is digital-first and plan-gated. Terms should match the actual delivery and account model."
      >
        <Section title="Service model">
          <article className="card">
            <ul className="list">
              <li>Browser access covers the public site, your account, release updates, download management, and dashboard tools.</li>
              <li>The simulator itself is delivered through the desktop app unless a later browser-client branch is explicitly opened.</li>
              <li>Downloaded builds and their public distribution pages remain subject to open-source notice and corresponding-source disclosure rules where applicable.</li>
            </ul>
          </article>
        </Section>

        <Section
          title="Terms in practice"
          description="These terms-oriented boundaries keep the public site, protected dashboard, and desktop simulator aligned with the actual delivery model."
        >
          <div className="card-grid">
            {termsBoundaryCards.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="Terms are stronger when they point to the right live surface as well: public for access/legal context, protected for entitled release work, and desktop for the simulator itself." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="The terms lane should also make the next best move explicit: desktop access, pricing help, account continuity, or legal details around a release."
        />

        <Section
          title="Browser and desktop responsibilities"
          description="Terms stay more accurate when they keep public site duties, protected dashboard duties, and native simulator duties separated."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <Section
          title="Where each part of HyperTwist lives"
          description="This is the quickest way to see which live surface owns access, execution, and future validation branches today."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/open-source-notices', label: 'Review notices' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Terms and access language are easier to trust when public docs, release notes, corresponding source, notices, and support stay together in one visible release bundle."
        />

        <Section
          title="Release and redistribution checklist"
          description="Terms become materially more trustworthy when they stay attached to release proof, download gating, and legal 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>

        <Section title="Access, redistribution, or compliance contact">
          <article className="callout">
            <p>
              Terms questions that affect billing, protected release access, or redistribution should go to <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> with the exact public or protected route and the current build or release context.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonLink to="/support?topic=studio-rollout" tone="ghost">
                Open rollout support
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/contact">
                Open contact route
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>
      </MarketingShell>
    </>
  )
}

export function ShippingPaymentPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-shipping-payment')

  return (
    <>
      <SiteMetadata
        title="HyperTwist shipping and payment"
        description="HyperTwist is delivered digitally through account access, release pages, and desktop downloads with Paddle-ready billing."
        canonicalPath="/shipping-payment"
      />
      <MarketingShell
        eyebrow="Shipping & payment"
        title="Digital delivery only"
        lede="HyperTwist is not a physical-goods storefront. Delivery happens through authenticated account access, release pages, and desktop downloads."
      >
        <Section title="Delivery model">
          <article className="card">
            <p>{paddleReadyDescription}</p>
            <ul className="list">
              <li>No physical goods ship through this site.</li>
              <li>Pricing and checkout are structured for Paddle-backed digital plans.</li>
              <li>Desktop downloads must remain paired with public notices and legal links when required by shipped-code obligations.</li>
            </ul>
          </article>
        </Section>

        <Section
          title="Digital delivery workflow"
          description="A professional digital-delivery lane does more than expose a buy button. It keeps release status, account access, and the desktop handoff coherent."
        >
          <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="What happens after access is granted"
          description="Payment surfaces are stronger when they explain the real next steps instead of stopping at checkout language."
        >
          <div className="card-grid">
            {operatorManualTracks.slice(1, 4).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>

        <SurfaceChoiceGuideSection description="Shipping and payment guidance stays practical when the next live surface is explicit instead of implied." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Shipping and payment guidance is clearer when it also says whether you need desktop access, pricing help, account continuity, or legal details around a release."
        />

        <BrowserAuthMethodsSection
          description="Payment and access language is easier to trust when the current sign-in options stay visible before private downloads and desktop provisioning."
        />

        <BrowserDesktopRealitySection
          title="Why checkout and access stay on the website while training stays native"
          description="The website owns access, billing, and release status so the packaged simulator can remain focused on execution quality instead of becoming a confused storefront."
        />

        <Section
          title="Browser and desktop responsibilities"
          description="Shipping and payment surfaces should explain why checkout, account access, and release status stay on the web while simulator execution stays native."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <Section
          title="Where each part of HyperTwist lives"
          description="Digital-delivery pages stay stronger when the live public, protected, embedded-browser, and native simulator responsibilities are visible in one place."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

        <PublicPackagedDesktopProofSection
          platform={windowsValidationPlatform}
          actions={[
            { to: '/download', label: 'Open download center' },
            { to: '/open-source-notices', label: 'Review notices' },
          ]}
        />

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Shipping and payment guidance should carry the same docs, release, source, notices, and support bundle as the rest of the public desktop-distribution lane."
        />

        <Section
          title="Terms of access in practice"
          description="The shipping/payment page should still tell people what they are actually buying access to and what remains outside the current browser scope."
        >
          <div className="card-grid">
            {termsBoundaryCards.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="Distribution doctrine"
          description="This keeps shipping/payment language attached to package proof, notices, and the desktop-first runtime truth."
        >
          <div className="card-grid">
            {distributionDoctrineCards.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="Release and redistribution checklist"
          description="Digital delivery is only complete when payment, download, proof, and legal follow-through stay aligned."
        >
          <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>

        <PublicManualRouteAtlasSection
          title="Which public route should you open next?"
          description="The shipping/payment lane now also keeps the strongest adjacent manual routes visible so checkout, launch status, release notes, notices, and simulator onboarding remain one coherent product story."
          limit={6}
        />

        <DownloadableOperatorManualSection
          description="The delivery lane also keeps the offline desktop guide attached so first-session setup, release guidance, higher-dimensional runtime guidance, and browser-versus-desktop truth can accompany the purchase and download path."
        />

        <Section title="Need billing, team setup, or plan help?">
          <article className="callout">
            <p>
              Write to <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> for account provisioning, team setup, payment, or release-surface billing questions.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonLink to="/pricing" tone="ghost">
                Reopen pricing
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/help" tone="ghost">
                Open help center
              </HyperTwistButtonLink>
              <HyperTwistButtonLink to="/contact">
                Open contact route
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>
      </MarketingShell>
    </>
  )
}
