import { MarketingShell } from '../components/layout/MarketingShell'
import { SiteMetadata } from '../components/seo/SiteMetadata'
import { HyperTwistButtonLink } from '../components/ui/HyperTwistButton'
import { PublicLaunchStatus } from '../components/ui/PublicLaunchStatus'
import { ProductSurfaceMatrix } from '../components/ui/ProductSurfaceMatrix'
import {
  advancedOperatorAdjunctTracks,
  deploymentReadinessTracks,
  featureAtlasCurrentTracks,
  featureRegistryTierCards,
  productSurfaceMatrixRows,
  releaseStoryCards,
  roadmapHonestyCards,
  supportFaqs,
} from '../site-data'
import {
  BulletCardSection,
  BrowserDesktopRealitySection,
  ControlProfileRosterSection,
  FaqCardSection,
  HigherDimensionalRuntimeGuideSection,
  InputAndDevicePostureSection,
  PublicPackagedDesktopProofSection,
  PublicReleaseDecisionGuideSection,
  ReleaseAuthorityBundleSection,
  RuntimeControlGuideSection,
  Section,
  SurfaceChoiceGuideSection,
  usePublicReleaseManifestView,
} from './public-page-helpers'

export function FeaturesPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-features')

  return (
    <>
      <SiteMetadata
        title="HyperTwist features"
        description="Explore the full HyperTwist feature set across classic training, replay, coaching, higher-dimensional study, browser access, and desktop delivery."
        canonicalPath="/features"
      />
      <MarketingShell
        eyebrow="Features"
        title="A deep training toolkit, not just a timer."
        lede="HyperTwist brings classic-cube practice, replay review, recognition-assisted recovery, guided training, coaching, and serious higher-dimensional study together in one product. This page shows what you can use today and where each part lives."
      >
        <BulletCardSection
          title="How to read this feature map"
          description="This page keeps available features, planned additions, and future ideas clearly separated so you always know what is ready today."
          cards={featureRegistryTierCards}
        />

        <BulletCardSection
          title="What you can use today"
          description="These are the major experiences HyperTwist already delivers right now."
          cards={featureAtlasCurrentTracks}
        />

        <BulletCardSection
          title="Power-user companion systems"
          description="HyperTwist also includes companion systems for voice, continuity, and service routing that deepen day-to-day training."
          cards={advancedOperatorAdjunctTracks}
        />

        <Section
          title="Where everything happens"
          description="The website, signed-in dashboard, in-app web tools, and desktop simulator each have a different job. This guide keeps that split easy to understand."
        >
          <ProductSurfaceMatrix rows={productSurfaceMatrixRows} />
        </Section>

        <SurfaceChoiceGuideSection description="Use the public site when you need guidance, updates, or account entry. Use the signed-in dashboard when your plan or downloads matter. Use the desktop app when it is time to train." />

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

        <BrowserDesktopRealitySection />

        <HigherDimensionalRuntimeGuideSection
          title="Higher-dimensional families and where they live"
          description="These are the serious hypercubing experiences already in HyperTwist and where each one actually runs today."
        />

        <InputAndDevicePostureSection
          title="Current control and device state"
          description="This section shows what control quality you can rely on now and what still needs more device validation."
        />

        <ControlProfileRosterSection
          title="Current selectable control roster"
          description="This keeps the feature atlas concrete about the shipped keyboard profile, scene presets, dedicated-family selectors, and the current persistence boundary."
        />

        <RuntimeControlGuideSection
          title="Controls guide"
          description="The feature atlas is more useful when it also teaches practical desktop controls instead of stopping at capability labels and roster summaries."
        />

        <FaqCardSection
          title="Common capability questions"
          description="These are the short, public-safe answers to the product-boundary questions advanced readers usually ask after reading the capability atlas."
          cards={supportFaqs.slice(1, 6)}
        />

        <Section
          title="Release readiness"
          description="Great software also needs clean delivery, package proof, account access, and trustworthy release notes."
        >
          <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>
            ))}
            {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 availability"
          description="Capabilities and live access are related but different. This section shows the current public release picture clearly."
        >
          <PublicLaunchStatus title="Public feature and access status" />
        </Section>

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

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The feature map stays more useful when docs, release notes, source links, notices, and support stay attached to it."
        />

        <Section
          title="What stays clear on purpose"
          description="These are the expectations HyperTwist keeps visible on purpose so the product stays easy to trust."
        >
          <div className="split-grid">
            {roadmapHonestyCards.map((item) => (
              <article key={item} className="callout">
                <p>{item}</p>
              </article>
            ))}
          </div>
          <div className="button-row top-gap">
            <HyperTwistButtonLink to="/docs" tone="ghost">
              Open public manual
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/resources" tone="ghost">
              Open resources
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/download">
              Open download center
            </HyperTwistButtonLink>
          </div>
        </Section>
      </MarketingShell>
    </>
  )
}
