// Headwaters Analytics — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f4f1ea", "#14201c", "#2d5d6b"],
  "heroVariant": "cartograph"
}/*EDITMODE-END*/;

const PALETTES = {
  headwaters: {
    name: "Headwaters",
    paper: "#f1ede4",
    paper2: "#e4dccc",
    ink: "#0f1d2a",
    inkSoft: "#2c4257",
    inkMuted: "#6a7a89",
    rule: "rgba(15, 29, 42, 0.16)",
    ruleSoft: "rgba(15, 29, 42, 0.08)",
    accent: "#1f5a8a",
    accentSoft: "#3a7eb0",
  },
  glacial: {
    name: "Glacial",
    paper: "#f7f6f2",
    paper2: "#ebeae3",
    ink: "#1a2630",
    inkSoft: "#41505b",
    inkMuted: "#6f7c87",
    rule: "rgba(26, 38, 48, 0.13)",
    ruleSoft: "rgba(26, 38, 48, 0.07)",
    accent: "#3d6b80",
    accentSoft: "#5d8a9a",
  },
  bitterroot: {
    name: "Bitterroot",
    paper: "#f3ede0",
    paper2: "#e8dfca",
    ink: "#1e1612",
    inkSoft: "#4a3a30",
    inkMuted: "#7a6a5d",
    rule: "rgba(30, 22, 18, 0.15)",
    ruleSoft: "rgba(30, 22, 18, 0.07)",
    accent: "#7a4022",
    accentSoft: "#9a5a3c",
  },
  graphite: {
    name: "Graphite",
    paper: "#0e1513",
    paper2: "#161e1c",
    ink: "#eae6dc",
    inkSoft: "#a8a59a",
    inkMuted: "#6e6c63",
    rule: "rgba(234, 230, 220, 0.12)",
    ruleSoft: "rgba(234, 230, 220, 0.06)",
    accent: "#7fb8a4",
    accentSoft: "#5a8e7a",
  },
};

function applyPalette(p) {
  const r = document.documentElement.style;
  r.setProperty("--paper", p.paper);
  r.setProperty("--paper-2", p.paper2);
  r.setProperty("--ink", p.ink);
  r.setProperty("--ink-soft", p.inkSoft);
  r.setProperty("--ink-muted", p.inkMuted);
  r.setProperty("--rule", p.rule);
  r.setProperty("--rule-soft", p.ruleSoft);
  r.setProperty("--accent", p.accent);
  r.setProperty("--accent-soft", p.accentSoft);
}

const SERVICES = [
  {
    title: "Geospatial Engineering",
    body: "Production-grade pipelines for spatial data: PostGIS schemas, raster/vector ETL, tile generation, and custom basemaps. We move data from sensor or survey to a queryable, analyst-ready surface.",
    stack: ["PostGIS", "GeoPandas", "GDAL", "Rasterio", "Shapely"],
  },
  {
    title: "Analytics & Spatial Modeling",
    body: "Statistical and spatial models for forecasting, clustering, network analysis, and risk surfaces. Reproducible notebooks, versioned datasets, and clear documentation of every assumption.",
    stack: ["Python", "NumPy", "SciPy", "statsmodels", "scikit-learn"],
  },
  {
    title: "Data Infrastructure & ETL",
    body: "Cloud-native ingestion and transformation: scheduled jobs, change-data-capture, and warehouse modeling. Built to survive personnel changes — typed, tested, and observable.",
    stack: ["SQL", "Python", "pandas", "Postgres", "Cron"],
  },
  {
    title: "Web Mapping & Dashboards",
    body: "Custom interactive maps and analytical dashboards. Performance-tuned vector tiles, choropleths, and dashboards that hold up to executive scrutiny.",
    stack: ["Mapbox GL", "MapLibre", "Leaflet", "Folium"],
  },
  {
    title: "Cloud Architecture",
    body: "Right-sized environments on GCP, AWS, or Azure. We design for cost, recoverability, and least-privilege from day one — not as a retrofit after the first audit.",
    stack: ["GCP", "AWS", "Azure", "Cloud Run"],
  },
  {
    title: "Hosted ETL & Web",
    body: "Long-running pipelines and lightweight web services hosted under our roof, with SLAs. Useful when you need the work running yesterday and don't have ops capacity to spare.",
    stack: ["Docker", "Postgres", "FastAPI", "Firebase"],
  },
];

const CAPABILITIES = [
  { n: "01", t: "Hydrology, public utilities, conservation, and land-use work." },
  { n: "02", t: "Sensor networks, remote sensing, lidar, and survey data." },
  { n: "03", t: "Data analytics projects — cleaning, understanding, and visualizing messy data so it can drive decisions." },
  { n: "04", t: "Embedded contracts: 2–6 months, part- or full-time." },
];

// ───────── Components ─────────

