Add MapPopup molecule — floating card for map pin click context

Compact provider/venue preview anchored to a MapPin. Image + name +
price + meta row + "View details" link. Downward nub connects to pin.
Drop-shadow filter for floating appearance. Verified badge inside image.

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

src/components/molecules/MapPopup/MapPopup.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Box from '@mui/material/Box';
+import { MapPopup } from './MapPopup';
+import { MapPin } from '../../atoms/MapPin';
+
+// Placeholder images
+const IMG_PROVIDER =
+  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=200&fit=crop&auto=format';
+const IMG_VENUE =
+  'https://images.unsplash.com/photo-1548625149-fc4a29cf7092?w=400&h=200&fit=crop&auto=format';
+
+const meta: Meta<typeof MapPopup> = {
+  title: 'Molecules/MapPopup',
+  component: MapPopup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'map',
+      values: [{ name: 'map', value: '#E5E3DF' }],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MapPopup>;
+
+/** Verified provider with image, price, location, and rating */
+export const VerifiedProvider: Story = {
+  args: {
+    name: 'H.Parsons Funeral Directors',
+    imageUrl: IMG_PROVIDER,
+    price: 900,
+    location: 'Wollongong',
+    rating: 4.8,
+    verified: true,
+    onViewDetails: () => {},
+  },
+};
+
+/** Unverified provider — no image, no badge */
+export const UnverifiedProvider: Story = {
+  args: {
+    name: 'Smith & Sons Funeral Services',
+    price: 1200,
+    location: 'Sutherland',
+    onViewDetails: () => {},
+  },
+};
+
+/** Venue popup — capacity instead of rating */
+export const Venue: Story = {
+  args: {
+    name: 'Albany Creek Memorial Park — Garden Chapel',
+    imageUrl: IMG_VENUE,
+    price: 450,
+    location: 'Albany Creek',
+    capacity: 120,
+    onViewDetails: () => {},
+  },
+};
+
+/** Minimal — just name and view details */
+export const Minimal: Story = {
+  args: {
+    name: 'Local Funeral Provider',
+    onViewDetails: () => {},
+  },
+};
+
+/** No view details link — display only */
+export const DisplayOnly: Story = {
+  args: {
+    name: 'H.Parsons Funeral Directors',
+    imageUrl: IMG_PROVIDER,
+    price: 900,
+    location: 'Wollongong',
+    verified: true,
+  },
+};
+
+/** Custom price label */
+export const CustomPriceLabel: Story = {
+  args: {
+    name: 'Premium Funeral Services',
+    imageUrl: IMG_PROVIDER,
+    priceLabel: 'Price on application',
+    location: 'Sydney CBD',
+    verified: true,
+    onViewDetails: () => {},
+  },
+};
+
+/** Pin + Popup composition — shows how they work together on a map */
+export const WithPin: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        sx={{
+          position: 'relative',
+          width: 400,
+          height: 380,
+          bgcolor: '#E5E3DF',
+          borderRadius: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 0.5,
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+  render: () => (
+    <>
+      <MapPopup
+        name="H.Parsons Funeral Directors"
+        imageUrl={IMG_PROVIDER}
+        price={900}
+        location="Wollongong"
+        rating={4.8}
+        verified
+        onViewDetails={() => {}}
+      />
+      <MapPin price={900} verified active />
+    </>
+  ),
+};