```tsx App.tsx
import { useState, useRef, type ReactNode, type FormEvent } from "react";
import { motion, useReducedMotion, AnimatePresence } from "framer-motion";
import { ArrowDown, MapPin, Phone, Mail, AlertTriangle, Clock } from "lucide-react";

const manifest = [
  "Steam coal - 60 tons",
  "Wool bales - 120 bales",
  "Sawn red cedar - 30 lengths",
  "Royal Mail - 14 canvas sacks",
  "Tinned provisions - 40 cases",
  "Tallow - 22 barrels",
  "Ironmongery - 8 crates",
  "Rum - 6 hogsheads",
  "Crated pianos - 3",
  "Fencing wire - 15 bundles",
];

const lost = [
  "James Corradine, second engineer, who stayed below trying to restart the engine.",
  "Patrick Hoyle, fireman.",
  "Thomas Byrne, able seaman.",
  "Eleanor Vance, passenger, travelling to Newcastle.",
  "Albert Sturrock, passenger.",
];

const artifacts = [
  {
    year: "1957",
    title: "Engine-room telegraph",
    desc: "A brass ship's telegraph recovered from the engine room in 1957, its handle still set to 'Stand By' - the last order Captain Renshaw is thought to have rung down before the engine failed. It is the museum's centrepiece.",
    type: "telegraph",
  },
  {
    year: "1961",
    title: "Passenger's pocket watch",
    desc: "A gold half-hunter pocket watch recovered in 1961, its hands stopped at 11:47, a few minutes after the Coralyn struck the reef. It was found in the debris field and has never been matched to a name.",
    type: "watch",
  },
  {
    year: "1984",
    title: "Ship's bell",
    desc: "The Coralyn's bell, cast with 'CORALYN 1899' around its rim, recovered in 1984 from the sand near the bow. It is rung once each year on the anniversary of the loss.",
    type: "bell",
  },
  {
    year: "1969",
    title: "Binnacle compass",
    desc: "The ship's steering compass and its brass binnacle, recovered in 1969 from the wreck of the bridge. The card is gone but the gimbals still swing freely.",
    type: "compass",
  },
  {
    year: "1972",
    title: "Ardmore Line dinner plate",
    desc: "A white porcelain plate bearing the blue crest of the Ardmore Coastal Line, recovered intact from the debris field in 1972 - one of a service that went down with the ship.",
    type: "plate",
  },
  {
    year: "1998",
    title: "Steam whistle",
    desc: "The Coralyn's brass steam whistle, recovered from the after funnel stay in 1998. Divers who have handled it say it is the piece that most makes the ship feel real.",
    type: "whistle",
  },
];

const timeline = [
  { date: "3 May 1899", event: "Launched at the Ferguson and Aird shipyard, Port Glasgow." },
  { date: "September 1899", event: "Arrived in Sydney and entered the Ardmore Coastal Line's Sydney to Newcastle run." },
  { date: "1904", event: "Refitted with two new boilers after a boiler-room fire off Broken Bay." },
  { date: "14 August 1908", event: "Foundered on Coralyn Reef off Port Camden Heads; five lives lost." },
  { date: "November 1908", event: "A Court of Marine Inquiry found the loss was caused by engine failure in heavy weather and laid no blame on Captain Renshaw or his crew." },
  { date: "1953", event: "The wreck was relocated by local fishermen whose nets snagged on it, and dived soon after." },
  { date: "1976", event: "Declared a protected historic shipwreck under the Historic Shipwrecks Act." },
  { date: "2004", event: "A public mooring was installed over the wreck and the Port Camden Maritime Museum became its custodian." },
];

const depths = [
  { m: 28, name: "The bow", detail: "The most intact part of the wreck. The bow section stands clear of the sand and is where the bell was found." },
  { m: 34, name: "The boilers", detail: "The two boilers and the engine are the largest structures on the wreck, in the midships section." },
  { m: 40, name: "The debris field", detail: "The stern and the scattered cargo lie in a debris field on the sand at the wreck's deepest point, where the pocket watch and the dinner plate were recovered." },
];

const rules = [
  "A permit is required to dive the wreck. Apply through Heritage NSW before you dive.",
  "Do not anchor on or near the wreck. Use the public mooring installed over the site.",
  "Do not remove, disturb, or damage anything on the wreck. Everything on it is protected, down to loose fittings in the sand.",
  "Penalties for interfering with a protected historic shipwreck are severe and include substantial fines.",
];

const operators = ["Camden Heads Dive Charters", "Southern Reef Diving Company"];

const Kicker = ({ children, className = "" }: { children: ReactNode; className?: string }) => (
  <span className={`kicker inline-block ${className}`}>{children}</span>
);

const Marquee = ({ reduced }: { reduced: boolean }) => {
  const text = "The Coralyn lies in forty metres of water. Take nothing. Leave nothing. ";
  if (reduced) {
    return (
      <div className="bg-ink text-chartreuse py-3 overflow-hidden whitespace-nowrap">
        <div className="font-shout uppercase text-2xl tracking-tight">{text}</div>
      </div>
    );
  }
  return (
    <div className="bg-ink text-chartreuse py-3 overflow-hidden whitespace-nowrap">
      <motion.div
        className="inline-block font-shout uppercase text-2xl tracking-tight"
        animate={{ x: ["0%", "-50%"] }}
        transition={{ duration: 22, ease: "linear", repeat: Infinity }}
      >
        {text}{text}
      </motion.div>
    </div>
  );
};

const Section = ({ children, reduced, className = "" }: { children: ReactNode; reduced: boolean; className?: string }) => (
  <motion.div
    initial={reduced ? { y: 0, opacity: 1 } : { y: 40, opacity: 0 }}
    whileInView={reduced ? { y: 0, opacity: 1 } : { y: 0, opacity: 1 }}
    viewport={{ once: true, margin: "-80px" }}
    transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
    className={className}
  >
    {children}
  </motion.div>
);

const ShipIllustration = ({ className = "" }: { className?: string }) => (
  <svg className={className} viewBox="0 0 400 180" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 110 Q 60 150, 200 150 L 360 150 L 380 110 L 20 110 Z" fill="#0B0B0B" />
    <rect x="60" y="60" width="180" height="50" fill="#F3EBDD" />
    <rect x="90" y="35" width="120" height="25" fill="#F3EBDD" />
    <rect x="175" y="5" width="25" height="55" fill="#0B0B0B" />
    <line x1="100" y1="60" x2="100" y2="5" stroke="#0B0B0B" strokeWidth="3" />
    <line x1="220" y1="60" x2="220" y2="5" stroke="#0B0B0B" strokeWidth="3" />
    <circle cx="330" cy="130" r="6" fill="#F3EBDD" />
    <circle cx="300" cy="130" r="6" fill="#F3EBDD" />
  </svg>
);

const WreckIllustration = ({ className = "" }: { className?: string }) => (
  <svg className={className} viewBox="0 0 120 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15 30 Q 30 100, 20 370 L 100 370 Q 90 100, 105 30 Z" fill="#0B0B0B" stroke="#F3EBDD" strokeWidth="2" />
    <rect x="40" y="100" width="40" height="40" fill="#F3EBDD" />
    <rect x="40" y="220" width="40" height="40" fill="#F3EBDD" />
    <rect x="30" y="300" width="60" height="50" fill="#1B2CC1" />
    <circle cx="60" cy="80" r="5" fill="#D7F205" />
    <circle cx="60" cy="160" r="5" fill="#D7F205" />
    <circle cx="60" cy="260" r="5" fill="#D7F205" />
  </svg>
);

const ArtifactSvg = ({ type }: { type: string }) => {
  switch (type) {
    case "telegraph":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="35" y="45" width="30" height="45" fill="#D7F205" stroke="#0B0B0B" strokeWidth="3" />
          <circle cx="50" cy="35" r="12" fill="#0B0B0B" />
          <line x1="50" y1="35" x2="72" y2="15" stroke="#0B0B0B" strokeWidth="4" />
        </svg>
      );
    case "watch":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="50" cy="55" r="28" fill="#D7F205" stroke="#0B0B0B" strokeWidth="3" />
          <circle cx="50" cy="50" r="3" fill="#0B0B0B" />
          <line x1="50" y1="50" x2="50" y2="35" stroke="#0B0B0B" strokeWidth="2" />
          <line x1="50" y1="50" x2="62" y2="50" stroke="#0B0B0B" strokeWidth="2" />
          <circle cx="50" cy="20" r="5" fill="#0B0B0B" />
        </svg>
      );
    case "bell":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30 60 Q 30 20, 50 20 Q 70 20, 70 60 L 75 65 L 25 65 Z" fill="#E01E37" stroke="#0B0B0B" strokeWidth="3" />
          <circle cx="50" cy="72" r="5" fill="#0B0B0B" />
        </svg>
      );
    case "compass":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="30" y="30" width="40" height="50" fill="#1B2CC1" stroke="#0B0B0B" strokeWidth="3" />
          <circle cx="50" cy="50" r="12" fill="#F3EBDD" stroke="#0B0B0B" strokeWidth="2" />
          <line x1="50" y1="42" x2="50" y2="58" stroke="#0B0B0B" strokeWidth="2" />
        </svg>
      );
    case "plate":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="50" cy="50" r="35" fill="#F3EBDD" stroke="#0B0B0B" strokeWidth="3" />
          <path d="M40 45 L 50 35 L 60 45 L 55 55 L 45 55 Z" fill="#1B2CC1" />
        </svg>
      );
    case "whistle":
      return (
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 50 Q 50 20, 80 50 L 80 60 L 20 60 Z" fill="#D7F205" stroke="#0B0B0B" strokeWidth="3" />
          <rect x="75" y="45" width="15" height="20" fill="#0B0B0B" />
        </svg>
      );
    default:
      return null;
  }
};

export default function App() {
  const reduced = useReducedMotion() || false;
  const [activeDepth, setActiveDepth] = useState<number | null>(0);
  const [formStatus, setFormStatus] = useState<"idle" | "sent">("idle");
  const formRef = useRef<HTMLFormElement>(null);

  const handleFormSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setFormStatus("sent");
    formRef.current?.reset();
  };

  return (
    <main className="bg-ink text-paper font-body overflow-x-hidden">
      <header className="fixed top-0 left-0 right-0 z-50 bg-ink/95 px-6 py-4 md:px-12">
        <nav className="flex items-center justify-between">
          <a href="#hero" className="font-shout uppercase text-xs tracking-wide text-paper hover:text-chartreuse">
            Port Camden Maritime Museum
          </a>
          <a href="#visit" className="kicker bg-crimson text-paper px-3 py-1 hover:bg-chartreuse hover:text-ink">
            Plan a visit
          </a>
        </nav>
      </header>

      <section id="hero" className="relative min-h-screen bg-paper text-ink px-6 md:px-12 pt-24 pb-32 overflow-hidden">
        <Kicker className="-ml-2 -rotate-2 bg-ink text-paper px-3 py-1">
          Issue 01 / The Coralyn Number
        </Kicker>

        <svg className="absolute right-0 top-24 w-[70vw] max-w-[700px] h-auto -z-10 translate-x-1/4 md:translate-x-0" viewBox="0 0 400 300" fill="none" aria-hidden="true">
          <rect x="40" y="20" width="320" height="240" fill="#E01E37" transform="rotate(-6 200 140)" />
          <rect x="40" y="20" width="320" height="240" fill="none" stroke="#0B0B0B" strokeWidth="3" transform="rotate(-6 200 140)" />
        </svg>

        <motion.div
          initial={reduced ? { y: 0, opacity: 1 } : { y: 40, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
          className="relative mt-8 md:mt-16 max-w-5xl"
        >
          <h1 className="poster text-ink">
            The Wreck
            <span className="block font-shout font-extrabold uppercase tracking-tight text-cobalt leading-[0.85]">
              of the Coralyn
            </span>
          </h1>
          <p className="deck mt-6 md:mt-8 text-ink max-w-3xl">
            On the night of 14 August 1908, a coastal steamer went down off Port Camden Heads. Five lives were lost. The wreck lies in forty metres of water, protected, waiting.
          </p>
          <a
            href="#the-ship"
            className="mt-10 inline-flex items-center gap-3 border-hard bg-paper px-6 py-4 hover:bg-chartreuse transition-colors"
          >
            <span className="font-shout uppercase text-sm tracking-wide">Begin the descent</span>
            <ArrowDown size={18} strokeWidth={2.5} />
          </a>
        </motion.div>
      </section>

      <Marquee reduced={reduced} />

      <section id="the-ship" className="relative bg-cobalt text-paper px-6 md:px-12 py-24 md:py-32">
        <Section reduced={reduced}>
          <Kicker className="text-chartreuse">The ship</Kicker>
          <h2 className="deck mt-4 text-paper max-w-3xl">62 metres of iron, one triple-expansion engine</h2>
          <div className="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-12">
            <div className="lg:col-span-7 space-y-6">
              <p className="body text-paper/90">
                The SS Coralyn was a 62-metre iron-hulled coastal steamer of 812 gross tons. She was launched in 1899 at the Ferguson and Aird shipyard at Port Glasgow, on the Clyde, and delivered later that year to her owners, the Ardmore Coastal Line of Sydney.
              </p>
              <p className="body text-paper/90">
                She was driven by a single triple-expansion steam engine fed by two coal-fired boilers, and made a service speed of about ten knots. She carried general cargo and up to twelve passengers, and worked the coastal run between Sydney and Newcastle, taking coal south and general goods north.
              </p>
              <p className="body text-paper/90">
                Her master on her final voyage was Captain William Renshaw, who had commanded her for six years.
              </p>
            </div>
            <div className="lg:col-span-5">
              <div className="border-hard-light bg-ink p-6">
                <h3 className="kicker text-chartreuse mb-4">Final voyage manifest</h3>
                <ul className="space-y-2">
                  {manifest.map((item) => (
                    <li key={item} className="body text-paper/90 border-b border-paper/20 pb-2">{item}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
          <div className="mt-16 -mx-6 md:-mx-12">
            <ShipIllustration className="w-full h-auto max-w-4xl mx-auto" />
          </div>
        </Section>
      </section>

      <section id="the-night" className="bg-ink text-paper px-6 md:px-12 py-24 md:py-32">
        <Section reduced={reduced}>
          <Kicker className="text-crimson">The night of the sinking</Kicker>
          <h2 className="deck mt-4 text-paper">14 August 1908</h2>
          <div className="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-12">
            <div className="lg:col-span-8 space-y-6">
              <p className="body text-paper/90">
                On the night of 14 August 1908 the Coralyn was on her regular northbound run to Newcastle when she was caught by a severe southerly gale off Port Camden Heads. In heavy seas her engine failed, and without power she was driven onto the reef that lies off the Heads, now marked on charts as Coralyn Reef.
              </p>
              <p className="body text-paper/90">
                She struck at about 11:40 pm, held on the reef for a short time, then slipped off it and foundered before half past midnight - down in under an hour. Of the twenty-six people aboard that night, eighteen crew and eight passengers, twenty-one got away in two of the ship's boats and were picked up at first light. Five were lost.
              </p>
              <div className="border-hard-light bg-crimson