function Nav() {
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a className="brand" href="#top">
          <BrandMark size={22} />
          <span className="brand-name">
            Headwaters Analytics
            <span className="small">LLC</span>
          </span>
        </a>
        <nav className="nav-links">
          <a href="#services">Services</a>
          <a href="#capabilities">Capabilities</a>
          <a href="#contact">Contact</a>
        </nav>
        <a className="nav-cta" href="mailto:info@headwatersanalytics.com">Start a project</a>
      </div>
    </header>
  );
}

function HeroA() {
  return (
    <section className="hero hero-a-wrap">
      <div className="shell">
        <div className="hero-meta">
          <div className="left">
            <span className="coord">46.8721° N · 113.9940° W</span>
            <span className="coord">Missoula, MT</span>
          </div>
          <div className="right">
            <span className="coord">EST. 2026</span>
            <span className="coord">FILE 001 / HW.A</span>
          </div>
        </div>
        <div className="hero-a">
          <div className="title-block">
            <span className="eyebrow">Geospatial · Data · Analytics</span>
            <h1 className="display">
              Decisions,<br />drawn from<br /><em>the source.</em>
            </h1>
            <p className="lede">
              Headwaters Analytics is a Montana-based consultancy for geospatial
              and data analytics teams. We build the pipelines, models, and
              maps that let your business reason from the ground up.
            </p>
            <div className="cta-row">
              <a className="btn btn-primary" href="#services">
                Services <span className="arrow">→</span>
              </a>
              <a className="btn btn-ghost" href="mailto:info@headwatersanalytics.com">
                Book a call
              </a>
            </div>
          </div>
          <MapPlate />
        </div>
      </div>
    </section>
  );
}

function MapPlate() {
  return (
    <figure className="map-plate" aria-label="SNOTEL peak snowpack map — selected work">
      <div className="map-plate-tag">
        <span className="coord">PLATE 01 — SELECTED WORK</span>
        <span className="coord">SNOTEL · PEAK SWE · 1991–2020</span>
      </div>

      <div className="map-plate-frame">
        <img
          src="assets/snotel-peak-snowpack-map.png"
          alt="SNOTEL Peak Snowpack Date map — color shows peak date, size shows peak SWE"
          loading="lazy"
        />
      </div>

      <figcaption className="map-plate-caption">
        <div>
          <span className="label" style={{ color: "var(--accent)" }}>Case Study</span>
          <div className="map-plate-title">
            OutsideDB — Snowpack data pipeline, web mapping, and visualization
          </div>
          <div className="map-plate-sub">
            SNOTEL ETL · spatial joins · interactive map &amp; dashboard
          </div>
        </div>
        <a
          className="map-plate-link"
          href="https://snow.outsidedb.com/"
          target="_blank" rel="noopener noreferrer"
        >
          View live <span className="arrow">↗</span>
        </a>
      </figcaption>
    </figure>
  );
}

