// os-trail.jsx — a SECOND, parallel trail: the California places that macOS
// releases are named after (since OS X Mavericks in 2013). Each stop is a real
// landmark with its own GPS-gated patch, tinted to echo that release's wallpaper
// so the set reads as a distinct "OS theme" collectible (vs the blue Origin Trail
// patches and the gold WWDC patch).
//
// Same site shape as data.jsx (id, n, name, year, place, lat, lng, mark, accent,
// lede, history[], quote{t,c}, sources[], visit?) so it reuses Detail / Radar /
// Claim / Passport unchanged. Patches are claimed on real GPS arrival, like the
// trail. No invented metadata — every fact is sourced (see CLAUDE.md).
//
// `year` is the year Apple ANNOUNCED the release at WWDC (June). Several names
// refer to a whole region (Sierra, High Sierra, Mojave); those carry a `visit`
// note flagging that the pin is a representative landmark, not "the" place.

const OS_TRAIL = [
  {
    id: "os-mavericks",
    n: 1,
    name: "Mavericks",
    year: "2013",
    place: "Pillar Point, Half Moon Bay, CA",
    lat: 37.4915, lng: -122.5083,
    mark: "wave",
    accent: "#4b8dff",
    // The pin is the surf break, ~0.8 km offshore — claim from Pillar Point Bluff.
    claimRadius: 1000,
    lede: "OS X 10.9 — the release that retired the big cats and named macOS after California. Mavericks is a legendary big-wave surf break off Pillar Point.",
    history: [
      "At WWDC 2013 Apple announced it was done with big-cat names like Cheetah and Lion, and would name OS X after places in California instead. Mavericks went first.",
      "The break sits about half a mile off Pillar Point near Half Moon Bay, where a long underwater rock ramp focuses winter swell into waves that can top 60 feet. It was named in 1967 after a dog, 'Maverick,' that paddled out with the early surfers."
    ],
    quote: {
      t: "Apple went to its own backyard for a new naming scheme — California places, starting with a big-wave break.",
      c: "TechCrunch — WWDC 2013"
    },
    sources: [
      "Wikipedia — Mavericks, California",
      "Visit Half Moon Bay"
    ],
    visit: {
      label: "Coastal viewpoint",
      lines: [
        "View the break from Pillar Point Bluff or the harbor.",
        "The surf itself is experts-only — watch from shore."
      ]
    }
  },
  {
    id: "os-yosemite",
    n: 2,
    name: "Yosemite",
    year: "2014",
    place: "Yosemite Valley, Yosemite National Park, CA",
    lat: 37.7217, lng: -119.6464,
    mark: "valley",
    accent: "#57c08a",
    lede: "OS X 10.10 — named for the glacier-carved valley at the heart of Yosemite National Park.",
    history: [
      "Yosemite Valley is a roughly 7.5-mile-long, 3,000-plus-foot-deep gorge cut by ice-age glaciers through ancient Sierra granite.",
      "It holds Yosemite Falls, the highest waterfall in North America at 2,425 feet, along with Half Dome and the valley's sheer granite walls."
    ],
    quote: {
      t: "A mile-deep cathedral of granite and waterfalls, carved by glaciers from 100-million-year-old rock.",
      c: "National Park Service — Yosemite"
    },
    sources: [
      "National Park Service — Yosemite Geology",
      "Wikipedia — Yosemite Valley"
    ],
    visit: {
      label: "National Park",
      lines: [
        "Yosemite is a national park — an entrance reservation or fee may apply.",
        "Check nps.gov for conditions before you go."
      ]
    }
  },
  {
    id: "os-el-capitan",
    n: 3,
    name: "El Capitan",
    year: "2015",
    place: "El Capitan, Yosemite National Park, CA",
    lat: 37.7422, lng: -119.6358,
    mark: "monolith",
    accent: "#ff9e5e",
    lede: "OS X 10.11 — a refinement release named for Yosemite's iconic granite monolith.",
    history: [
      "El Capitan rises about 3,000 feet from the valley floor to roughly 7,573 feet, one of the largest exposed granite faces on Earth.",
      "Its sheer wall is a mecca for climbers: the famous 'Nose' route was first climbed in 1958 by Warren Harding, Wayne Merry and George Whitmore over 47 days."
    ],
    quote: {
      t: "Three thousand vertical feet of granite — the wall that defines big-wall climbing.",
      c: "Encyclopædia Britannica — El Capitan"
    },
    sources: [
      "Wikipedia — El Capitan",
      "Encyclopædia Britannica — El Capitan"
    ]
  },
  {
    id: "os-sierra",
    n: 4,
    name: "Sierra",
    year: "2016",
    place: "Sierra Nevada · Lake Tahoe, CA",
    lat: 39.0968, lng: -120.0324,
    mark: "range",
    accent: "#7c83ff",
    // Pin is the centre of Lake Tahoe — claim from anywhere around the basin.
    claimRadius: 12000,
    lede: "macOS 10.12 — the release that rebranded 'OS X' as 'macOS,' named for California's great mountain range.",
    history: [
      "The Sierra Nevada runs about 400 miles north to south and tops out at Mount Whitney (14,505 ft), the highest point in the contiguous United States.",
      "John Muir called it the 'Range of Light.' Lake Tahoe, on the range's spine, is one of its most famous landmarks."
    ],
    quote: {
      t: "The Range of Light.",
      c: "John Muir, The Mountains of California"
    },
    sources: [
      "Wikipedia — Sierra Nevada",
      "Encyclopædia Britannica — Sierra Nevada"
    ],
    visit: {
      label: "A range, not a spot",
      lines: [
        "Sierra names the whole range — this pin is Lake Tahoe, a representative landmark."
      ]
    }
  },
  {
    id: "os-high-sierra",
    n: 5,
    name: "High Sierra",
    year: "2017",
    place: "High Sierra · Mount Whitney, CA",
    lat: 36.5786, lng: -118.2920,
    mark: "summit",
    accent: "#56cfe1",
    // Pin is the Mt. Whitney summit — claim from Whitney Portal / the trail.
    claimRadius: 6000,
    lede: "macOS 10.13 — a foundational follow-up to Sierra, named for the range's high country.",
    history: [
      "The High Sierra is the alpine heart of the Sierra Nevada, crowned by Mount Whitney at 14,505 feet — the highest summit in the lower 48 states.",
      "Its pale granite was uplifted geologically recently and stripped bare by glaciers, giving the high country its bright, light-reflecting peaks."
    ],
    quote: {
      t: "The same range as Sierra — one notch higher, at the roof of the lower 48.",
      c: "Wikipedia — Sierra Nevada"
    },
    sources: [
      "Wikipedia — Sierra Nevada",
      "Sierra Club — John Muir, The Mountains of California"
    ],
    visit: {
      label: "A region, not a spot",
      lines: [
        "'High Sierra' is the range's high country — this pin is Mount Whitney, a representative summit."
      ]
    }
  },
  {
    id: "os-mojave",
    n: 6,
    name: "Mojave",
    year: "2018",
    place: "Mojave Desert · Joshua Tree N.P., CA",
    lat: 33.8734, lng: -115.9010,
    mark: "cactus",
    accent: "#e0a45e",
    lede: "macOS 10.14 — the release that introduced Dark Mode, named for California's high desert.",
    history: [
      "The Mojave is North America's smallest and driest desert, defined by the spiky Joshua tree (Yucca brevifolia), which grows almost nowhere else.",
      "It contains Death Valley, the lowest and hottest place in North America — site of the highest reliably recorded air temperature on Earth, 134°F, in 1913."
    ],
    quote: {
      t: "A desert of Joshua trees and record heat — a fitting namesake for Dark Mode.",
      c: "National Park Service — Joshua Tree"
    },
    sources: [
      "Wikipedia — Mojave Desert",
      "National Park Service — Joshua Tree"
    ],
    visit: {
      label: "A region, not a spot",
      lines: [
        "The Mojave spans four states — this pin is Joshua Tree National Park, a California gateway."
      ]
    }
  },
  {
    id: "os-catalina",
    n: 7,
    name: "Catalina",
    year: "2019",
    place: "Avalon, Santa Catalina Island, CA",
    lat: 33.3408, lng: -118.3278,
    mark: "island",
    accent: "#2ec5c5",
    lede: "macOS 10.15 — the release that split iTunes apart, named for the Channel Island off Los Angeles.",
    history: [
      "Santa Catalina sits about 22 miles off the coast; its harbor town of Avalon is crowned by the landmark 1929 Catalina Casino.",
      "Chewing-gum magnate William Wrigley Jr. bought into the island in 1919. A herd of bison still roams it — descendants of 14 brought over for a 1924 film shoot and never removed."
    ],
    quote: {
      t: "An island of Art Deco casinos and runaway movie-set bison, 22 miles out to sea.",
      c: "Wikipedia — Santa Catalina Island"
    },
    sources: [
      "Wikipedia — Santa Catalina Island (California)",
      "Wikipedia — Avalon, California"
    ],
    visit: {
      label: "Reached by ferry",
      lines: [
        "Catalina is an island — reach Avalon by ferry from the mainland."
      ]
    }
  },
  {
    id: "os-big-sur",
    n: 8,
    name: "Big Sur",
    year: "2020",
    place: "Big Sur · Bixby Bridge, CA",
    lat: 36.3714, lng: -121.9015,
    mark: "bridge",
    accent: "#c77dff",
    lede: "macOS 11 — the big redesign that jumped to version 11, named for the rugged Central Coast.",
    history: [
      "Big Sur is where the Santa Lucia Mountains plunge straight into the Pacific along Highway 1 — one of the longest undeveloped coastlines in the contiguous US.",
      "Its signature landmark, the 360-foot Bixby Creek Bridge, was built in 1932 and was then among the highest single-span concrete arch bridges in the world."
    ],
    quote: {
      t: "Where the mountains meet the sea — and macOS jumped from 10 to 11.",
      c: "Wikipedia — Big Sur"
    },
    sources: [
      "Wikipedia — Big Sur",
      "Wikipedia — Bixby Creek Bridge"
    ]
  },
  {
    id: "os-monterey",
    n: 9,
    name: "Monterey",
    year: "2021",
    place: "Monterey, CA",
    lat: 36.6031, lng: -121.8936,
    mark: "bay",
    accent: "#4aa3df",
    lede: "macOS 12 — named for the historic city on Monterey Bay.",
    history: [
      "Monterey was the capital of Alta California from 1770 to 1849; Colton Hall hosted the state's 1849 constitutional convention.",
      "Its Cannery Row sardine canneries, immortalized by Steinbeck, ran until 1973. The Monterey Bay Aquarium later rose on a cannery site and was the first to grow a living kelp forest exhibit."
    ],
    quote: {
      t: "California's first capital, Steinbeck's Cannery Row, and a living kelp forest on the bay.",
      c: "Wikipedia — Monterey, California"
    },
    sources: [
      "Wikipedia — Monterey, California",
      "California State Library — Previous CA Capitals"
    ]
  },
  {
    id: "os-ventura",
    n: 10,
    name: "Ventura",
    year: "2022",
    place: "Ventura (San Buenaventura), CA",
    lat: 34.2750, lng: -119.2278,
    mark: "sun",
    accent: "#ff7aa8",
    lede: "macOS 13 — named for the laid-back coastal city in Ventura County.",
    history: [
      "Ventura grew up around Mission San Buenaventura, founded in 1782 — the ninth and last mission established by Junípero Serra.",
      "Long before, the Chumash people built plank-sewn seagoing canoes called tomols and traded with their relatives on the Channel Islands offshore."
    ],
    quote: {
      t: "A mission town on the Channel-Islands coast, where the Chumash launched seagoing canoes.",
      c: "California Missions Foundation — San Buenaventura"
    },
    sources: [
      "Wikipedia — Ventura, California",
      "California Missions Foundation — San Buenaventura"
    ]
  },
  {
    id: "os-sonoma",
    n: 11,
    name: "Sonoma",
    year: "2023",
    place: "Sonoma · Sonoma Plaza, CA",
    lat: 38.2889, lng: -122.4589,
    mark: "grapes",
    accent: "#b07ce8",
    lede: "macOS 14 — named for the wine-country town north of San Francisco Bay.",
    history: [
      "Sonoma Plaza was the site of the 1846 Bear Flag Revolt, which founded the short-lived California Republic and gave the state flag its bear.",
      "The town holds Mission San Francisco Solano (1823), the last and northernmost of California's 21 missions and the only one founded under Mexican rule."
    ],
    quote: {
      t: "Birthplace of the Bear Flag, and the last of California's 21 missions — in the heart of wine country.",
      c: "Sonoma Valley — History of the Sonoma Plaza"
    },
    sources: [
      "Wikipedia — Sonoma, California",
      "Sonoma Valley — History of the Sonoma Plaza"
    ]
  },
  {
    id: "os-sequoia",
    n: 12,
    name: "Sequoia",
    year: "2024",
    place: "Sequoia National Park · General Sherman, CA",
    lat: 36.5819, lng: -118.7514,
    mark: "sequoia",
    accent: "#d8a23a",
    lede: "macOS 15 — the 2024 California namesake, for the park of giant trees.",
    history: [
      "Sequoia National Park protects the giant sequoias of the southern Sierra Nevada, including the Giant Forest's General Sherman Tree.",
      "By volume, General Sherman is the largest known living single-stem tree on Earth — roughly 275 feet tall and estimated at 2,300–2,700 years old."
    ],
    quote: {
      t: "Home of General Sherman — the largest living tree on Earth by volume.",
      c: "National Park Service — General Sherman Tree"
    },
    sources: [
      "Wikipedia — Sequoia National Park",
      "National Park Service — General Sherman Tree"
    ],
    visit: {
      label: "National Park",
      lines: [
        "Sequoia is a national park — an entrance fee may apply.",
        "Check nps.gov for conditions before you go."
      ]
    }
  },
  {
    id: "os-tahoe",
    n: 13,
    name: "Tahoe",
    year: "2025",
    place: "Emerald Bay, Lake Tahoe, CA",
    // Pin is Emerald Bay (a distinct landmark from Sierra's lake-centre pin).
    lat: 38.9540, lng: -120.1085,
    mark: "lake",
    accent: "#3f8cff", // deep Tahoe blue
    // The bay is open water — claim from the Hwy 89 overlook, Inspiration Point,
    // Eagle Falls, or the Vikingsholm trail, so use a wider radius than default.
    claimRadius: 2000,
    lede: "macOS 26 — the first calendar-numbered macOS and its Liquid Glass redesign, named for the lake on the California–Nevada line.",
    history: [
      "Lake Tahoe is the largest alpine lake in North America and, at about 1,645 feet, the second-deepest lake in the United States, set high in the Sierra Nevada on the California–Nevada border. Its glacier-carved Emerald Bay — crowned by Fannette Island, the lake's only island — is among the most photographed spots in the West.",
      "At WWDC 2025 Apple gave macOS its first calendar-style version, jumping from 15 to 26, and introduced the translucent 'Liquid Glass' interface — its biggest redesign since Big Sur."
    ],
    quote: {
      t: "…the fairest picture the whole earth affords.",
      c: "Mark Twain, Roughing It (1872), on Lake Tahoe"
    },
    sources: [
      "Wikipedia — Lake Tahoe",
      "California State Parks — Emerald Bay / Fannette Island",
      "Wikipedia — macOS Tahoe"
    ],
    visit: {
      label: "State park viewpoint",
      lines: [
        "View Emerald Bay from the overlook on Highway 89, or hike down to Vikingsholm.",
        "Fannette Island and Vikingsholm lie within Emerald Bay State Park — follow posted rules."
      ]
    }
  },
  {
    id: "os-golden-gate",
    n: 14,
    name: "Golden Gate",
    year: "2026",
    place: "Golden Gate Strait, San Francisco, CA",
    // Bridge mid-span — the pin sits over open water in the strait itself.
    lat: 37.8199, lng: -122.4783,
    mark: "strait",
    accent: "#c0362c", // International Orange — the Golden Gate Bridge's own color.
    // The pin is in the middle of the strait, so the patch claims from a wide
    // radius that reaches the viewpoints on BOTH shores (Fort Point / Crissy
    // Field in SF; Battery Spencer / Vista Point in Marin) — "it can be water."
    claimRadius: 3000,
    lede: "macOS 27 — the strait linking San Francisco Bay to the Pacific, crossed by the Golden Gate Bridge.",
    history: [
      "The Golden Gate is the mile-wide, roughly three-mile-long strait where San Francisco Bay meets the Pacific Ocean. John C. Frémont named it 'Chrysopylae' — Golden Gate — in 1846, likening it to the Golden Horn harbor of Byzantium.",
      "Its International Orange suspension bridge opened in 1937 with a 4,200-foot main span that was the longest in the world until 1964. The name also marks Apple's switch to calendar-style versions: macOS jumped from 15 (Sequoia) to 26 (Tahoe) in 2025 and 27 in 2026."
    ],
    quote: {
      t: "To this Gate I gave the name of 'Chrysopylae', or 'Golden Gate'.",
      c: "John C. Frémont, Geographical Memoir Upon Upper California (1848)"
    },
    sources: [
      "Wikipedia — Golden Gate",
      "Encyclopædia Britannica — Golden Gate (strait)",
      "Golden Gate Bridge Highway and Transportation District"
    ],
    visit: {
      tone: "warn",
      label: "Claim from either shore",
      lines: [
        "The Golden Gate is open water — view the bridge from Fort Point or Crissy Field in San Francisco, or Battery Spencer or Vista Point in Marin.",
        "There's no safe spot in the strait itself, so this patch uses a wide radius covering both shores."
      ]
    }
  }
];

