import React from 'react'
import { usePage } from '@inertiajs/react'
import DocsCallout from '../../components/docs/DocsCallout'
import DocsComparisonTable from '../../components/docs/DocsComparisonTable'
import DocsFaqAccordion from '../../components/docs/DocsFaqAccordion'
import DocsSection from '../../components/docs/DocsSection'
import DocsSidebarNav from '../../components/docs/DocsSidebarNav'
import QuickstartNextSteps from '../../components/docs/QuickstartNextSteps'
import SeoHead from '../../components/seo/SeoHead'
import {
  BEST_PRACTICES,
  COMMON_MISTAKES,
  FAQ_ITEMS,
  HERO_METRICS,
  PROFILE_COMPARISON_COLUMNS,
  PROFILE_COMPARISON_ROWS,
  PROFILE_CONTENT_ITEMS,
  PROFILE_IMPROVEMENT_TIPS,
  RELATED_HELP_ITEMS,
  SECTION_ITEMS,
  SETUP_BASICS_ITEMS,
  TROUBLESHOOTING_ITEMS,
  WHAT_PROFILE_IS_ITEMS,
  WHAT_TO_PUT_ITEMS,
} from './profileHelpContent'

function HeroMetric({ label, value, note }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
      <div className="mt-2 text-lg font-semibold text-white">{value}</div>
      <p className="mt-2 text-sm leading-6 text-slate-400">{note}</p>
    </div>
  )
}

