import React, { useState } from 'react';
import { Box, Button, Grid, Paper, Typography } from '@mui/material';
import GlobalStyles from '@mui/material/GlobalStyles';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import MenuBookIcon from '@mui/icons-material/MenuBook';
import ImageIcon from '@mui/icons-material/Image';
import VolumeUpIcon from '@mui/icons-material/VolumeUp';
import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
import { OptimizedVideo } from '../ImageStudio/dashboard/utils/OptimizedVideo';
import { motion, AnimatePresence } from 'framer-motion';
import { leftPageVariants, rightPageVariants } from './Phases/StoryOutlineParts/pageVariants';

interface StoryWriterLandingProps {
  onStart: () => void;
  onSelectPath?: (
    mode: 'marketing' | 'pure',
    template:
      | 'product_story'
      | 'brand_manifesto'
      | 'founder_story'
      | 'customer_story'
      | 'short_fiction'
      | 'long_fiction'
      | 'anime_fiction'
      | 'experimental_fiction'
      | null
  ) => void;
}

const featureHighlights = [
  {
    title: 'AI Story Blueprint',
    description: 'Persona, setting, tone, and premise woven together automatically.',
    detail: 'Start with cohesive outlines tailored to your audience and genre.',
    icon: <MenuBookIcon sx={{ fontSize: 32, color: '#8D5524' }} />,
  },
  {
    title: 'Cinematic Illustrations',
    description: 'Scene-by-scene image prompts and gallery-ready renders.',
    detail: 'Control aspect ratios, providers, and models for every chapter.',
    icon: <ImageIcon sx={{ fontSize: 32, color: '#B25D3E' }} />,
  },
  {
    title: 'Voice-Ready Narration',
    description: 'Generate lifelike audio in multiple languages and speeds.',
    detail: 'Perfect for bedtime stories, podcasts, or accessibility-ready scripts.',
    icon: <VolumeUpIcon sx={{ fontSize: 32, color: '#7A4C9F' }} />,
  },
  {
    title: 'Story Video Composer',
    description: 'Blend scenes, audio, and transitions into immersive videos.',
    detail: 'Fine-tune FPS, transitions, and pacing for a studio polish.',
    icon: <VideoLibraryIcon sx={{ fontSize: 32, color: '#2E7D83' }} />,
  },
];

const MotionBox = motion.create(Box);

