import { AssessmentLink } from '@/components/AssessmentLink';
import { LastResultLink } from '@/components/ClientButtons';
import { EmailCapture } from '@/components/EmailCapture';
import { JourneyMap } from '@/components/JourneyMap';
import { ColorChangeCards } from '@/components/ui/color-change-card';
import { PrismaHero, PrismaHeroArrow } from '@/components/ui/prisma-hero';
import { SubscriptionScreen } from '@/components/ui/subscription-screen';
import { Compass, Crown, FileText } from 'lucide-react';
import Image from 'next/image';
import { getContent } from '@/content';
import { archetypeCards } from '@/lib/archetype-images';
import { formatPrice, products } from '@/lib/config';

export default function HomePage() {
  const content = getContent();
  const price = formatPrice(products.vipTicket.price);
  const { vip } = content;

  return (
    <>
      <PrismaHero
        className="h-[calc(100svh-65px)] min-h-[560px]"
        frameClassName="rounded-none md:rounded-none"
        title={['Find your Strength.', 'Build the team your', 'Business is missing']}
        titleClassName="text-[9.2vw] sm:text-[8.5vw] md:text-[7vw] lg:text-[5vw] xl:text-[4.6vw] 2xl:text-[4.4vw] leading-[0.95] tracking-[-0.04em] pb-[0.08em]"
        stacked
        contentClassName="pb-[8vh] md:pb-[12vh]"
        textClassName="pl-5 lg:pl-[50px]"
        navLabel="On this page"
        navClassName="bg-[#ffc401] gap-0.5 py-2 sm:gap-1 md:gap-1.5 md:px-4 md:py-2.5 lg:gap-2"
        // Each link is its own pill: tinted on hover, solid black once clicked.
        navLinkClassName="rounded-full px-2 py-1.5 font-bold text-black/80 hover:bg-black/15 hover:text-black md:px-4 data-[active=true]:bg-black data-[active=true]:text-[#ffc401]"
        navItems={[
          { label: 'How it works', href: '#how-it-works' },
          { label: 'The 8 archetypes', href: '#archetypes' },
          { label: 'VIP Ticket', href: '#vip' },
          { label: 'Team edition', href: '#team' },
        ]}
        posterSrc="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=1920&q=80"
        description={
          // Fixed line breaks from small tablets up; phones wrap naturally.
          <>
            EntreJourneyMap shows which of eight entrepreneurial archetypes <br className="hidden sm:inline" />
            you naturally lead with, where your blind spots are, <br className="hidden sm:inline" />
            and which complementary roles will help your business grow beyond you.
          </>
        }
        actions={
          <>
            <AssessmentLink
              label="Start the free assessment"
              className="group inline-flex items-center gap-2 rounded-full bg-brand py-1 pl-5 pr-1 text-sm font-medium text-black no-underline transition-all hover:gap-3 sm:text-base"
            >
              <PrismaHeroArrow />
            </AssessmentLink>
            <LastResultLink className="text-sm text-cream/80 underline-offset-4 transition-colors hover:text-cream" />
          </>
        }
        meta="*24 questions · about 8 minutes · free result, no sign-up"
        aside={
          // Cream labels with a soft shadow so the map reads straight over the video in both colour schemes.
          // Pulled left out of its column so it sits just beside the figure in the video.
          <div className="mr-auto w-full max-w-[min(500px,56svh)] lg:-ml-[4vw] [filter:drop-shadow(0_1px_2px_rgba(0,0,0,0.9))_drop-shadow(0_0_12px_rgba(0,0,0,0.7))] [--ink-2:#e1e0cc] [--ink:#e1e0cc]">
            <JourneyMap archetypes={content.archetypeList} />
          </div>
        }
        asideClassName="hidden lg:block"
      />

      <section className="section band-strip" id="how-it-works" style={{ scrollMarginTop: '80px' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">How it works</span>
            <h2>From self-awareness to team design</h2>
          </div>
          <ol className="steps">
            <li>
              <h3>Take the assessment</h3>
              <p className="muted">
                Sixteen quick self-ratings and eight real-world scenarios reveal how you naturally create value.
              </p>
            </li>
            <li>
              <h3>See your map, free</h3>
              <p className="muted">
                Get your lead and supporting archetype, your full 8-archetype map, your strengths and your first move.
              </p>
            </li>
            <li>
              <h3>Go VIP</h3>
              <p className="muted">
                Join {vip.circleName} with an {vip.ticketName}: the {vip.sessionName} and your {vip.blueprintName}, a
                30-day plan built for your archetype.
              </p>
            </li>
          </ol>
        </div>
      </section>

      <section className="section" id="archetypes" style={{ scrollMarginTop: '80px' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">The eight archetypes</span>
            <h2>Eight roles. One shared business.</h2>
            <p className="lede">
              Archetypes describe recurring contributions, not fixed identities. Most entrepreneurs blend several, and
              every growing business needs all eight covered by someone.
            </p>
          </div>
          {/* On large screens the map lives in the hero; smaller screens show it here instead. */}
          <div className="mb-10 lg:hidden">
            <JourneyMap archetypes={content.archetypeList} />
          </div>
          <ColorChangeCards cards={archetypeCards(content.archetypeList)} />
        </div>
      </section>

      <section className="section" id="vip" style={{ scrollMarginTop: '80px' }}>
        <div className="container split">
          <div>
            <span className="eyebrow text-[#ffd60a]">{vip.ticketName}</span>
            <h2>{vip.question}</h2>
            <p className="lede">
              Your free result tells you who you are. Your VIP Ticket shows you what to do next: entry to{' '}
              {vip.circleName}, the {vip.sessionName}, and your {vip.blueprintName}.
            </p>
            <p style={{ marginTop: '1.5rem', fontWeight: 600 }}>{vip.sessionHeading}</p>
            <ul className="list-check">
              {vip.sessionSteps.map((step) => (
                <li key={step.title}>
                  <strong>{step.title}:</strong> {step.text.charAt(0).toLowerCase() + step.text.slice(1)}
                </li>
              ))}
            </ul>
          </div>
          <SubscriptionScreen
            // Brand yellow accent on a black panel in both colour schemes, matching the app icon.
            className="mx-auto md:mr-0 [--accent-hover:#ffe14d] [--accent-ink:#0b0b0b] [--accent:#ffd60a] [--bg:#0b0b0b] [--ink:#f5f3ec] [--muted:#a3a3a3]"
            backgroundImageSrc="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=900&q=75"
            headerGraphic={<Image src="/brand/logo-AppIcon-ej.png" alt="" width={112} height={112} />}
            appName="Ark Summit"
            planType="VIP Ticket"
            features={[
              { icon: <Crown className="size-5" />, text: `Entry to ${vip.circleName}` },
              { icon: <Compass className="size-5" />, text: `The ${vip.sessionName}` },
              { icon: <FileText className="size-5" />, text: `Your ${vip.blueprintName}` },
            ]}
            price={price}
            period="one-time"
            action={
              <AssessmentLink label="Start with the free assessment" className="btn btn-primary btn-lg btn-block" />
            }
            footerText="Take the free assessment, then claim your VIP Ticket."
          />
        </div>
      </section>

      {/* Full-width photo band. Dark-scheme tokens are pinned here so text and the form stay legible over the photo in both colour schemes.
          The email field is white and the waitlist button brand yellow so the form stands out against the photo. */}
      <section
        className="bleed-end relative isolate overflow-hidden py-20 text-foreground [color-scheme:dark] md:py-28 [--accent-hover:#f59563] [--accent-ink:#1a0e07] [--accent:#f07d45] [--danger:#f2837b] [--focus:#8da4f7] [--ink-2:#d5d9e2] [--ink:#f5f3ec] [--line:#3a4560] [--muted:#a8b0c2] [--success:#6cc785] [--surface:#151e31] [&_.btn-primary]:[--accent-hover:#ffe14d] [&_.btn-primary]:[--accent-ink:#0b0b0b] [&_.btn-primary]:[--accent:#ffd60a] [&_.input]:[--focus:#ffd60a] [&_.input]:[--ink:#14213d] [&_.input]:[--line:#ffffff] [&_.input]:[--surface:#ffffff] [&_.input]:[color-scheme:light]"
        id="team"
        style={{ scrollMarginTop: '80px' }}
      >
        <img
          src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=2000&q=75"
          alt=""
          className="absolute inset-0 -z-20 h-full w-full object-cover"
        />
        <div aria-hidden="true" className="absolute inset-0 -z-10 bg-black/45" />
        <div aria-hidden="true" className="absolute inset-0 -z-10 bg-linear-to-r from-black/75 via-black/25 to-black/65" />
        <div className="container">
          <div className="split items-center">
            <div>
              <span className="eyebrow">Coming soon</span>
              <h2 style={{ fontSize: '1.7rem' }}>Team edition and live workshops</h2>
              <p style={{ marginBottom: 0 }}>
                Map your whole team, see which contributions nobody owns, and run an EntreJourneyMap workshop with your
                founders, staff or community. Join the waitlist for early access.
              </p>
            </div>
            <EmailCapture
              source="team-waitlist"
              buttonLabel="Join the waitlist"
              consentText="Email me about the team edition and workshops. I can unsubscribe at any time."
              successText="You're on the waitlist. We'll be in touch when the team edition opens."
            />
          </div>
        </div>
      </section>
    </>
  );
}