// VIEW 1 — Editorial. NYT-investigation feel.
//
// Masthead → live ticker → 86pt hero headline → Vanguard lead story
// with community rollup → three-up "also in the file" cards → full
// 13-property ledger table → legal disclaimer footer.
//
// This is the default landing view because the editorial framing is what
// makes the site feel like a watchdog, which in turn is what makes people
// want to vote.
const EditorialView = ({ onSwitchView }) => {
  const [sel, setSel] = useState(null);
  const props = D.properties;
  const headline = props.find((p) => p.id === "vanguard");
  const secondary = props.filter((p) => p.headline && p.id !== "vanguard");

  const rollups = useMemo(() => {
    const m = {};
    props.forEach((p) => { m[p.id] = rollupProperty(p.id).rollup; });
    return m;
  }, []);

  return (
    <div style={{ minHeight: "100%", background: "var(--paper)", color: "var(--ink)" }}>
      {/* Internal masthead (below the global site nav) */}
      <div style={{ borderBottom: "2px solid var(--ink)", padding: "14px 48px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
          <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.02em" }}>The Monette Ledger</div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: "var(--mute)", letterSpacing: "0.08em" }}>
            VOL. I · ISSUE 01 · APR 21, 2026 · CCAA DAY 0
          </div>
        </div>
        <div style={{ display: "flex", gap: 18, fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase" }}>
          <span onClick={() => onSwitchView && onSwitchView("list")} style={{ color: "var(--mute)", cursor: "pointer" }}>PROPERTIES</span>
          <span onClick={() => onSwitchView && onSwitchView("map")}  style={{ color: "var(--mute)", cursor: "pointer" }}>MAP</span>
          <span style={{ color: "var(--mute)" }}>FIELD NOTES</span>
          <span style={{ color: "var(--ink)", borderBottom: "1.5px solid var(--ink)" }}>LEDGER</span>
        </div>
      </div>

      <HeadlineTicker />

      {/* Hero */}
      <div style={{ padding: "48px 48px 28px", borderBottom: "1px solid var(--ink)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 480px", gap: 48 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#9a3a2a", marginBottom: 20 }}>● FILING DATE · APR 21, 2026</div>
            <div className="serif" style={{ fontSize: 86, lineHeight: 0.95, letterSpacing: "-0.03em" }}>
              311,637 acres.<br />1,276 parcels.<br />
              <span style={{ color: "var(--mute)" }}>Which ones are still theirs?</span>
            </div>
            <div style={{ marginTop: 26, fontSize: 16, lineHeight: 1.55, maxWidth: 640, color: "var(--ink-2)" }}>
              Monette Farms Ltd. entered creditor protection under the CCAA today. The Ledger is a crowdsourced file on every quarter-section — owned, sold, rented, returned, listed, seeded, sprayed, harvested — tracked in real time by the community. Vote on what you see. Submit a headline. Watch the season unfold.
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
              <button onClick={() => onSwitchView && onSwitchView("list")} className="btn btn-dark">Browse properties →</button>
              <button className="btn">How voting works</button>
            </div>
          </div>
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
              {[
                ["Saskatchewan", D.totals.sk],
                ["Manitoba",     D.totals.mb],
                ["Montana",      D.totals.mt],
              ].map(([n, t]) => (
                <div key={n} style={{ borderTop: "1px solid var(--ink)", paddingTop: 10 }}>
                  <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>{n}</div>
                  <div className="serif" style={{ fontSize: 38, lineHeight: 1, marginTop: 4 }}>
                    {fmt(t.totalAcres)}<span style={{ fontSize: 11, color: "var(--mute)", marginLeft: 4 }}>ac</span>
                  </div>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: "var(--mute)", marginTop: 6, display: "flex", justifyContent: "space-between" }}>
                    <span>{t.properties} prop.</span>
                    <span>{t.pctOwned}% owned</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Lead story */}
      <div style={{ padding: "40px 48px", borderBottom: "1px solid var(--ink)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>LEAD · {headline.region}</div>
          <div className="serif" style={{ fontSize: 52, lineHeight: 1, marginTop: 10, letterSpacing: "-0.02em" }}>
            What's happening at <span style={{ color: "#9a3a2a" }}>Vanguard</span>?
          </div>
          <div style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)" }}>
            Community observers report changed signage at the shop and new equipment on-site. The 14,358 titled-acre block spans two RMs and 111 parcels. Are they still operating? Seeded? Listed? Open the file to vote quarter by quarter.
          </div>
          <div style={{ marginTop: 18 }}>
            <button onClick={() => setSel(headline)} className="btn btn-dark">Open Vanguard file →</button>
          </div>
          <div style={{ marginTop: 24, padding: 16, background: "var(--paper-2)", border: "1px solid var(--rule)" }}>
            <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 8 }}>Community rollup · {rollups[headline.id].total} quarters</div>
            <RollupBar rollup={rollups[headline.id]} />
            <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, fontFamily: '"JetBrains Mono", monospace', fontSize: 10 }}>
              <span>Owned {rollups[headline.id].owned}</span>
              <span>Sold {rollups[headline.id].sold}</span>
              <span>For sale {rollups[headline.id].forSale}</span>
              <span>Rented {rollups[headline.id].rented}</span>
              <span>Seeded {rollups[headline.id].seeded}</span>
              <span>Sprayed {rollups[headline.id].sprayed}</span>
            </div>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 14 }}>MAP PLACEHOLDER · MAPBOX ZOOMS TO BLOCK ON CLICK</div>
          <div style={{ height: 420, background: "var(--paper-2)", border: "1px solid var(--ink)", position: "relative", overflow: "hidden" }}>
            <svg viewBox="0 0 400 300" style={{ width: "100%", height: "100%" }}>
              <defs>
                <pattern id="tl" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M20 0 L0 0 0 20" fill="none" stroke="#d9d2c3" strokeWidth="0.5" />
                </pattern>
              </defs>
              <rect width="400" height="300" fill="url(#tl)" />
              {Array.from({ length: 16 }).map((_, i) => {
                const x = 80 + (i % 4) * 55, y = 60 + Math.floor(i / 4) * 55;
                return (
                  <g key={i}>
                    <rect x={x} y={y} width={50} height={50} fill="rgba(180,134,56,0.25)" stroke="#b48638" strokeWidth="0.8" />
                    <text x={x + 4} y={y + 10} fontSize="5" fontFamily="JetBrains Mono" fill="#7a5a1e">Q{i + 1}</text>
                  </g>
                );
              })}
              <text x="200" y="30" textAnchor="middle" fontFamily="Instrument Serif" fontSize="18" fill="#6e6558">Vanguard · RM of Whiska Creek</text>
            </svg>
          </div>
        </div>
      </div>

      {/* Also in the file */}
      <div style={{ padding: "36px 48px", borderBottom: "1px solid var(--ink)" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 18 }}>ALSO IN THE FILE</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32 }}>
          {secondary.map((p) => (
            <article key={p.id} onClick={() => setSel(p)} style={{ cursor: "pointer", borderTop: "1px solid var(--ink)", paddingTop: 14 }}>
              <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>{p.province} · {p.region}</div>
              <div className="serif" style={{ fontSize: 32, lineHeight: 1, margin: "10px 0", letterSpacing: "-0.01em" }}>{p.name}</div>
              <div style={{ marginTop: 8 }}><RollupBar rollup={rollups[p.id]} /></div>
              <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.5, color: "var(--ink-2)" }}>{p.notes}</div>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: "var(--mute)", marginTop: 10, display: "flex", justifyContent: "space-between" }}>
                <span>{fmt(p.titled)} ac</span>
                <span>{p.parcels} parcels</span>
                <span>{fmtM(p.assessment)}</span>
              </div>
            </article>
          ))}
        </div>
      </div>

      {/* Full ledger */}
      <div style={{ padding: "36px 48px", borderBottom: "1px solid var(--ink)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>THE FULL LEDGER · 13 PROPERTIES</div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: "var(--mute)" }}>Click to open quarters</div>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead>
            <tr style={{ borderBottom: "1.5px solid var(--ink)", textAlign: "left" }}>
              {["Property", "Prov", "Titled", "Parcels", "Owned", "Sold", "Rented", "For sale", "Seeded", "Rollup"].map((h) => (
                <th key={h} style={{
                  padding: "10px 8px", color: "var(--mute)", fontWeight: 500, fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase",
                  textAlign: ["Titled", "Parcels", "Owned", "Sold", "Rented", "For sale", "Seeded"].includes(h) ? "right" : "left",
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {props.map((p) => {
              const r = rollups[p.id];
              return (
                <tr key={p.id} onClick={() => setSel(p)} style={{ borderBottom: "1px dashed var(--rule-2)", cursor: "pointer" }}
                    onMouseOver={(e) => (e.currentTarget.style.background = "var(--paper-2)")}
                    onMouseOut={(e) => (e.currentTarget.style.background = "")}>
                  <td style={{ padding: "12px 8px" }}><span className="serif" style={{ fontSize: 20 }}>{p.name}</span></td>
                  <td style={{ padding: "12px 8px", color: "var(--mute)", fontFamily: '"JetBrains Mono", monospace' }}>{p.province}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace' }}>{fmt(p.titled)}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: "var(--mute)" }}>{p.parcels}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: OWN["owned-monette"].color }}>{r.owned}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: OWN.sold.color }}>{r.sold}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: OWN["rented-monette"].color }}>{r.rented}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: LIST["listed-for-sale"].color }}>{r.forSale}</td>
                  <td style={{ padding: "12px 8px", textAlign: "right", fontFamily: '"JetBrains Mono", monospace', color: "#4e6a30" }}>{r.seeded}</td>
                  <td style={{ padding: "12px 8px", width: 100 }}><RollupBar rollup={r} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{ padding: "32px 48px", fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
        An independent, crowdsourced tracker. Not affiliated with Monette Farms, the Monitor, or the courts. Data derived from published asset schedules and community contributions.
      </div>

      <PropertyDrawer prop={sel} onClose={() => setSel(null)} onZoomMap={(p) => { setSel(null); onSwitchView && onSwitchView("map", p.id); }} />
    </div>
  );
};
window.EditorialView = EditorialView;