// OS Trail patches are claimed from a viewpoint near a large natural landmark
// (a meadow, a plaza, a beach, a grove), not a street address — so they get a
// far more forgiving default radius than the Origin Trail's 75 m. Sites that
// need an even wider radius (offshore / lake / summit pins) set their own above.
const OS_DEFAULT_CLAIM_RADIUS_M = 500;

// Detail-screen footer for this trail. Unlike the Origin Trail, every stop is a
// public place (a park, beach, lake, town or roadside landmark) — so there's no
// private-residence warning, and history is NOT from the Computer History Museum
// but from each stop's own cited sources. The non-affiliation disclaimer stays
// (required — see CLAUDE.md), and park stewardship guidance replaces the
// "respect the residents" note.
const OS_SOURCE_NOTE =
  "Place facts are drawn from each stop's cited sources (National Park Service, Wikipedia and others). " +
  "Every macOS namesake here is a public place — a park, beach, lake, town or roadside landmark; " +
  "please follow posted rules, stay on public land, and Leave No Trace. " +
  "This is an unofficial fan-made side quest — not affiliated with, endorsed by, or sponsored by Apple Inc.";

OS_TRAIL.forEach((s) => {
  if (s.claimRadius == null) s.claimRadius = OS_DEFAULT_CLAIM_RADIUS_M;
  if (s.sourceNote == null) s.sourceNote = OS_SOURCE_NOTE;
});