export const StoryWriterLanding: React.FC<StoryWriterLandingProps> = ({ onStart, onSelectPath }) => {
  type NonFictionTemplate = 'product_story' | 'brand_manifesto' | 'founder_story' | 'customer_story';
  type FictionTemplate = 'short_fiction' | 'long_fiction' | 'anime_fiction' | 'experimental_fiction';
  type TemplateDetailKey = NonFictionTemplate | FictionTemplate | null;

  const [detailTemplate, setDetailTemplate] = useState<TemplateDetailKey>(null);

  const isDetailView = detailTemplate !== null;

  const isNonFictionDetail = (key: TemplateDetailKey): key is NonFictionTemplate =>
    key === 'product_story' || key === 'brand_manifesto' || key === 'founder_story' || key === 'customer_story';

  const isFictionDetail = (key: TemplateDetailKey): key is FictionTemplate =>
    key === 'short_fiction' || key === 'long_fiction' || key === 'anime_fiction' || key === 'experimental_fiction';

  return (
    <Box sx={{ py: 6 }}>
      <GlobalStyles
        styles={{
          '.storywriter-landing-shadow': {
            boxShadow: '0 36px 80px rgba(45, 30, 15, 0.25)',
          },
        }}
      />

      <Box sx={{ mb: 5, display: 'flex', justifyContent: 'center' }}>
        <Box
          className="storywriter-landing-shadow"
          sx={{
            position: 'relative',
            width: { xs: '100%', lg: '90vw' },
            maxWidth: 1400,
            borderRadius: '24px',
            overflow: 'hidden',
            background: 'linear-gradient(120deg, #fff9ef 0%, #f5e1c7 45%, #fff9ef 100%)',
            border: '1px solid rgba(120, 90, 60, 0.28)',
            transform: 'perspective(2200px) rotateX(2deg)',
            boxShadow: '0 36px 80px rgba(45, 30, 15, 0.35)',
            '&::after': {
              content: '""',
              position: 'absolute',
              inset: '-10px -24px 28px',
              background:
                'radial-gradient(circle at 25% 20%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 42%), radial-gradient(circle at 75% 82%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 46%)',
              filter: 'blur(20px)',
              zIndex: -2,
            },
          }}
        >
          <Box
            sx={{
              position: 'absolute',
              top: 0,
              bottom: 0,
              left: '50%',
              width: '2px',
              background: 'linear-gradient(180deg, rgba(120, 90, 60, 0.5) 0%, rgba(120, 90, 60, 0.08) 100%)',
              transform: 'translateX(-50%)',
              zIndex: 2,
            }}
          />

          <AnimatePresence initial={false} custom={1}>
            <MotionBox
              key={detailTemplate || 'overview'}
              custom={1}
              variants={{
                enter: () => ({ opacity: 0 }),
                center: { opacity: 1 },
                exit: () => ({ opacity: 0 }),
              }}
              initial="enter"
              animate="center"
              exit="exit"
              sx={{
                display: 'flex',
                flexDirection: { xs: 'column', md: 'row' },
                width: '100%',
                height: '100%',
              }}
            >
              <MotionBox
                custom={1}
                variants={leftPageVariants}
                initial="enter"
                animate="center"
                exit="exit"
                sx={{
                  flex: 1,
                  p: { xs: 4, md: 6 },
                  pr: { xs: 4, md: 7 },
                  borderRight: { md: '1px solid rgba(120, 90, 60, 0.18)' },
                  background: 'linear-gradient(100deg, rgba(255,255,255,0.85) 0%, rgba(242,226,204,0.95) 100%)',
                  display: 'flex',
                  flexDirection: 'column',
                  position: 'relative',
                  boxShadow: 'inset -18px 0 30px rgba(160, 120, 90, 0.18)',
                }}
              >
                {!isDetailView || isNonFictionDetail(detailTemplate) ? (
                  <>
                    <Typography variant="overline" sx={{ letterSpacing: 6, color: '#7a5335', fontWeight: 600 }}>
                      Non-Fiction
                    </Typography>
                    <Typography variant="h4" sx={{ fontFamily: `'Playfair Display', serif`, color: '#2C2416', mb: 2 }}>
                      {detailTemplate === 'brand_manifesto'
                        ? 'Write your brand manifesto as a story'
                        : detailTemplate === 'founder_story'
                          ? 'Tell your founder story with narrative depth'
                          : detailTemplate === 'customer_story'
                            ? 'Turn customer wins into case-study stories'
                            : 'Turn your brand and product into a story campaign'}
                    </Typography>
                    <Typography variant="body1" sx={{ color: '#3f3224', lineHeight: 1.8 }}>
                      {detailTemplate
                        ? detailTemplate === 'product_story'
                          ? 'Weave your product features, benefits, and proof points into a narrative that audiences remember.'
                          : detailTemplate === 'brand_manifesto'
                            ? 'Articulate what you stand for, the change you want to see, and invite your audience into that story.'
                            : detailTemplate === 'founder_story'
                              ? 'Share the journey, struggles, and insights that led to creating your product or company.'
                              : 'Showcase real customers, their problems, and the transformation your product enabled.'
                        : 'Begin with a book-inspired canvas. Alwrity assembles personas, settings, tones, and campaign story beats so you can focus on the narrative, not forms.'}
                    </Typography>

                    {!detailTemplate && (
                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 3 }}>
                        {[
                          { label: 'Product Story', template: 'product_story' as NonFictionTemplate },
                          { label: 'Brand Manifesto', template: 'brand_manifesto' as NonFictionTemplate },
                          { label: 'Founder Story', template: 'founder_story' as NonFictionTemplate },
                          { label: 'Customer Story', template: 'customer_story' as NonFictionTemplate },
                        ].map(({ label, template }) => (
                          <Box
                            key={template}
                            sx={{
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'space-between',
                              p: 1.1,
                              borderRadius: 3,
                              border: '1px solid rgba(68, 64, 60, 0.38)',
                              bgcolor: 'rgba(255,255,255,0.92)',
                              cursor: 'pointer',
                              boxShadow: '0 3px 0 rgba(68,64,60,0.25)',
                              transition: 'transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease',
                              '&:hover': {
                                transform: 'translateY(-1px) rotate(-0.3deg)',
                                boxShadow: '0 5px 0 rgba(68,64,60,0.35)',
                                bgcolor: 'rgba(255,252,245,0.98)',
                              },
                              '&:hover .know-more-btn': {
                                opacity: 1,
                                transform: 'translateY(0)',
                              },
                            }}
                            onClick={() => {
                              if (onSelectPath) onSelectPath('marketing', template);
                            }}
                          >
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
                              <Box
                                sx={{
                                  width: 20,
                                  height: 20,
                                  borderRadius: '4px',
                                  border: '2px solid #3f3224',
                                  position: 'relative',
                                  background:
                                    'linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(248,244,235,0.9) 100%)',
                                  boxShadow: '0 2px 0 rgba(63,50,36,0.45)',
                                  transform: 'rotate(-4deg)',
                                  mr: 0.5,
                                  '&::after': {
                                    content: '""',
                                    position: 'absolute',
                                    inset: '3px 4px 4px 4px',
                                    borderLeft: '2px solid #3f3224',
                                    borderBottom: '2px solid #3f3224',
                                    transform: 'rotate(-28deg)',
                                    opacity: 1,
                                  },
                                }}
                              />
                              <Typography
                                variant="body2"
                                sx={{
                                  color: '#3f3224',
                                  fontWeight: 600,
                                  fontFamily: `'Playfair Display', serif`,
                                }}
                              >
                                {label}
                              </Typography>
                              <Box
                                sx={{
                                  flex: 1,
                                  borderBottom: '1px solid rgba(63, 50, 36, 0.6)',
                                  ml: 1,
                                  mr: 2,
                                  transform: 'skewX(-7deg)',
                                  opacity: 0.9,
                                }}
                              />
                            </Box>
                            <Box
                              className="know-more-btn"
                              sx={{
                                fontSize: 11,
                                textTransform: 'none',
                                color: '#7a5335',
                                px: 1.5,
                                py: 0.4,
                                borderRadius: '999px',
                                border: '1px dashed rgba(122,83,53,0.7)',
                                backgroundColor: 'rgba(255, 248, 240, 0.95)',
                                boxShadow: '0 1px 0 rgba(122,83,53,0.3)',
                                opacity: 0,
                                transform: 'translateY(4px)',
                                transition: 'opacity 0.12s ease, transform 0.12s ease',
                              }}
                              onClick={(e) => {
                                e.stopPropagation();
                                setDetailTemplate(template);
                              }}
                            >
                              Know more
                            </Box>
                          </Box>
                        ))}
                      </Box>
                    )}

                    <Box
                      sx={{
                        mt: 4,
                        pt: 2,
                        borderTop: '1px dashed rgba(120, 90, 60, 0.5)',
                      }}
                    >
                      <Typography
                        variant="caption"
                        sx={{
                          letterSpacing: 2,
                          textTransform: 'uppercase',
                          color: '#8b5a2b',
                          fontWeight: 600,
                        }}
                      >
                        Notes
                      </Typography>
                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 1 }}>
                        {(!detailTemplate || detailTemplate === 'product_story') && [
                          'Product launch or feature stories grounded in your real context',
                          'Scene-by-scene descriptions ready for blogs, landing pages, and videos',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'brand_manifesto' && [
                          'Clarify mission, beliefs, and promises in narrative form',
                          'Create a reusable manifesto that powers campaigns and website copy',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'founder_story' && [
                          'Highlight pivotal moments that shaped the product',
                          'Humanize your brand for decks, about pages, and podcasts',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'customer_story' && [
                          'Narrative case studies structured as before/after transformations',
                          'Adaptable arcs for blog posts, sales decks, and videos',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                        {!detailTemplate && [
                          'Product, brand, and customer stories grounded in your real context',
                          'Guided tone, POV, rating, and length controls for campaigns',
                          'Scene-by-scene descriptions ready for blogs, videos, and podcasts',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                      </Box>
                    </Box>
                  </>
                ) : (
                  <>
                    <Typography variant="overline" sx={{ letterSpacing: 6, color: '#7a5335', fontWeight: 600 }}>
                      Story Type
                    </Typography>
                    <Typography
                      variant="h4"
                      sx={{ fontFamily: `'Playfair Display', serif`, color: '#2C2416', mb: 2, maxWidth: 520 }}
                    >
                      Choose a fiction template on the right to see how it behaves
                    </Typography>
                    <Typography variant="body1" sx={{ color: '#3f3224', lineHeight: 1.8 }}>
                      When you click a template on the right page, both pages update with how that mode works, where to
                      use it, and example prompts you can try.
                    </Typography>
                  </>
                )}
              </MotionBox>

              <MotionBox
                custom={1}
                variants={rightPageVariants}
                initial="enter"
                animate="center"
                exit="exit"
                sx={{
                  flex: 1,
                  p: { xs: 4, md: 6 },
                  background: 'linear-gradient(260deg, rgba(255,255,255,0.9) 0%, rgba(243,226,206,0.95) 100%)',
                  display: 'flex',
                  flexDirection: 'column',
                  position: 'relative',
                }}
              >
                {isDetailView && isFictionDetail(detailTemplate) && (
                  <>
                    <Typography variant="overline" sx={{ letterSpacing: 6, color: '#7a5335', fontWeight: 600 }}>
                      Fiction Template
                    </Typography>
                    <Typography variant="h4" sx={{ fontFamily: `'Playfair Display', serif`, color: '#2C2416', mb: 2 }}>
                      {detailTemplate === 'anime_fiction'
                        ? 'Anime fiction: visual, dramatic story worlds'
                        : detailTemplate === 'short_fiction'
                          ? 'Short fiction: complete arcs in one sitting'
                          : detailTemplate === 'long_fiction'
                            ? 'Long fiction: chapters and evolving arcs'
                            : 'Experimental fiction: break the usual patterns'}
                    </Typography>
                    <Typography variant="body1" sx={{ color: '#3f3224', lineHeight: 1.8, mb: 3 }}>
                      {detailTemplate === 'anime_fiction'
                        ? 'Combine scene-wise images, narration, and cinematic pacing to create anime-inspired story videos and scripts.'
                        : detailTemplate === 'short_fiction'
                          ? 'Perfect for newsletter shorts, bedtime stories, or snackable IP that can later expand into campaigns.'
                          : detailTemplate === 'long_fiction'
                            ? 'Plan multi-chapter narratives with recurring characters, locations, and themes.'
                            : 'Explore unusual structures, mixed formats, and playful styles that do not fit typical genres.'}
                    </Typography>

                    <Box
                      sx={{
                        mt: 2.5,
                        pt: 2,
                        borderTop: '1px dashed rgba(120, 90, 60, 0.4)',
                      }}
                    >
                      <Typography
                        variant="caption"
                        sx={{
                          letterSpacing: 2.5,
                          textTransform: 'uppercase',
                          color: '#7c4a1f',
                          fontWeight: 600,
                        }}
                      >
                        Notes
                      </Typography>
                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 1 }}>
                        {detailTemplate === 'anime_fiction' && [
                          'Design scenes with anime-style visual prompts and pacing',
                          'Use narration and music to match emotional beats',
                          'Export outlines to Video Studio for advanced anime-style videos',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#4b3320' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'short_fiction' && [
                          'Generate tightly scoped stories with clear beginnings and endings',
                          'Reuse the same world across multiple shorts and channels',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#4b3320' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'long_fiction' && [
                          'Structure chapters, arcs, and recurring motifs',
                          'Turn long-form IP into a sequence of videos or podcasts',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#4b3320' }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'experimental_fiction' && [
                          'Blend formats: letters, logs, transcripts, inner monologues',
                          'Prototype unusual concept stories quickly before committing to full production',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#4b3320' }}>
                            • {item}
                          </Typography>
                        ))}
                      </Box>
                    </Box>

                    <Box sx={{ mt: 3 }}>
                      <Typography variant="subtitle2" sx={{ color: '#2C2416', mb: 1 }}>
                        See demos and example prompts:
                      </Typography>
                      {detailTemplate === 'anime_fiction' && [
                        '“Storyboard 8 anime-style shots for a hero vs. rival training arc I can send to Video Studio.”',
                        '“Give me key visual prompts for Image Studio to match each anime scene in this outline.”',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'short_fiction' && [
                        '“Outline three self-contained short stories set in the same world for newsletter issues.”',
                        '“Turn this short story into a 45-second narrated video concept for Video Studio.”',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'long_fiction' && [
                        '“Plan a 6-episode arc for this story, with one strong cliffhanger per episode.”',
                        '“List hero, villain, and location prompts I can reuse in Image Studio across the series.”',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'experimental_fiction' && [
                        '“Design an experimental story that alternates chat logs, diary pages, and internal narration.”',
                        '“Suggest three unusual thumbnail concepts for Image Studio that fit this experimental format.”',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'experimental_fiction' && (
                        <Box sx={{ mt: 2 }}>
                          <Typography variant="caption" sx={{ color: '#7a5335', fontWeight: 600, mb: 0.5 }}>
                            Image example from Brand Avatar presets
                          </Typography>
                          <Box
                            sx={{
                              mt: 0.5,
                              display: 'flex',
                              gap: 1.5,
                              alignItems: 'center',
                            }}
                          >
                            <Box
                              component="img"
                              src="/assets/examples/artistic_portrait.png"
                              alt="Artistic portrait avatar example"
                              loading="lazy"
                              sx={{
                                width: 72,
                                height: 72,
                                borderRadius: '50%',
                                objectFit: 'cover',
                                boxShadow: '0 6px 14px rgba(15,23,42,0.25)',
                                border: '1px solid rgba(15, 23, 42, 0.22)',
                              }}
                            />
                            <Typography variant="caption" sx={{ color: '#5D4037' }}>
                              Use experimental stories with artistic avatars like this to create unusual thumbnails,
                              cover art, or in-book character sketches.
                            </Typography>
                          </Box>
                        </Box>
                      )}
                      {detailTemplate === 'anime_fiction' && (
                        <Box sx={{ mt: 2 }}>
                          <Typography variant="caption" sx={{ color: '#7a5335', fontWeight: 600, mb: 0.5 }}>
                            Example from Product Video Studio
                          </Typography>
                          <Box
                            sx={{
                              mt: 0.5,
                              borderRadius: 2,
                              overflow: 'hidden',
                              border: '1px solid rgba(15, 23, 42, 0.18)',
                              maxWidth: 260,
                              boxShadow: '0 6px 14px rgba(15,23,42,0.25)',
                            }}
                          >
                            <OptimizedVideo
                              src="/videos/text-video-voiceover.mp4"
                              alt="Anime-style motion example"
                              controls={false}
                              muted
                              loop
                              preload="metadata"
                              sx={{
                                height: 140,
                                borderRadius: 2,
                              }}
                            />
                          </Box>
                        </Box>
                      )}
                    </Box>
                  </>
                )}

                {isDetailView && isNonFictionDetail(detailTemplate) && (
                  <>
                    <Typography variant="overline" sx={{ letterSpacing: 6, color: '#7a5335', fontWeight: 600 }}>
                      Campaign Ideas
                    </Typography>
                    <Typography variant="h5" sx={{ fontFamily: `'Playfair Display', serif`, color: '#2C2416', mb: 2 }}>
                      How this template can show up across your channels
                    </Typography>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2 }}>
                      {detailTemplate === 'product_story' && [
                        'Launch emails, landing pages, and feature explainer videos',
                        'Sequenced social posts that follow a single product arc',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'brand_manifesto' && [
                        'Homepage hero copy and about pages',
                        'Investor decks and brand announcement posts',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'founder_story' && [
                        'Podcast-style scripts and keynote outlines',
                        'Behind-the-scenes videos and newsletter essays',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                          • {item}
                        </Typography>
                      ))}
                      {detailTemplate === 'customer_story' && [
                        'Narrative case-study blogs and sales deck stories',
                        'Short clips highlighting quotes and turning points',
                      ].map((item) => (
                        <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                          • {item}
                        </Typography>
                      ))}
                    </Box>
                    <Box
                      sx={{
                        mt: 3,
                        pt: 2,
                        borderTop: '1px dashed rgba(120, 90, 60, 0.4)',
                      }}
                    >
                      <Typography
                        variant="caption"
                        sx={{
                          letterSpacing: 2.5,
                          textTransform: 'uppercase',
                          color: '#7c4a1f',
                          fontWeight: 600,
                        }}
                      >
                        Notes
                      </Typography>
                      <Typography variant="body2" sx={{ color: '#4b3320', mt: 1 }}>
                        Use this template as the backbone of a campaign, then reuse its beats in Story Studio’s outline,
                        Image Studio visuals, and Product Video Studio demos.
                      </Typography>
                      <Box sx={{ mt: 1.5 }}>
                        <Typography variant="subtitle2" sx={{ color: '#2C2416', mb: 0.5 }}>
                          See demos and example prompts:
                        </Typography>
                        {detailTemplate === 'product_story' && [
                          '“Write a launch story for my product that finishes with a clear CTA to watch a demo video.”',
                          '“Turn this outline into a 30-second product demo script suitable for Product Video Studio.”',
                          '“Suggest three hero image prompts for Image Studio that match the opening scene.”',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'brand_manifesto' && [
                          '“Draft a three-part brand manifesto that we can reuse on homepage, deck, and launch video.”',
                          '“Condense this manifesto into a 45-second narration script for Product Video Studio.”',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'founder_story' && [
                          '“Outline a podcast episode where the founder tells this story in three acts.”',
                          '“Propose three thumbnail image prompts in Image Studio capturing the founder’s turning point.”',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'customer_story' && [
                          '“Write a narrative case study with before/after metrics that fits a landing page section.”',
                          '“Create a 60-second testimonial video script based on this customer story.”',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037', mb: 0.5 }}>
                            • {item}
                          </Typography>
                        ))}
                        {detailTemplate === 'brand_manifesto' && (
                          <Box sx={{ mt: 2 }}>
                            <Typography variant="caption" sx={{ color: '#7a5335', fontWeight: 600, mb: 0.5 }}>
                              Image example from Brand Avatar presets
                            </Typography>
                            <Box
                              sx={{
                                mt: 0.5,
                                display: 'flex',
                                gap: 1.5,
                                alignItems: 'center',
                              }}
                            >
                              <Box
                                component="img"
                                src="/assets/examples/tech_visionary.png"
                                alt="Tech visionary brand avatar example"
                                loading="lazy"
                                sx={{
                                  width: 72,
                                  height: 72,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                  boxShadow: '0 6px 14px rgba(15,23,42,0.25)',
                                  border: '1px solid rgba(15, 23, 42, 0.22)',
                                }}
                              />
                              <Typography variant="caption" sx={{ color: '#5D4037' }}>
                                Reuse this kind of “tech visionary” avatar from Image Studio when you turn your manifesto
                                into homepage heroes, decks, and launch visuals.
                              </Typography>
                            </Box>
                          </Box>
                        )}
                        {detailTemplate === 'founder_story' && (
                          <Box sx={{ mt: 2 }}>
                            <Typography variant="caption" sx={{ color: '#7a5335', fontWeight: 600, mb: 0.5 }}>
                              Image example from Brand Avatar presets
                            </Typography>
                            <Box
                              sx={{
                                mt: 0.5,
                                display: 'flex',
                                gap: 1.5,
                                alignItems: 'center',
                              }}
                            >
                              <Box
                                component="img"
                                src="/assets/examples/professional_headshot.png"
                                alt="Professional headshot brand avatar example"
                                loading="lazy"
                                sx={{
                                  width: 72,
                                  height: 72,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                  boxShadow: '0 6px 14px rgba(15,23,42,0.25)',
                                  border: '1px solid rgba(15, 23, 42, 0.22)',
                                }}
                              />
                              <Typography variant="caption" sx={{ color: '#5D4037' }}>
                                A professional headshot like this works well for founder story landing pages, podcast
                                cover art, and keynote thumbnails.
                              </Typography>
                            </Box>
                          </Box>
                        )}
                        {detailTemplate === 'product_story' && (
                          <Box sx={{ mt: 2 }}>
                            <Typography variant="caption" sx={{ color: '#7a5335', fontWeight: 600, mb: 0.5 }}>
                              Example from Product Video Studio
                            </Typography>
                            <Box
                              sx={{
                                mt: 0.5,
                                display: 'flex',
                                gap: 1.5,
                                alignItems: 'center',
                              }}
                            >
                              <Box
                                sx={{
                                  borderRadius: 2,
                                  overflow: 'hidden',
                                  border: '1px solid rgba(15, 23, 42, 0.18)',
                                  width: 160,
                                  boxShadow: '0 6px 14px rgba(15,23,42,0.2)',
                                  flexShrink: 0,
                                }}
                              >
                                <OptimizedVideo
                                  src="/videos/text-video-voiceover.mp4"
                                  alt="Product demo video example"
                                  controls={false}
                                  muted
                                  loop
                                  preload="metadata"
                                  sx={{
                                    height: 100,
                                    borderRadius: 2,
                                  }}
                                />
                              </Box>
                              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                                <Typography variant="body2" sx={{ color: '#3f3224', fontWeight: 600 }}>
                                  Product demo clip
                                </Typography>
                                <Typography variant="caption" sx={{ color: '#5D4037' }}>
                                  The same WAN 2.5 Text-to-Video setup used in Product Video Studio, ideal for feature
                                  highlights and launch stories.
                                </Typography>
                              </Box>
                            </Box>
                          </Box>
                        )}
                      </Box>
                    </Box>
                  </>
                )}

                {!isDetailView && (
                  <>
                    <Typography variant="overline" sx={{ letterSpacing: 6, color: '#7a5335', fontWeight: 600 }}>
                      Fiction
                    </Typography>
                    <Typography variant="h4" sx={{ fontFamily: `'Playfair Display', serif`, color: '#2C2416', mb: 2 }}>
                      Illustrations, narration, and video for your fictional worlds
                    </Typography>
                    <Typography variant="body1" sx={{ color: '#3f3224', lineHeight: 1.8 }}>
                      Every scene can bloom into art, audio, and cinematic video. Choose the kind of fiction you want to
                      explore and let AI help you build it.
                    </Typography>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 3 }}>
                      {[
                        { label: 'Short Fiction', key: 'short_fiction' as FictionTemplate },
                        { label: 'Long Fiction', key: 'long_fiction' as FictionTemplate },
                        { label: 'Anime Fiction', key: 'anime_fiction' as FictionTemplate },
                        { label: 'Experimental', key: 'experimental_fiction' as FictionTemplate },
                      ].map(({ label, key }) => (
                        <Box
                          key={key}
                          sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            p: 1.1,
                            borderRadius: 3,
                            border: '1px solid rgba(68, 64, 60, 0.38)',
                            bgcolor: 'rgba(255,255,255,0.92)',
                            cursor: 'pointer',
                            boxShadow: '0 3px 0 rgba(68,64,60,0.25)',
                            transition: 'transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease',
                            '&:hover': {
                              transform: 'translateY(-1px) rotate(0.3deg)',
                              boxShadow: '0 5px 0 rgba(68,64,60,0.35)',
                              bgcolor: 'rgba(255,252,245,0.98)',
                            },
                            '&:hover .know-more-btn': {
                              opacity: 1,
                              transform: 'translateY(0)',
                            },
                          }}
                          onClick={() => {
                            if (onSelectPath) onSelectPath('pure', key);
                          }}
                        >
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
                            <Box
                              sx={{
                                width: 20,
                                height: 20,
                                borderRadius: '4px',
                                border: '2px solid #3f3224',
                                position: 'relative',
                                background:
                                  'linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(248,244,235,0.9) 100%)',
                                boxShadow: '0 2px 0 rgba(63,50,36,0.45)',
                                transform: 'rotate(3deg)',
                                mr: 0.5,
                                '&::after': {
                                  content: '""',
                                  position: 'absolute',
                                  inset: '3px 4px 4px 4px',
                                  borderLeft: '2px solid #3f3224',
                                  borderBottom: '2px solid #3f3224',
                                  transform: 'rotate(-24deg)',
                                  opacity: 1,
                                },
                              }}
                            />
                            <Typography
                              variant="body2"
                              sx={{
                                color: '#3f3224',
                                fontWeight: 600,
                                fontFamily: `'Playfair Display', serif`,
                              }}
                            >
                              {label}
                            </Typography>
                            <Box
                              sx={{
                                flex: 1,
                                borderBottom: '1px solid rgba(63, 50, 36, 0.6)',
                                ml: 1,
                                mr: 2,
                                transform: 'skewX(-5deg)',
                                opacity: 0.9,
                              }}
                            />
                          </Box>
                          <Box
                            className="know-more-btn"
                            sx={{
                              fontSize: 11,
                              textTransform: 'none',
                              color: '#7a5335',
                              px: 1.5,
                              py: 0.4,
                              borderRadius: '999px',
                              border: '1px dashed rgba(122,83,53,0.7)',
                              backgroundColor: 'rgba(255, 248, 240, 0.95)',
                              boxShadow: '0 1px 0 rgba(122,83,53,0.3)',
                              opacity: 0,
                              transform: 'translateY(4px)',
                              transition: 'opacity 0.12s ease, transform 0.12s ease',
                            }}
                            onClick={(e) => {
                              e.stopPropagation();
                              setDetailTemplate(key);
                            }}
                          >
                            Know more
                          </Box>
                        </Box>
                      ))}
                    </Box>

                    <Box
                      sx={{
                        mt: 4,
                        pt: 2,
                        borderTop: '1px dashed rgba(120, 90, 60, 0.5)',
                      }}
                    >
                      <Typography
                        variant="caption"
                        sx={{
                          letterSpacing: 2,
                          textTransform: 'uppercase',
                          color: '#8b5a2b',
                          fontWeight: 600,
                        }}
                      >
                        Notes
                      </Typography>
                      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 1 }}>
                        {[
                          'Short and long-form stories, from cozy to epic',
                          'Anime-inspired and experimental narrative styles',
                          'Scene-by-scene control over visuals, voices, and pacing',
                        ].map((item) => (
                          <Typography key={item} variant="body2" sx={{ color: '#5D4037' }}>
                            • {item}
                          </Typography>
                        ))}
                      </Box>
                    </Box>
                  </>
                )}
              </MotionBox>
            </MotionBox>
          </AnimatePresence>

          {isDetailView && (
            <Box
              sx={{
                position: 'absolute',
                top: 16,
                right: { xs: 20, md: 48 },
                width: 56,
                height: 72,
                background: 'linear-gradient(180deg, #fb923c 0%, #fed7aa 100%)',
                borderRadius: '6px 6px 10px 10px',
                boxShadow: '0 8px 14px rgba(0,0,0,0.3)',
                border: '1px solid rgba(124, 45, 18, 0.75)',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'flex-end',
                justifyContent: 'center',
                zIndex: 3,
                '&::after': {
                  content: '""',
                  position: 'absolute',
                  bottom: -8,
                  left: '50%',
                  transform: 'translateX(-50%)',
                  width: 0,
                  height: 0,
                  borderLeft: '8px solid transparent',
                  borderRight: '8px solid transparent',
                  borderTop: '8px solid #b45309',
                },
              }}
              onClick={() => setDetailTemplate(null)}
            >
              <Typography
                variant="caption"
                sx={{
                  color: '#1f2937',
                  fontWeight: 700,
                  textAlign: 'center',
                  px: 0.5,
                  pb: 0.6,
                  fontSize: 9,
                  textTransform: 'uppercase',
                  letterSpacing: 0.9,
                }}
              >
                Back
              </Typography>
            </Box>
          )}
        </Box>
      </Box>

      <Box sx={{ textAlign: 'center', mb: 5 }}>
        <Button
          variant="contained"
          size="large"
          startIcon={<AutoAwesomeIcon />}
          onClick={onStart}
          sx={{
            mb: 1,
            px: 5,
            py: 1.8,
            borderRadius: '999px',
            textTransform: 'none',
            fontWeight: 600,
            background: 'linear-gradient(135deg, #7F5AF0 0%, #2CB67D 100%)',
            boxShadow: '0 16px 32px rgba(127, 90, 240, 0.35)',
            '&:hover': {
              background: 'linear-gradient(135deg, #6c4cd4 0%, #24a26f 100%)',
              boxShadow: '0 18px 36px rgba(127, 90, 240, 0.4)',
            },
          }}
        >
          Let’s ALwrity Your Story Journey
        </Button>
          <Typography variant="body2" sx={{ color: '#5D4037' }}>
          Tap once to open the book. Inputs appear after AI drafts your campaign-ready foundation.
        </Typography>
      </Box>

      <Typography variant="h5" sx={{ fontWeight: 600, color: '#1A1611', mb: 2 }}>
        Everything Story Studio helps you create
      </Typography>
      <Grid container spacing={2}>
        {featureHighlights.map((feature) => (
          <Grid item xs={12} sm={6} md={3} key={feature.title}>
            <Paper
              elevation={0}
              sx={{
                height: '100%',
                p: 3,
                background: 'linear-gradient(180deg, #fff8ef 0%, #f8efe2 100%)',
                borderRadius: 3,
                border: '1px solid rgba(138, 85, 36, 0.18)',
                display: 'flex',
                flexDirection: 'column',
                gap: 1,
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                {feature.icon}
                <Typography variant="subtitle1" sx={{ fontWeight: 600, color: '#2C2416' }}>
                  {feature.title}
                </Typography>
              </Box>
              <Typography variant="body2" sx={{ color: '#5D4037' }}>
                {feature.description}
              </Typography>
              <Typography variant="caption" sx={{ color: '#7A5A3C' }}>
                {feature.detail}
              </Typography>
            </Paper>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default StoryWriterLanding;
