import { Globe, Headset, LifeBuoy, Mail, MonitorSmartphone, ShieldCheck } from 'lucide-react'
import { Link } from 'react-router-dom'
import { MarketingShell } from '../components/layout/MarketingShell'
import { SiteMetadata } from '../components/seo/SiteMetadata'
import { HyperTwistButtonAnchor, HyperTwistButtonLink } from '../components/ui/HyperTwistButton'
import { brandConfig } from '../site-config'
import {
  browserLimitCards,
  browserPurposeCards,
  browserWorkflowTracks,
  contactChannelCards,
  helpCenterCards,
  issueReportingChecklistCards,
  supportEscalationCards,
  supportFaqs,
} from '../site-data'
import {
  BrowserAuthMethodsSection,
  BrowserDesktopDecisionFaqSection,
  BrowserDesktopRealitySection,
  BulletCardSection,
  DeliverySurfaceResponsibilitiesGrid,
  FaqCardSection,
  HigherDimensionalRuntimeGuideSection,
  InputAndDevicePostureSection,
  OperatorDesktopQuickstartSection,
  PublicPackagedDesktopProofSection,
  PublicReleaseDecisionGuideSection,
  ReleaseAuthorityBundleSection,
  Section,
  StepCardSection,
  SupportTopicDirectorySection,
  SurfaceChoiceGuideSection,
  supportTopicDirectory,
  usePublicReleaseManifestView,
} from './public-page-helpers'

export function BrowserExperiencePage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-browser')

  return (
    <>
      <SiteMetadata
        title="HyperTwist browser access"
        description="Learn what the HyperTwist website is for, why the desktop app remains more powerful, and when to move from browser access into real simulator training."
        canonicalPath="/browser"
      />
      <MarketingShell
        eyebrow="Website and browser companion"
        title="The website gets you in. The desktop app becomes the training room."
        lede="Use the website for accounts, pricing, release notes, legal details, pairing, and support. Use the desktop app when you want the full simulator experience: deeper controls, replay review, recognition workflows, and advanced puzzle families."
      >
        <Section
          title="Start with the clearest picture"
          description="The browser experience is useful, polished, and valuable. It is also intentionally lighter than the desktop app for the core simulator job."
        >
          <div className="feature-band">
            <article className="feature-band__card">
              <Globe size={22} />
              <h3>The website is your public and signed-in home base</h3>
              <p>Use it for docs, pricing, release status, account access, legal details, and website-to-desktop pairing.</p>
            </article>
            <article className="feature-band__card">
              <MonitorSmartphone size={22} />
              <h3>The desktop app is the real simulator</h3>
              <p>Use the desktop app for recognition, replay, coaching, higher-dimensional families, and the full training experience.</p>
            </article>
            <article className="feature-band__card">
              <Headset size={22} />
              <h3>Headset support is still being validated</h3>
              <p>The website does not hide the fact that broader headset and controller support still belongs to a later native device pass.</p>
            </article>
          </div>
          <div className="button-row top-gap">
            <HyperTwistButtonLink to="/register?next=%2Fapp" tone="secondary">
              Create account
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/download">
              Open desktop download
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/app" tone="ghost">
              Open dashboard
            </HyperTwistButtonLink>
            <HyperTwistButtonLink to="/help" tone="ghost">
              Open help center
            </HyperTwistButtonLink>
          </div>
        </Section>

        <BulletCardSection
          title="What the website is genuinely great at"
          description="This is where the website shines: access, support, release updates, and account-aware work around the simulator."
          cards={browserPurposeCards}
        />

        <BulletCardSection
          title="Why the desktop app goes much further"
          description="This is the direct statement the public site should not bury: the website is intentionally narrower and materially less capable for actual simulator execution."
          cards={browserLimitCards}
        />

        <StepCardSection
          title="How the browser and downloadable work together"
          description="Use this section when a buyer, team, or studio wants the real sequence instead of generic browser-versus-native rhetoric."
          cards={browserWorkflowTracks}
        />

        <BrowserDesktopRealitySection
          title="What stays on the website and what moves into the desktop app"
          description="The website stays valuable because it does its own job well instead of quietly claiming simulator features it cannot prove."
        />

        <BrowserDesktopDecisionFaqSection
          description="These are the direct questions people ask as soon as they realize HyperTwist has both a website and a desktop app."
        />

        <BrowserAuthMethodsSection
          description="The browser experience is easier to trust when the real sign-in options are visible next to the release, support, and download decisions they unlock."
        />

        <Section
          title="What changes after installation"
          description="The website remains part of the product after installation, but the center of gravity moves into the desktop app immediately."
        >
          <DeliverySurfaceResponsibilitiesGrid />
        </Section>

        <OperatorDesktopQuickstartSection title="First downloadable session after the browser handoff" />

        <SupportTopicDirectorySection
          title="Need a browser or handoff answer fast?"
          description="These routes keep the next step explicit when the website raises an access, setup, or release question."
          topics={supportTopicDirectory}
          selectedTopicKey="operator-access"
        />

        <SurfaceChoiceGuideSection description="The browser page should also tell people exactly where to go next: public for evaluation, protected for account-aware release work, and desktop for the actual simulator." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="This keeps the web-version story practical too: the next move might be the desktop download, pricing, account continuity, or the release details around it."
        />

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

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The browser experience is part of the release story, so this page keeps docs, release notes, source links, legal pages, and support bundled with the desktop handoff."
        />
      </MarketingShell>
    </>
  )
}

