import React from 'react';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
import StarIcon from '@mui/icons-material/Star';
import StarHalfIcon from '@mui/icons-material/StarHalf';
import StarBorderIcon from '@mui/icons-material/StarBorder';
import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
import { assetUrl } from '../../../utils/assetUrl';
import { Divider } from '../../atoms/Divider';
import { FuneralFinderV3, type FuneralFinderV3SearchParams } from '../../organisms/FuneralFinder';

// ─── Types ───────────────────────────────────────────────────────────────────

/** A partner logo for the trust carousel */
export interface PartnerLogo {
  src: string;
  alt: string;
}

/** A feature card in the "Why Use FA" section */
export interface FeatureCard {
  icon: React.ReactNode;
  heading: string;
  description: string;
}

/** A customer testimonial */
export interface Testimonial {
  name: string;
  rating: number;
  quote: string;
  timeAgo: string;
}

/** A frequently asked question */
export interface FAQItem {
  question: string;
  answer: React.ReactNode;
}

/** A trust stat for the stats bar */
export interface TrustStat {
  value: string;
  label: string;
}

/** A featured provider for the discover section */
export interface FeaturedProvider {
  id: string;
  name: string;
  location: string;
  verified?: boolean;
  imageUrl?: string;
  logoUrl?: string;
  rating?: number;
  reviewCount?: number;
  startingPrice?: number;
}

/** Props for the HomePage component */
export interface HomePageProps {
  /** Navigation bar */
  navigation?: React.ReactNode;
  /** Footer */
  footer?: React.ReactNode;

  /** Hero heading (serif display) */
  heroHeading?: string;
  /** Hero subheading paragraph */
  heroSubheading?: string;
  /** Hero image slot (split layout — V1) */
  heroImage?: React.ReactNode;
  /** Hero background image URL (full-bleed layout — V2). Takes priority over heroImage. */
  heroImageUrl?: string;

  /** Override the default FuneralFinder widget with a custom element */
  finderSlot?: React.ReactNode;
  /** FuneralFinder search callback (used when finderSlot is not provided) */
  onSearch?: (params: FuneralFinderV3SearchParams) => void;
  /** FuneralFinder loading state (used when finderSlot is not provided) */
  searchLoading?: boolean;

  /** Trust stats bar (e.g. "1,500+ families helped") */
  stats?: TrustStat[];

  /** Partner logos for the trust carousel */
  partnerLogos?: PartnerLogo[];
  /** Trust line text above the carousel */
  partnerTrustLine?: string;

  /** Featured providers for the "Discover" section */
  featuredProviders?: FeaturedProvider[];
  /** Map slot for the discover section */
  discoverMapSlot?: React.ReactNode;
  /** Callback when a featured provider card is clicked */
  onSelectFeaturedProvider?: (id: string) => void;

  /** Feature cards for "Why Use FA" */
  features?: FeatureCard[];
  /** Features section heading */
  featuresHeading?: string;
  /** Features section body text */
  featuresBody?: string;

  /** Aggregate Google rating */
  googleRating?: number;
  /** Total Google review count */
  googleReviewCount?: number;
  /** Testimonial cards */
  testimonials?: Testimonial[];

  /** CTA banner heading */
  ctaHeading?: string;
  /** CTA button label */
  ctaButtonLabel?: string;
  /** CTA button click handler */
  onCtaClick?: () => void;

  /** FAQ items */
  faqItems?: FAQItem[];

  sx?: SxProps<Theme>;
}

// ─── Helpers ─────────────────────────────────────────────────────────────────

/** Renders 1–5 stars (filled, half, or empty) */
function StarRating({
  rating,
  size = 20,
  color,
}: {
  rating: number;
  size?: number;
  color?: string;
}) {
  const stars: React.ReactNode[] = [];
  const sx = { fontSize: size, color: color || 'var(--fa-color-brand-500)' };

  for (let i = 1; i <= 5; i++) {
    if (rating >= i) {
      stars.push(<StarIcon key={i} sx={sx} />);
    } else if (rating >= i - 0.5) {
      stars.push(<StarHalfIcon key={i} sx={sx} />);
    } else {
      stars.push(<StarBorderIcon key={i} sx={sx} />);
    }
  }

  return (
    <Box
      sx={{ display: 'inline-flex', gap: 0.25 }}
      aria-label={`${rating} out of 5 stars`}
      role="img"
    >
      {stars}
    </Box>
  );
}