function BulletGrid({ items, tone = 'sky' }) {
  const dotColor = tone === 'amber' ? 'bg-amber-300' : tone === 'emerald' ? 'bg-emerald-300' : 'bg-sky-300'

  return (
    <div className="grid gap-3 md:grid-cols-2">
      {items.map((item) => (
        <div key={item} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
          <div className="flex gap-3 text-sm leading-6 text-slate-300">
            <span className={`mt-2 h-2 w-2 shrink-0 rounded-full ${dotColor}`} />
            <span>{item}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

function InsightCard({ item }) {
  return (
    <article className="rounded-[28px] border border-white/10 bg-black/20 p-5">
      <h3 className="text-lg font-semibold text-white">{item.title}</h3>
      <p className="mt-3 text-sm leading-7 text-slate-300">{item.body}</p>
    </article>
  )
}

function TroubleCard({ item, links }) {
  return (
    <a href={links[item.linkKey]} className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
      <h3 className="text-lg font-semibold text-white">{item.title}</h3>
      <p className="mt-3 text-sm leading-7 text-slate-300">{item.body}</p>
      <div className="mt-4 flex items-center justify-between gap-3">
        <span className="text-sm font-semibold text-sky-200">{item.linkLabel}</span>
        <span className="text-slate-500">&rarr;</span>
      </div>
    </a>
  )
}

export default function ProfileHelpPage() {
  const { props } = usePage()
  const links = props.links || {}

  const jsonLd = [
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: 'Profile Help',
      description: props.description,
      url: props.seo?.canonical,
      author: {
        '@type': 'Organization',
        name: 'Skinbase',
      },
      about: ['Profile', 'Creator identity', 'Groups', 'Studio', 'Publishing'],
    },
    {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: FAQ_ITEMS.map((item) => ({
        '@type': 'Question',
        name: item.question,
        acceptedAnswer: {
          '@type': 'Answer',
          text: item.answer,
        },
      })),
    },
  ]

  const relatedHelpItems = RELATED_HELP_ITEMS.map((item) => ({
    ...item,
    href: links[item.linkKey],
  }))

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_23%),radial-gradient(circle_at_bottom_right,_rgba(250,204,21,0.14),_transparent_22%),linear-gradient(180deg,_#020617_0%,_#030712_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <SeoHead seo={props.seo || {}} title={props.title} description={props.description} jsonLd={jsonLd} />

      <div className="mx-auto max-w-[1500px]">
        <section id="introduction" className="rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(15,23,42,0.92),rgba(15,23,42,0.72)),radial-gradient(circle_at_top_right,rgba(125,211,252,0.16),transparent_28%)] p-6 shadow-[0_30px_100px_rgba(2,6,23,0.35)] md:p-8 lg:p-10">
          <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div>
              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile help</p>
              <h1 className="mt-3 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-5xl xl:text-6xl">Your profile is the personal identity people remember when they discover your work.</h1>
              <p className="mt-5 max-w-3xl text-base leading-8 text-slate-300 md:text-lg">This page explains what a profile is on Skinbase Nova, how it differs from a Group, how to set it up well, and how to build a stronger public creator presence without turning the page into noise.</p>
              <div className="mt-6 flex flex-wrap gap-3">
                <a href={links.profile_settings} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18">Open profile settings</a>
                <a href={links.groups_help} className="rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Read Groups help</a>
                <a href={links.studio_help} className="rounded-full border border-white/10 bg-black/20 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">Read Studio help</a>
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
              {HERO_METRICS.map((metric) => (
                <HeroMetric key={metric.label} label={metric.label} value={metric.value} note={metric.note} />
              ))}
            </div>
          </div>
        </section>

        <div className="mt-8 grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)] xl:grid-cols-[240px_minmax(0,1fr)_280px]">
          <DocsSidebarNav sections={SECTION_ITEMS} ariaLabel="Profile help sections" selectLabel="Jump to Profile help section" />

          <div className="space-y-6">
            <DocsSection
              id="what-profile-is"
              eyebrow="Foundations"
              title="What a profile is"
              summary="Your profile is your personal public presence on Skinbase. It is where people build a first impression of who you are, what you create, and how your identity connects to the work they see."
            >
              <div className="grid gap-4 xl:grid-cols-3">
                {WHAT_PROFILE_IS_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>

              <div className="mt-6">
                <DocsCallout tone="note" title="The simplest way to think about your profile">
                  Your profile is not just a settings page. It is the public identity layer that helps people recognize you as a creator.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="profile-vs-group"
              eyebrow="Identity"
              title="Profile vs Group"
              summary="This is the most important distinction for many creators. Your profile represents you personally. A Group represents a shared identity. Both can exist at the same time without competing with each other."
            >
              <DocsComparisonTable columns={PROFILE_COMPARISON_COLUMNS} rows={PROFILE_COMPARISON_ROWS} caption="Comparison between Profile and Group" />

              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <DocsCallout tone="tip" title="You do not lose your personal identity inside Groups">
                  Group publishing adds a shared layer, but your own profile still matters because it helps people understand your individual presence and contribution history.
                </DocsCallout>
                <DocsCallout tone="warning" title="Do not let profile and Group identity blur together">
                  When the difference is unclear, people have a harder time understanding who is speaking, who owns the work, and what belongs to the shared team versus the individual creator.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="profile-setup-basics"
              eyebrow="Setup"
              title="Profile setup basics"
              summary="The best profiles are not overbuilt. They are recognizable, readable, and consistent enough that people can understand the creator quickly."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {SETUP_BASICS_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>

              <div className="mt-6">
                <BulletGrid items={PROFILE_IMPROVEMENT_TIPS} tone="emerald" />
              </div>
            </DocsSection>

            <DocsSection
              id="what-to-put-on-your-profile"
              eyebrow="Presentation"
              title="What to put on your profile"
              summary="Think of your profile as a curated introduction rather than a dumping ground. The strongest pages make your identity and best work easier to notice quickly."
            >
              <BulletGrid items={WHAT_TO_PUT_ITEMS} tone="sky" />
            </DocsSection>

            <DocsSection
              id="profile-content-and-activity"
              eyebrow="Visibility"
              title="Profile content and activity"
              summary="Profiles are not only bios and avatars. They can also help people understand your personal work, your public contributions, and how active you are as a creator."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {PROFILE_CONTENT_ITEMS.map((item) => (
                  <InsightCard key={item.title} item={item} />
                ))}
              </div>

              <div className="mt-6">
                <DocsCallout tone="practice" title="Profiles become stronger through activity, not decoration alone">
                  Better profile visuals help, but the strongest identity pages are backed by real work, visible contributions, and consistent public presence.
                </DocsCallout>
              </div>
            </DocsSection>

            <DocsSection
              id="best-practices"
              eyebrow="Good habits"
              title="Best practices"
              summary="A strong profile does not need to be complicated. It needs to feel real, intentional, and easy for other people to understand."
            >
              <BulletGrid items={BEST_PRACTICES} tone="emerald" />
            </DocsSection>

            <DocsSection
              id="common-mistakes"
              eyebrow="Avoid this"
              title="Common mistakes"
              summary="Most profile problems come from neglect, inconsistency, or mixing personal identity with other public surfaces until the page stops feeling coherent."
            >
              <BulletGrid items={COMMON_MISTAKES} tone="amber" />
            </DocsSection>

            <DocsSection
              id="faq"
              eyebrow="FAQ"
              title="Profile FAQ"
              summary="These answers cover the most common questions people ask when they are trying to build a stronger public identity on Skinbase."
            >
              <DocsFaqAccordion items={FAQ_ITEMS} />
            </DocsSection>

            <DocsSection
              id="troubleshooting"
              eyebrow="Troubleshooting"
              title="Troubleshooting"
              summary="Use these shortcuts when your profile feels unclear, incomplete, or disconnected from the way you actually want to present yourself."
            >
              <div className="grid gap-4 xl:grid-cols-2">
                {TROUBLESHOOTING_ITEMS.map((item) => (
                  <TroubleCard key={item.title} item={item} links={links} />
                ))}
              </div>
            </DocsSection>

            <DocsSection
              id="related-help"
              eyebrow="Next steps"
              title="Related help"
              summary="Use these links when your profile setup question leads into shared identity, publishing workflows, or access issues elsewhere in the product."
            >
              <QuickstartNextSteps items={relatedHelpItems} />
            </DocsSection>
          </div>

          <aside className="hidden xl:block xl:sticky xl:top-24 xl:self-start">
            <div className="space-y-4 rounded-[28px] border border-white/10 bg-white/[0.03] p-5 shadow-[0_18px_50px_rgba(2,6,23,0.22)]">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Quick route map</p>
                <div className="mt-4 space-y-2">
                  <a href={links.profile_settings} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Open profile settings</a>
                  <a href={links.groups_help} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Read Groups help</a>
                  <a href={links.studio_help} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Read Studio help</a>
                  <a href={links.upload_help} className="block rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.05]">Read Upload help</a>
                </div>
              </div>

              <div className="rounded-[24px] border border-amber-300/20 bg-amber-400/10 p-4 text-amber-50">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Fast reminder</div>
                <p className="mt-2 text-sm leading-6 text-amber-50/85">A better profile usually starts with three things: a recognizable avatar, a clearer bio, and a stronger sense of what you want people to remember about you.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}