export function HelpCenterPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-help')

  return (
    <>
      <SiteMetadata
        title="HyperTwist help center"
        description="Use the HyperTwist help center for onboarding, controls, higher-dimensional guidance, browser-to-desktop handoff help, and practical troubleshooting."
        canonicalPath="/help"
      />
      <MarketingShell
        eyebrow="Help center"
        title="Practical help for setup, controls, downloads, and launch."
        lede="The help center answers the questions people actually have before they turn into support tickets: how the website handoff works, how the desktop app should behave on first launch, what controls are real today, and when to escalate."
      >
        <BulletCardSection
          title="What this help center covers"
          description="These are the main categories the public site should answer directly instead of forcing people into support for everything."
          cards={helpCenterCards}
        />

        <SupportTopicDirectorySection
          title="Pick the right help path"
          description="These cards keep account, release, pricing, and runtime questions separated before escalation begins."
          topics={supportTopicDirectory}
        />

        <OperatorDesktopQuickstartSection
          title="First-session help"
          description="If the question is 'what should I actually do first?', this is the shortest truthful answer."
        />

        <InputAndDevicePostureSection
          title="Current controls and device state"
          description="The help center should say plainly what is real today and what still remains in the later native headset/controller validation lane."
        />

        <HigherDimensionalRuntimeGuideSection
          title="Higher-dimensional family help"
          description="This guide keeps the serious family lanes accessible to public readers without pretending they run in the browser."
        />

        <BulletCardSection
          title="Issue-report packet"
          description="When self-service stops being enough, these prompts keep issue reports clear, useful, and quick to act on."
          cards={issueReportingChecklistCards}
        />

        <FaqCardSection
          title="Common questions"
          description="These answers should settle the most common browser, download, controls, and scope questions quickly."
          cards={supportFaqs}
        />

        <BrowserDesktopRealitySection
          title="Why help still separates browser from downloadable"
          description="Help is clearer when it mirrors the real product instead of flattening everything into one vague app."
        />

        <Section
          title="Need escalation instead of guidance?"
          description="Move into the human path when the question has already become account, build, app, or launch blocking."
        >
          <div className="feature-band">
            <Link to="/support" className="feature-band__card feature-band__card--link">
              <LifeBuoy size={22} />
              <h3>Open support</h3>
              <p>Use the escalation route when the next job is launch recovery, account review, or desktop-app issue routing.</p>
            </Link>
            <Link to="/contact" className="feature-band__card feature-band__card--link">
              <Mail size={22} />
              <h3>Open contact page</h3>
              <p>Use the direct contact lane when you already know you need a human response rather than another manual page.</p>
            </Link>
          </div>
        </Section>

        <SurfaceChoiceGuideSection description="The help center is best when it still says where the answer lives: public for guidance, protected for account-aware release work, and desktop for simulator execution." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="Help gets stronger when it also tells you the next best move instead of stopping at explanation alone."
        />

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

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="The help center should still carry the same docs, release notes, legal pages, and support bundle as the rest of the public manual so you can act on what you just learned."
        />
      </MarketingShell>
    </>
  )
}