// ─── Component ───────────────────────────────────────────────────────────────

export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
  (
    {
      navigation,
      footer,
      heroHeading = 'Compare Funeral Directors Near You and Arrange with Confidence',
      heroSubheading = "Funeral planning doesn't have to be overwhelming. Whether you're thinking ahead or arranging for a loved one, find trusted local providers with transparent pricing, all at your own pace.",
      heroImage,
      heroImageUrl,
      finderSlot,
      onSearch,
      searchLoading,
      partnerLogos = [],
      partnerTrustLine = 'Providing services from hundreds of trusted funeral homes across Australia',
      featuredProviders = [],
      discoverMapSlot,
      onSelectFeaturedProvider,
      features = [],
      featuresHeading = '4 Reasons to use Funeral Arranger',
      featuresBody,
      googleRating,
      googleReviewCount,
      testimonials = [],
      ctaHeading = 'We Are Here When You Need Us',
      ctaButtonLabel = 'Start planning',
      onCtaClick,
      faqItems = [],
      sx,
    },
    ref,
  ) => {
    const isFullBleedHero = !!heroImageUrl;

    return (
      <Box
        ref={ref}
        sx={[
          { minHeight: '100vh', display: 'flex', flexDirection: 'column' },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {/* ─── Navigation ─── */}
        {navigation}

        <Box component="main" id="main-content" sx={{ flex: 1 }}>
          {/* ═══════════════════════════════════════════════════════════════════
              Section 1: Hero
          ═══════════════════════════════════════════════════════════════════ */}
          {isFullBleedHero ? (
            /* ── V2: Full-bleed hero with text overlay ── */
            <Box
              component="section"
              aria-labelledby="hero-heading"
              sx={{
                position: 'relative',
                minHeight: { xs: 480, md: 640 },
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'flex-start',
                backgroundImage: `url(${heroImageUrl})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                '&::after': {
                  content: '""',
                  position: 'absolute',
                  inset: 0,
                  background:
                    'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%)',
                },
              }}
            >
              <Container
                maxWidth={false}
                sx={{
                  position: 'relative',
                  zIndex: 1,
                  textAlign: 'center',
                  maxWidth: 990,
                  pt: { xs: 10, md: 14 },
                  pb: { xs: 3, md: 4 },
                }}
              >
                <Typography
                  variant="body1"
                  sx={{
                    color: 'rgba(255,255,255,0.85)',
                    fontStyle: 'italic',
                    mb: 2,
                  }}
                >
                  Trusted by thousands of families across Australia
                </Typography>
                <Typography
                  variant="display2"
                  component="h1"
                  id="hero-heading"
                  tabIndex={-1}
                  sx={{ mb: 5, color: 'var(--fa-color-white)' }}
                >
                  {heroHeading}
                </Typography>
                <Typography
                  variant="body1"
                  sx={{ color: 'rgba(255,255,255,0.85)', maxWidth: 560, mx: 'auto' }}
                >
                  {heroSubheading}
                </Typography>
              </Container>

              {/* FuneralFinder — inside the hero, bottom portion overlaps into white */}
              <Box
                sx={{
                  position: 'relative',
                  zIndex: 2,
                  width: '100%',
                  px: { xs: 3, md: 2 },
                  pt: 6,
                  pb: 0,
                  mb: { xs: -14, md: -18 },
                }}
              >
                <Box sx={{ width: '100%', maxWidth: finderSlot ? 500 : 520, mx: 'auto' }}>
                  {finderSlot || <FuneralFinderV3 onSearch={onSearch} loading={searchLoading} />}
                </Box>
              </Box>
            </Box>
          ) : (
            /* ── V1: Split hero ── */
            <Box
              component="section"
              aria-labelledby="hero-heading"
              sx={{ bgcolor: 'var(--fa-color-surface-warm)', overflow: 'hidden' }}
            >
              <Container
                maxWidth="lg"
                sx={{
                  display: 'flex',
                  flexDirection: { xs: 'column', md: 'row' },
                  alignItems: 'center',
                  gap: { xs: 3, md: 0 },
                  py: { xs: 4, md: 0 },
                }}
              >
                <Box
                  sx={{
                    flex: { md: '0 0 50%' },
                    py: { md: 6 },
                    pr: { md: 5 },
                    textAlign: { xs: 'center', md: 'left' },
                  }}
                >
                  <Typography
                    variant="display2"
                    component="h1"
                    id="hero-heading"
                    tabIndex={-1}
                    sx={{ mb: 2, color: 'text.primary' }}
                  >
                    {heroHeading}
                  </Typography>
                  <Typography variant="body1" color="text.secondary">
                    {heroSubheading}
                  </Typography>
                </Box>
                <Box
                  role="img"
                  aria-label="Family planning together"
                  sx={{
                    flex: { md: '0 0 50%' },
                    minHeight: { xs: 200, md: 320 },
                    position: 'relative',
                    overflow: 'hidden',
                    borderRadius: { xs: 'var(--fa-border-radius-lg)', md: 0 },
                  }}
                >
                  {heroImage || (
                    <Box
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 'inherit',
                        background:
                          'linear-gradient(160deg, var(--fa-color-brand-100) 0%, var(--fa-color-brand-200) 50%, var(--fa-color-brand-300) 100%)',
                      }}
                    />
                  )}
                </Box>
              </Container>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 2: FuneralFinder Widget (V1 only — overlapping card)
              V2 renders the finder inside the hero section above.
          ═══════════════════════════════════════════════════════════════════ */}
          {!isFullBleedHero && (
            <Box
              sx={{
                position: 'relative',
                zIndex: 1,
                mt: { xs: -4, md: -6 },
                px: 2,
              }}
            >
              <Box sx={{ maxWidth: 620, mx: 'auto' }}>
                {finderSlot || <FuneralFinderV3 onSearch={onSearch} loading={searchLoading} />}
              </Box>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 2b: Partner Logos Carousel
          ═══════════════════════════════════════════════════════════════════ */}
          {partnerLogos.length > 0 && (
            <Box
              component="section"
              aria-labelledby="partners-heading"
              sx={{
                bgcolor: 'var(--fa-color-surface-default)',
                borderBottom: '1px solid #ebe0d4',
                pt: { xs: 22, md: 28 },
                pb: { xs: 10, md: 14 },
              }}
            >
              <Container maxWidth="lg">
                <Typography
                  variant="overline"
                  component="h2"
                  id="partners-heading"
                  sx={{
                    textAlign: 'center',
                    color: 'var(--fa-color-brand-600)',
                    mb: { xs: 6, md: 10 },
                  }}
                >
                  {partnerTrustLine}
                </Typography>
              </Container>

              {/* Carousel track */}
              <Box
                role="presentation"
                sx={{
                  overflow: 'hidden',
                  position: 'relative',
                  '&::before, &::after': {
                    content: '""',
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    width: 80,
                    zIndex: 1,
                    pointerEvents: 'none',
                  },
                  '&::before': {
                    left: 0,
                    background: 'linear-gradient(to right, #fff, transparent)',
                  },
                  '&::after': {
                    right: 0,
                    background: 'linear-gradient(to left, #fff, transparent)',
                  },
                }}
              >
                <Box
                  aria-label="Partner funeral directors"
                  sx={{
                    display: 'flex',
                    gap: { xs: 8, md: 12 },
                    alignItems: 'center',
                    width: 'max-content',
                    animation: 'logoScroll 35s linear infinite',
                    '@keyframes logoScroll': {
                      '0%': { transform: 'translateX(0)' },
                      '100%': { transform: 'translateX(-50%)' },
                    },
                    '&:hover': { animationPlayState: 'paused' },
                    '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
                  }}
                >
                  {[...partnerLogos, ...partnerLogos].map((logo, i) => (
                    <Box
                      key={`${logo.alt}-${i}`}
                      component="img"
                      src={logo.src}
                      alt={i < partnerLogos.length ? logo.alt : ''}
                      aria-hidden={i >= partnerLogos.length ? true : undefined}
                      sx={{
                        height: { xs: 46, md: 55 },
                        maxWidth: { xs: 140, md: 184 },
                        width: 'auto',
                        objectFit: 'contain',
                        filter: 'grayscale(100%) brightness(1.2)',
                        opacity: 0.4,
                        flexShrink: 0,
                      }}
                    />
                  ))}
                </Box>
              </Box>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 2c: Discover — Map + Featured Providers
          ═══════════════════════════════════════════════════════════════════ */}
          {featuredProviders.length > 0 && (
            <Box
              component="section"
              aria-labelledby="discover-heading"
              sx={{
                bgcolor: '#fdfbf9',
                pt: { xs: 10, md: 14 },
                pb: { xs: 10, md: 14 },
              }}
            >
              <Container maxWidth="lg">
                <Box sx={{ textAlign: 'center', mb: { xs: 5, md: 8 } }}>
                  <Typography
                    variant="display3"
                    component="h2"
                    id="discover-heading"
                    sx={{ mb: 2, color: 'text.primary' }}
                  >
                    See what you'll discover
                  </Typography>
                  <Typography
                    variant="body1"
                    color="text.secondary"
                    sx={{ maxWidth: 520, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
                  >
                    From trusted local providers to personalised options, find the right care near
                    you.
                  </Typography>
                </Box>

                <Box
                  sx={{
                    display: 'grid',
                    gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
                    gap: 3,
                    alignItems: 'stretch',
                  }}
                >
                  {/* Map — fills the grid cell to match card stack height */}
                  <Box
                    sx={{
                      position: 'relative',
                      borderRadius: 2,
                      overflow: 'hidden',
                      minHeight: { xs: 240, md: 0 },
                      bgcolor: 'var(--fa-color-surface-cool)',
                      border: '1px solid',
                      borderColor: 'divider',
                      '& > img, & > div': {
                        position: { md: 'absolute' },
                        inset: { md: 0 },
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover',
                      },
                    }}
                  >
                    {discoverMapSlot || (
                      <Box
                        sx={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          height: '100%',
                        }}
                      >
                        <Typography variant="body2" color="text.secondary">
                          Map coming soon
                        </Typography>
                      </Box>
                    )}
                  </Box>

                  {/* Featured provider cards — compact for discover teaser */}
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    {featuredProviders.map((provider) => (
                      <ProviderCardCompact
                        key={provider.id}
                        name={provider.name}
                        location={provider.location}
                        imageUrl={provider.imageUrl}
                        rating={provider.rating}
                        reviewCount={provider.reviewCount}
                        onClick={
                          onSelectFeaturedProvider
                            ? () => onSelectFeaturedProvider(provider.id)
                            : undefined
                        }
                      />
                    ))}
                  </Box>
                </Box>

                {/* CTA */}
                <Box sx={{ textAlign: 'center', mt: 4 }}>
                  <Button variant="text" size="medium" onClick={onCtaClick}>
                    Start exploring
                  </Button>
                </Box>
              </Container>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 3b: Why Use FA — Text + Image
          ═══════════════════════════════════════════════════════════════════ */}
          <Box
            component="section"
            aria-labelledby="why-fa-heading"
            sx={{
              bgcolor: 'var(--fa-color-surface-default)',
              borderTop: '1px solid #f3efea',
              borderBottom: '1px solid #f3efea',
              py: { xs: 10, md: 14 },
            }}
          >
            <Container maxWidth="lg">
              <Box
                sx={{
                  display: 'grid',
                  gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
                  gap: { xs: 4, md: 8 },
                  alignItems: 'center',
                }}
              >
                {/* Text */}
                <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
                  <Typography
                    variant="overline"
                    component="div"
                    sx={{ color: 'var(--fa-color-brand-600)', mb: 1.5 }}
                  >
                    Why Use Funeral Arranger
                  </Typography>
                  <Typography
                    variant="display3"
                    component="h2"
                    id="why-fa-heading"
                    sx={{ mb: 2.5, color: 'text.primary' }}
                  >
                    Making an impossible time a little easier
                  </Typography>
                  <Typography
                    variant="body1"
                    color="text.secondary"
                    sx={{ fontSize: { xs: '0.875rem', md: '1rem' } }}
                  >
                    Funeral planning doesn&rsquo;t have to be overwhelming. Whether a loved one has
                    just passed, is imminent, or you&rsquo;re pre-planning the future for yourself.
                    Compare transparent pricing from local funeral directors. Explore the service
                    options, coffins and more to personalise a funeral plan in clear, easy steps.
                  </Typography>
                </Box>

                {/* Image */}
                <Box
                  sx={{
                    borderRadius: 'var(--fa-border-radius-lg, 12px)',
                    overflow: 'hidden',
                    '& img': {
                      width: '100%',
                      height: 'auto',
                      display: 'block',
                    },
                  }}
                >
                  <img
                    src={assetUrl('/images/Homepage/people.png')}
                    alt="Family planning together with care and confidence"
                  />
                </Box>
              </Box>
            </Container>
          </Box>

          {/* ═══════════════════════════════════════════════════════════════════
              Section 3c: What You Can Do Here — Three Feature Cards
          ═══════════════════════════════════════════════════════════════════ */}
          <Box
            component="section"
            aria-labelledby="what-you-can-do-heading"
            sx={{
              bgcolor: '#f8f5f1',
              py: { xs: 10, md: 14 },
            }}
          >
            <Container maxWidth="lg">
              <Box sx={{ textAlign: 'center', mb: { xs: 5, md: 8 } }}>
                <Typography
                  variant="overline"
                  component="div"
                  sx={{ color: 'var(--fa-color-brand-600)', mb: 1.5 }}
                >
                  What You Can Do Here
                </Typography>
                <Typography
                  variant="display3"
                  component="h2"
                  id="what-you-can-do-heading"
                  sx={{ color: 'text.primary' }}
                >
                  Three ways we can help you today
                </Typography>
              </Box>

              <Box
                sx={{
                  display: 'grid',
                  gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' },
                  gap: { xs: 3, md: 4 },
                }}
              >
                {/* Card 1: Compare pricing */}
                <Box
                  sx={{
                    bgcolor: 'var(--fa-color-surface-default)',
                    borderRadius: 'var(--fa-card-border-radius-default, 8px)',
                    boxShadow: 'var(--fa-shadow-md)',
                    overflow: 'hidden',
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <Box
                    sx={{
                      height: 200,
                      background:
                        'linear-gradient(135deg, var(--fa-color-brand-100) 0%, var(--fa-color-brand-200) 100%)',
                    }}
                  />
                  <Box sx={{ p: 3, flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <Typography variant="h5" component="h3" sx={{ mb: 1.5, color: 'text.primary' }}>
                      Compare pricing
                    </Typography>
                    <Typography variant="body2" color="text.secondary" sx={{ mb: 3, flex: 1 }}>
                      See verified, itemised prices from multiple funeral directors in your area
                      side by side.
                    </Typography>
                    <Button variant="outlined" size="medium" fullWidth>
                      Compare prices in my area
                    </Button>
                  </Box>
                </Box>

                {/* Card 2: Find a funeral director */}
                <Box
                  sx={{
                    bgcolor: 'var(--fa-color-surface-default)',
                    borderRadius: 'var(--fa-card-border-radius-default, 8px)',
                    boxShadow: 'var(--fa-shadow-md)',
                    overflow: 'hidden',
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <Box
                    sx={{
                      height: 200,
                      background:
                        'linear-gradient(135deg, var(--fa-color-sage-100, #E8EDEF) 0%, var(--fa-color-sage-200, #D0D8DD) 100%)',
                    }}
                  />
                  <Box sx={{ p: 3, flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <Typography variant="h5" component="h3" sx={{ mb: 1.5, color: 'text.primary' }}>
                      Find a funeral director
                    </Typography>
                    <Typography variant="body2" color="text.secondary" sx={{ mb: 3, flex: 1 }}>
                      Browse rated, reviewed directors near you with profiles, photos, and contact
                      details.
                    </Typography>
                    <Button variant="outlined" size="medium" fullWidth>
                      Search near me
                    </Button>
                  </Box>
                </Box>

                {/* Card 3: Arrange a funeral */}
                <Box
                  sx={{
                    bgcolor: 'var(--fa-color-surface-default)',
                    borderRadius: 'var(--fa-card-border-radius-default, 8px)',
                    boxShadow: 'var(--fa-shadow-md)',
                    overflow: 'hidden',
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <Box
                    sx={{
                      height: 200,
                      background:
                        'linear-gradient(135deg, var(--fa-color-neutral-100) 0%, var(--fa-color-neutral-200) 100%)',
                    }}
                  />
                  <Box sx={{ p: 3, flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <Typography variant="h5" component="h3" sx={{ mb: 1.5, color: 'text.primary' }}>
                      Arrange a funeral
                    </Typography>
                    <Typography variant="body2" color="text.secondary" sx={{ mb: 3, flex: 1 }}>
                      Build a fully customised quote &mdash; choose coffin, flowers, transport,
                      venue, and more.
                    </Typography>
                    <Button variant="outlined" size="medium" fullWidth>
                      Start building your quote
                    </Button>
                  </Box>
                </Box>
              </Box>
            </Container>
          </Box>

          {/* ═══════════════════════════════════════════════════════════════════
              Section 4: Why Use Funeral Arranger (Features)
          ═══════════════════════════════════════════════════════════════════ */}
          {features.length > 0 && (
            <Box
              component="section"
              aria-labelledby="features-heading"
              sx={{
                bgcolor: 'var(--fa-color-surface-default)',
                py: { xs: 10, md: 14 },
              }}
            >
              <Container maxWidth="lg">
                <Box sx={{ textAlign: 'center', mb: { xs: 5, md: 8 } }}>
                  <Typography
                    variant="overline"
                    component="div"
                    sx={{ color: 'var(--fa-color-brand-600)', mb: 1.5 }}
                  >
                    Why Use Funeral Arranger
                  </Typography>
                  <Typography
                    variant="display3"
                    component="h2"
                    id="features-heading"
                    sx={{ mb: featuresBody ? 2.5 : 0, color: 'text.primary' }}
                  >
                    {featuresHeading}
                  </Typography>
                  {featuresBody && (
                    <Typography
                      variant="body1"
                      color="text.secondary"
                      sx={{ maxWidth: 560, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
                    >
                      {featuresBody}
                    </Typography>
                  )}
                </Box>

                <Box
                  sx={{
                    display: 'grid',
                    gridTemplateColumns: {
                      xs: '1fr',
                      sm: 'repeat(2, 1fr)',
                      md: 'repeat(4, 1fr)',
                    },
                    gap: { xs: 4, md: 5 },
                  }}
                >
                  {features.map((feature) => (
                    <Box key={feature.heading} sx={{ textAlign: 'center' }}>
                      <Box
                        sx={{
                          mb: 2,
                          color: 'primary.main',
                          '& svg': { fontSize: 32 },
                        }}
                      >
                        {feature.icon}
                      </Box>
                      <Typography variant="h6" component="h3" sx={{ mb: 1, color: 'text.primary' }}>
                        {feature.heading}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {feature.description}
                      </Typography>
                    </Box>
                  ))}
                </Box>
              </Container>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 5: Testimonials
          ═══════════════════════════════════════════════════════════════════ */}
          {testimonials.length > 0 && (
            <Box
              component="section"
              aria-labelledby="reviews-heading"
              sx={{
                py: { xs: 10, md: 14 },
                bgcolor: '#f8f5f1',
              }}
            >
              <Container maxWidth="md">
                <Typography
                  variant="overline"
                  component="div"
                  sx={{
                    textAlign: 'center',
                    color: 'var(--fa-color-brand-600)',
                    mb: 1.5,
                  }}
                >
                  Funeral Arranger Reviews
                </Typography>
                <Typography
                  variant="display3"
                  component="h2"
                  id="reviews-heading"
                  sx={{ textAlign: 'center', mb: 1, color: 'text.primary' }}
                >
                  What families are saying
                </Typography>

                {googleRating != null && (
                  <Box sx={{ textAlign: 'center', mb: { xs: 4, md: 6 } }}>
                    <Box
                      sx={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 1,
                        mt: 1,
                      }}
                    >
                      <StarRating rating={googleRating} size={16} />
                      <Typography variant="body2" color="text.secondary">
                        {googleRating} Google Rating
                        {googleReviewCount
                          ? ` · ${googleReviewCount.toLocaleString('en-AU')} reviews`
                          : ''}
                      </Typography>
                    </Box>
                  </Box>
                )}

                {/* Editorial testimonials — left-aligned with dividers */}
                <Box
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 0,
                    maxWidth: 560,
                    mx: 'auto',
                  }}
                >
                  {testimonials.map((t, i) => {
                    return (
                      <React.Fragment key={`${t.name}-${i}`}>
                        {i > 0 && <Divider sx={{ my: 4 }} />}
                        <Box
                          sx={{
                            textAlign: 'left',
                          }}
                        >
                          <FormatQuoteIcon
                            sx={{
                              fontSize: 32,
                              color: 'var(--fa-color-brand-300)',
                              mb: 1,
                            }}
                          />
                          <Typography
                            variant="h5"
                            component="blockquote"
                            sx={{ mb: 2, fontWeight: 400 }}
                          >
                            {t.quote}
                          </Typography>
                          <Typography
                            variant="label"
                            component="cite"
                            sx={{ fontStyle: 'normal', display: 'block', mb: 0.5 }}
                          >
                            {t.name}
                          </Typography>
                          <Box
                            sx={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: 1,
                            }}
                          >
                            <StarRating rating={t.rating} size={12} />
                            <Typography variant="caption" color="text.secondary">
                              · {t.timeAgo}
                            </Typography>
                          </Box>
                        </Box>
                      </React.Fragment>
                    );
                  })}
                </Box>
              </Container>
            </Box>
          )}

          {/* ═══════════════════════════════════════════════════════════════════
              Section 6: CTA Banner
          ═══════════════════════════════════════════════════════════════════ */}
          <Box
            component="section"
            aria-labelledby="cta-heading"
            sx={{
              background:
                'linear-gradient(180deg, var(--fa-color-brand-100, #F5EDE4) 0%, var(--fa-color-surface-warm, #FEF9F5) 100%)',
              py: { xs: 10, md: 14 },
            }}
          >
            <Container maxWidth="md" sx={{ textAlign: 'center' }}>
              <Typography
                variant="display3"
                component="h2"
                id="cta-heading"
                sx={{ mb: 3, color: 'text.primary', whiteSpace: { md: 'nowrap' } }}
              >
                {ctaHeading}
              </Typography>
              <Button variant="contained" size="medium" onClick={onCtaClick}>
                {ctaButtonLabel}
              </Button>
            </Container>
          </Box>

          {/* ═══════════════════════════════════════════════════════════════════
              Section 7: FAQ
          ═══════════════════════════════════════════════════════════════════ */}
          {faqItems.length > 0 && (
            <Box
              component="section"
              aria-labelledby="faq-heading"
              sx={{
                bgcolor: 'var(--fa-color-surface-default)',
                py: { xs: 10, md: 14 },
              }}
            >
              <Container maxWidth="lg">
                <Typography
                  variant="display3"
                  component="h2"
                  id="faq-heading"
                  sx={{ textAlign: 'center', mb: { xs: 5, md: 8 }, color: 'text.primary' }}
                >
                  Frequently Asked Questions
                </Typography>

                <Box sx={{ maxWidth: 700, mx: 'auto' }}>
                  {faqItems.map((item, i) => (
                    <Accordion
                      key={i}
                      disableGutters
                      elevation={0}
                      sx={{
                        bgcolor: 'transparent',
                        borderBottom: '1px solid',
                        borderColor: 'divider',
                        '&:before': { display: 'none' },
                        '&:first-of-type': {
                          borderTop: '1px solid',
                          borderColor: 'divider',
                        },
                      }}
                    >
                      <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0, py: 1.5 }}>
                        <Typography
                          variant="body1"
                          sx={{
                            fontWeight: 500,
                            fontSize: { xs: '0.875rem', md: '1rem' },
                          }}
                        >
                          {item.question}
                        </Typography>
                      </AccordionSummary>
                      <AccordionDetails sx={{ px: 0, pb: 3 }}>
                        {typeof item.answer === 'string' ? (
                          <Typography variant="body2" color="text.secondary">
                            {item.answer}
                          </Typography>
                        ) : (
                          item.answer
                        )}
                      </AccordionDetails>
                    </Accordion>
                  ))}
                  <Box sx={{ textAlign: 'center', mt: 4 }}>
                    <Button variant="text" size="medium">
                      See more
                    </Button>
                  </Box>
                </Box>
              </Container>
            </Box>
          )}
        </Box>

        {/* ─── Footer ─── */}
        {footer}
      </Box>
    );
  },
);

HomePage.displayName = 'HomePage';
export default HomePage;
