Add Navigation organism — responsive site header with mobile drawer

- Maps to Figma Main Nav (14:108) desktop + Mobile Header (2391:41508)
- Desktop: logo left, nav links right, optional CTA button
- Mobile: hamburger + drawer with nav items, CTA, and help footer
- Sticky header with warm surface background and border
- Composes AppBar, Link, IconButton, Button, Divider, Drawer
- 6 stories: Default, WithCTA, WithPageContent (sticky scroll demo),
  Minimal, ExtendedNavigation, MobilePriceTracker

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/organisms/Navigation/Navigation.stories.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Navigation } from './Navigation';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+// Placeholder logo — in production this would be an SVG or <img>
+const FALogo = () => (
+  <Typography
+    sx={{
+      fontFamily: '"Noto Serif SC", Georgia, serif',
+      fontWeight: 400,
+      fontSize: { xs: '1rem', md: '1.25rem' },
+      color: 'var(--fa-color-brand-900)',
+      letterSpacing: '-0.01em',
+      whiteSpace: 'nowrap',
+      userSelect: 'none',
+    }}
+  >
+    FuneralArranger
+  </Typography>
+);
+
+const defaultItems = [
+  { label: 'FAQ', href: '/faq' },
+  { label: 'Contact Us', href: '/contact' },
+  { label: 'Log in', href: '/login' },
+];
+
+const meta: Meta<typeof Navigation> = {
+  title: 'Organisms/Navigation',
+  component: Navigation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=14-108',
+    },
+  },
+  argTypes: {
+    ctaLabel: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+
+// ─── Default ────────────────────────────────────────────────────────────────
+
+/** Desktop — logo left, navigation links right */
+export const Default: Story = {
+  args: {
+    logo: <FALogo />,
+    items: defaultItems,
+  },
+};
+
+// ─── With CTA ───────────────────────────────────────────────────────────────
+
+/** Desktop with a primary call-to-action button */
+export const WithCTA: Story = {
+  args: {
+    logo: <FALogo />,
+    items: defaultItems,
+    ctaLabel: 'Start planning',
+    onCtaClick: () => alert('Navigate to arrangement flow'),
+  },
+};
+
+// ─── With Page Content ──────────────────────────────────────────────────────
+
+/** Full page layout — sticky header with scrollable content */
+export const WithPageContent: Story = {
+  render: () => (
+    <Box>
+      <Navigation
+        logo={<FALogo />}
+        items={defaultItems}
+        ctaLabel="Start planning"
+      />
+      <Box
+        sx={{
+          maxWidth: 'lg',
+          mx: 'auto',
+          px: { xs: 2, md: 4 },
+          py: 6,
+        }}
+      >
+        <Typography variant="h2" sx={{ mb: 3 }}>
+          Find a funeral director
+        </Typography>
+        <Typography variant="body1" color="text.secondary" sx={{ mb: 4, maxWidth: 600 }}>
+          Compare trusted funeral directors in your area. View services,
+          pricing, and reviews to find the right support for your family.
+        </Typography>
+        {Array.from({ length: 8 }).map((_, i) => (
+          <Box
+            key={i}
+            sx={{
+              p: 3,
+              mb: 2,
+              bgcolor: 'background.paper',
+              borderRadius: 1,
+              border: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="h6">Provider {i + 1}</Typography>
+            <Typography variant="body2" color="text.secondary">
+              Placeholder content to demonstrate scroll behaviour with sticky header.
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  ),
+};
+
+// ─── Minimal ────────────────────────────────────────────────────────────────
+
+/** Minimal — logo only, no navigation items */
+export const Minimal: Story = {
+  args: {
+    logo: <FALogo />,
+  },
+};
+
+// ─── Extended Navigation ────────────────────────────────────────────────────
+
+/** More nav items for arrangements flow context */
+export const ExtendedNavigation: Story = {
+  args: {
+    logo: <FALogo />,
+    items: [
+      { label: 'Directors', href: '/directors' },
+      { label: 'Venues', href: '/venues' },
+      { label: 'Pricing', href: '/pricing' },
+      { label: 'FAQ', href: '/faq' },
+      { label: 'Contact Us', href: '/contact' },
+      { label: 'Log in', href: '/login' },
+    ],
+    ctaLabel: 'Start planning',
+  },
+};
+
+// ─── Mobile Price Tracker ───────────────────────────────────────────────────
+
+/** Mobile with price tracker trailing content (resize browser to see) */
+export const MobilePriceTracker: Story = {
+  args: {
+    logo: <FALogo />,
+    items: defaultItems,
+    mobileTrailing: (
+      <Box
+        sx={{
+          bgcolor: 'background.paper',
+          px: 1.5,
+          py: 0.5,
+          borderRadius: '10px 0 0 10px',
+          boxShadow: '2px 2px 3px rgba(0,0,0,0.25)',
+          textAlign: 'right',
+        }}
+      >
+        <Typography variant="captionSm" sx={{ fontWeight: 600, display: 'block' }}>
+          Your plan
+        </Typography>
+        <Typography variant="label" sx={{ fontWeight: 600 }}>
+          $3,600
+        </Typography>
+      </Box>
+    ),
+  },
+};