export function ContactPage() {
  const { releaseManifest, windowsValidationPlatform } = usePublicReleaseManifestView('public-contact')

  return (
    <>
      <SiteMetadata
        title="Contact HyperTwist"
        description="Contact HyperTwist for support, team setup help, download issues, pricing questions, and release details."
        canonicalPath="/contact"
      />
      <MarketingShell
        eyebrow="Contact"
        title="Contact the team with the right details the first time."
        lede={`Write to ${brandConfig.contact.email} when the next step is genuinely human: access problems, team setup questions, desktop-app issues, pricing follow-through, or release and legal contact.`}
      >
        <BulletCardSection
          title="Contact paths"
          description="The public site should make the human paths explicit too, not only the self-service documentation."
          cards={contactChannelCards}
        />

        <Section
          title="Primary contact route"
          description="HyperTwist keeps one direct contact path visible, but the fastest answer still depends on naming the right part of the product and the right issue."
        >
          <article className="callout">
            <p>
              Email <a href={brandConfig.contact.emailHref}>{brandConfig.contact.email}</a> with the route,
              platform, plan or account state, and whether the question is public, signed-in, or desktop-app work.
            </p>
            <p>
              The clearer the context is up front, the faster HyperTwist can separate account, package, runtime, and team questions.
            </p>
            <div className="button-row top-gap">
              <HyperTwistButtonAnchor href={brandConfig.contact.emailHref}>
                Email HyperTwist
              </HyperTwistButtonAnchor>
              <HyperTwistButtonLink to="/support" tone="ghost">
                Open support routes
              </HyperTwistButtonLink>
            </div>
          </article>
        </Section>

        <SupportTopicDirectorySection
          title="Choose the right escalation lane"
          description="These topic cards help you attach the message to the real account, team, or simulator surface before you send it."
          topics={supportTopicDirectory}
        />

        <BulletCardSection
          title="What to include in your message"
          description="This is the compact packet shape that makes replies faster and reduces back-and-forth."
          cards={issueReportingChecklistCards}
        />

        <BulletCardSection
          title="How HyperTwist classifies escalations"
          description="These distinctions matter because a release/access failure and a simulator bug are not the same problem even when they occur in one session."
          cards={supportEscalationCards}
        />

        <BrowserDesktopRealitySection
          title="Why contact still depends on the website-versus-downloadable split"
          description="The contact page should reflect the real product too: account and release issues stay on the web side, while simulator issues stay attached to the desktop app."
        />

        <Section
          title="Launch and release context"
          description="Contact and support are safer when they stay anchored to current package proof and public launch status."
        >
          <div className="feature-band">
            <article className="feature-band__card">
              <ShieldCheck size={22} />
              <h3>Release status stays visible</h3>
              <p>Use current launch status and packaged proof before reporting a rollout or release concern.</p>
            </article>
            <article className="feature-band__card">
              <MonitorSmartphone size={22} />
              <h3>The downloadable remains the source of simulator truth</h3>
              <p>Desktop-app issue reports should name the exact simulator family and build, not only the website route that led there.</p>
            </article>
          </div>
        </Section>

        <SurfaceChoiceGuideSection description="This page should still point people to the right next surface too: public for context, signed-in for account-aware release work, and desktop for actual simulator confirmation." />

        <PublicReleaseDecisionGuideSection
          releaseManifest={releaseManifest}
          description="If direct contact is not actually the next best move, these cards keep the lower-friction public and protected routes visible too."
        />

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

        <ReleaseAuthorityBundleSection
          releaseManifest={releaseManifest}
          description="Contact pages are stronger when they still carry the same docs, release notes, corresponding-source, notices, and support references that frame the actual problem."
        />
      </MarketingShell>
    </>
  )
}