function HeroB() {
  return (
    <section className="hero">
      <div className="hero-b">
        <div className="topo-bg" style={{ color: "var(--ink)" }}>
          <TopoBackdrop accentStroke="var(--accent)" />
        </div>
        <div className="shell center">
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <span style={{
              width: 6, height: 6, borderRadius: "50%",
              background: "var(--accent)"
            }} />
            <span className="eyebrow">Geospatial · Data · Analytics — est. Montana</span>
          </div>
          <h1 className="display">
            Decisions, drawn<br /><em>from the source.</em>
          </h1>
          <p className="lede">
            Headwaters Analytics is a consultancy for geospatial and data analytics
            teams. We build the pipelines, models, and maps that let your business
            reason from the ground up.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="#services">
              See services <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="mailto:info@headwatersanalytics.com">
              Book a call
            </a>
          </div>
          <div style={{
            display: "flex", gap: 28, marginTop: 12,
            paddingTop: 24, borderTop: "1px solid var(--rule)",
            width: "100%", maxWidth: 560, justifyContent: "space-between"
          }}>
            <div className="coord">46.87° N</div>
            <div className="coord">113.99° W</div>
            <div className="coord">ELEV 3,209′</div>
            <div className="coord">EST. 2026</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroC() {
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-meta">
          <div className="left">
            <span className="coord">HEADWATERS ANALYTICS, LLC</span>
          </div>
          <div className="right">
            <span className="coord">DOC 2026.01 — REV A</span>
          </div>
        </div>
        <div className="hero-c">
          <aside className="sidebar">
            <div className="field">
              <span className="label">Field</span>
              <span className="v">Geospatial<br />& Analytics</span>
            </div>
            <div className="field">
              <span className="label">Location</span>
              <span className="v">Missoula, MT<br />46.87° N · 113.99° W</span>
            </div>
            <div className="field">
              <span className="label">Engagement</span>
              <span className="v">Contract<br />2 – 6 months</span>
            </div>
            <div className="field">
              <span className="label">Established</span>
              <span className="v">2026</span>
            </div>
          </aside>
          <div className="main">
            <span className="eyebrow">A consultancy for geospatial and data analytics teams</span>
            <h1 className="display">
              Decisions,<br />drawn from<br /><em>the source.</em>
            </h1>
            <p className="lede">
              Pipelines, models, and maps for teams whose work depends on
              getting spatial data right. Calm, technical, and built to last
              past the engagement.
            </p>
            <div className="cta-row">
              <a className="btn btn-primary" href="#services">
                Services <span className="arrow">→</span>
              </a>
              <a className="btn btn-ghost" href="mailto:info@headwatersanalytics.com">
                Book a call
              </a>
            </div>
            <div className="topo-band" aria-hidden="true">
              <div style={{
                position: "absolute", top: 12, left: 12, right: 12,
                display: "flex", justifyContent: "space-between",
                color: "var(--ink-soft)"
              }}>
                <span className="coord">FIG. 01 — DRAINAGE</span>
                <span className="coord">1:50,000</span>
              </div>
              <div style={{ position: "absolute", inset: 0, color: "var(--ink)" }}>
                <TopoBand accentStroke="var(--accent)" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "datum") return <HeroB />;
  if (variant === "survey") return <HeroC />;
  return <HeroA />;
}

function Services() {
  return (
    <section className="section" id="services">
      <div className="shell">
        <div className="section-head">
          <div className="num">§ 01</div>
          <div className="meta">
            <span className="label">Services</span>
            <h2>What we do, <em>end&#8209;to&#8209;end.</em></h2>
          </div>
        </div>
        <div className="services">
          <aside className="services-aside">
            <span className="label">Scope</span>
            <p className="helper">
              We embed with your team for the duration of an engagement —
              typically two to six months — and ship working systems, not
              recommendations decks.
            </p>
          </aside>
          <div className="services-list">
            {SERVICES.map((s, i) => (
              <article className="svc" key={s.title}>
                <div className="idx">{String(i + 1).padStart(2, "0")} /</div>
                <div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                </div>
                <div className="stack">
                  <span className="label">Stack</span>
                  <div className="tags">
                    {s.stack.map((t) => <span className="tag" key={t}>{t}</span>)}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Capabilities() {
  return (
    <section className="section" id="capabilities" style={{ paddingBottom: 0 }}>
      <div className="shell">
        <div className="section-head">
          <div className="num">§ 02</div>
          <div className="meta">
            <span className="label">Capabilities</span>
            <h2>Where we <em>typically</em> come in.</h2>
          </div>
        </div>
      </div>
      <div className="shell">
        <div className="cap-strip">
          {CAPABILITIES.map((c) => (
            <div className="cap" key={c.n}>
              <div className="coord">{c.n}</div>
              <div className="n">—</div>
              <div className="t">{c.t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" id="contact">
      <div className="shell">
        <div className="foot-grid">
          <div>
            <span className="label" style={{ display: "block", marginBottom: 18 }}>§ 03 — Contact</span>
            <h4>Have a project <em>at the edge</em> of your team's bandwidth?</h4>
            <a className="btn btn-primary" href="mailto:info@headwatersanalytics.com" style={{ marginTop: 8 }}>
              info@headwatersanalytics.com <span className="arrow">→</span>
            </a>
          </div>
          <div>
            <span className="label" style={{ display: "block", marginBottom: 18 }}>Office</span>
            <div className="link-col">
              <span style={{ color: "var(--ink)" }}>Missoula, Montana</span>
              <span className="coord">46.8721° N · 113.9940° W</span>
            </div>
          </div>
          <div>
            <span className="label" style={{ display: "block", marginBottom: 18 }}>Sitemap</span>
            <div className="link-col">
              <a href="#services">Services</a>
              <a href="#capabilities">Capabilities</a>
              <a href="#contact">Contact</a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Headwaters Analytics, LLC</span>
          <span>BUILT IN MONTANA</span>
        </div>
      </div>
    </footer>
  );
}

// ───────── Root ─────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Find which palette matches the current 3-color array
  const paletteKey = React.useMemo(() => {
    const [paper, ink, accent] = t.palette || [];
    for (const [k, p] of Object.entries(PALETTES)) {
      if (p.paper === paper && p.ink === ink && p.accent === accent) return k;
    }
    return "headwaters";
  }, [t.palette]);

  React.useEffect(() => {
    applyPalette(PALETTES[paletteKey]);
    // sync body bg for any uncovered area
    document.body.style.background = PALETTES[paletteKey].paper;
  }, [paletteKey]);

  const paletteOptions = Object.values(PALETTES).map(p => [p.paper, p.ink, p.accent]);

  return (
    <div id="top">
      <Nav />
      <Hero variant={t.heroVariant} />
      <Services />
      <Capabilities />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={paletteOptions}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Hero layout" />
        <TweakSelect
          label="Variant"
          value={t.heroVariant}
          options={[
            { value: "cartograph", label: "Cartograph — split with topo plate" },
            { value: "datum", label: "Datum — centered, topo backdrop" },
            { value: "survey", label: "Survey — editorial sidebar" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);