window.OS_TRAIL = OS_TRAIL;

// ---- Reveal gate ----
// The OS Trail is a permanent feature (not a time-boxed patch like the WWDC
// stop). It originally debuted during WWDC 2026; the reveal gate below is now in
// the past, so it's live in production. The gate mechanism is kept so the
// DebugPanel (localhost) can still preview it via a toggle
// (__DEBUG_FORCE_OS_TRAIL). Offset-aware instant so it's correct in any timezone.
window.OS_TRAIL_REVEAL = "2026-06-10T00:00:00-07:00";
window.osTrailLive = () => {
  if (window.__DEBUG_FORCE_OS_TRAIL) return true;
  return Date.now() >= Date.parse(window.OS_TRAIL_REVEAL);
};

// ============================================================ OS TRAIL SCREEN
// A sibling of Home: lists the macOS-named California places, nearest-first,
// uncollected before collected. Reuses the Home list styling. Patches are still
// claimed on real GPS arrival via the shared Detail → Radar → Claim flow.
function OSTrailScreen({ collected, shape, onSite, onPassport, onBack }) {
  const Patch = window.Patch;
  const Icon = window.Icon;
  const total = OS_TRAIL.length;
  const got = OS_TRAIL.filter((s) => collected.includes(s.id)).length;
  const C = 2 * Math.PI * 34;
  const off = C * (1 - got / total);
  const { user, live } = window.useUserLocation();
  const rows = OS_TRAIL
    .map((s) => ({ s, done: collected.includes(s.id), dm: window.geoDistM(user, s) }))
    .sort((a, b) => (a.done !== b.done ? (a.done ? 1 : -1) : a.dm - b.dm));
  const nextId = rows.find((r) => !r.done)?.s.id;

  return (
    <div className="screen" data-back-on-left>
      <div className="bloom" style={{ width: 360, height: 200, top: -70, left: 120 }} />
      <div className="home-top">
        <div>
          <div className="kicker glow-text">OS Trail</div>
          <div className="title" style={{ marginTop: 8 }}>macOS, named<br />for California</div>
          <div className="label" style={{ marginTop: 12 }}>Mavericks to Golden Gate &middot; the places behind the names</div>
        </div>
        <div className="progress-ring">
          <svg viewBox="0 0 78 78">
            <circle className="pr-track" cx="39" cy="39" r="34" strokeWidth="3" />
            <circle className="pr-val" cx="39" cy="39" r="34" strokeWidth="3"
              strokeDasharray={C} strokeDashoffset={off} />
          </svg>
          <div className="pr-num"><b>{got}<span style={{ color: "var(--ink-faint)", fontSize: 14 }}>/{total}</span></b><span>Patches</span></div>
        </div>
      </div>

      <div className="home-subhead">
        <span className="label">{got === total ? "OS Trail complete" : "Nearest first"}</span>
        <span className="label">{live ? "● your location" : "○ sim. location"}</span>
      </div>

      <div className="site-list">
        {rows.map(({ s, done, dm }, i) => {
          const ready = s.id === nextId;
          const d = window.geoMiles(dm);
          const region = s.place.split(",").slice(-2, -1)[0].trim().toUpperCase();
          return (
            <div key={s.id} className={"site-row focusable" + (done ? " done" : "")}
              data-focus data-nav-zone="list" data-autofocus={i === 0 ? true : undefined} onClick={() => onSite(s)}>
              <div className="idx"><Patch mark={s.mark} size={30} shape={shape} earned={done} accent={s.accent} /></div>
              <div className="site-info">
                <div className="nm">{s.name}</div>
                <div className="mt">{done ? "COLLECTED · " + s.year : (ready ? "NEXT UP · " + region : "macOS " + s.year)}</div>
              </div>
              <div className="site-dist">{d.v}<span>{d.u}</span></div>
              <div className={"dot " + (done ? "done" : ready ? "ready" : "locked")} />
            </div>
          );
        })}
      </div>

      <div className="home-foot">
        <button className="btn focusable" data-focus data-back onClick={onBack}>
          <Icon name="back" /> Origin Trail
        </button>
        <button className="btn focusable" data-focus onClick={onPassport}>
          <Icon name="grid" /> Passport
        </button>
      </div>
      <div className="home-disclaimer">Unofficial fan side quest · not affiliated with Apple</div>
    </div>
  );
}

window.OSTrailScreen = OSTrailScreen;