IF.docs.md2html/src/components/MarkdownViewer.tsx

'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { useAdaptiveDuration } from '@/lib/useAdaptiveDuration';
import { parseMarkdown } from '@/lib/markdown-parser';
import { HeroSection } from './HeroSection';
import { MagazineContent } from './MagazineContent';

const webflowEase = [0.25, 0.46, 0.45, 0.94] as const;

interface MarkdownViewerProps {
  markdown: string;
  title: string;
  onReset: () => void;
}

export function MarkdownViewer({ markdown, title, onReset }: MarkdownViewerProps) {
  const shouldReduceMotion = useReducedMotion();
  const contentDuration = useAdaptiveDuration(0.8);

  const html = parseMarkdown(markdown);

  return (
    <div className="relative w-full min-h-screen">
      {/* Hero Section with ICW styling */}
      <HeroSection title={title} onReset={onReset} />

      {/* Magazine-style content */}
      <motion.section
        className="relative bg-white py-16 md:py-24"
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          duration: shouldReduceMotion ? 0 : contentDuration,
          delay: shouldReduceMotion ? 0 : 0.3,
          ease: webflowEase,
        }}
      >
        <MagazineContent html={html} />
      </motion.section>
    </div>
  );
}