/* website-editorial.jsx — magazine-style "editorial rickhouse" direction. */

window.WebsiteEditorial = function WebsiteEditorial() {
  const palette = window.PALETTES.editorial;
  const Wordmark = window.Wordmark;

  return (
    <div style={{
      background: palette.bg, color: palette.ink, minHeight: "100%",
      fontFamily: palette.sans,
    }}>
      {/* Top bar */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "18px 56px", borderBottom: `1px solid ${palette.rule}`,
      }}>
        <Wordmark palette={palette} size={22} />
        <div style={{
          display: "flex", gap: 28, fontFamily: palette.sans, fontSize: 12.5,
          letterSpacing: "0.12em", textTransform: "uppercase", color: palette.inkMuted,
        }}>
          <a style={{ color: "inherit" }}>The Cask</a>
          <a style={{ color: "inherit" }}>The Rickhouse</a>
          <a style={{ color: "inherit" }}>Members</a>
          <a style={{ color: "inherit" }}>Journal</a>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <span style={{ fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.14em", color: palette.inkMuted }}>
            EST. 2025
          </span>
          <button style={{
            padding: "9px 16px", background: palette.ink, color: palette.bg,
            border: "none", borderRadius: palette.radius,
            fontFamily: palette.sans, fontSize: 12, letterSpacing: "0.08em",
            textTransform: "uppercase", cursor: "pointer",
          }}>Sponsor a stave</button>
        </div>
      </div>

      {/* Issue masthead */}
      <div style={{ padding: "14px 56px", borderBottom: `1px solid ${palette.rule}`,
        display: "flex", justifyContent: "space-between",
        fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.18em",
        textTransform: "uppercase", color: palette.inkMuted }}>
        <span>Volume I · Issue 4</span>
        <span>Barrel No. 0142 · Filling in progress</span>
        <span>72 of 400 staves sponsored</span>
      </div>

      {/* Hero */}
      <div style={{
        display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56,
        padding: "64px 56px 48px", alignItems: "end",
      }}>
        <div>
          <div style={{
            fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.2em",
            textTransform: "uppercase", color: palette.accent, marginBottom: 18,
          }}>The Crowd-Casked Journal</div>
          <h1 style={{
            fontFamily: palette.display, fontSize: 72, lineHeight: 1.02,
            fontWeight: 500, letterSpacing: "-0.02em", margin: 0, maxWidth: 640,
          }}>
            A <em style={{ color: palette.accent }}>barrel</em> owned by four hundred
            hands, <em style={{ color: palette.accent }}>aged</em> on a river
            bluff, <em style={{ color: palette.accent }}>bottled</em> when the
            angels stop asking.
          </h1>
          <p style={{
            fontFamily: palette.serif, fontSize: 20, lineHeight: 1.55,
            color: palette.inkMuted, maxWidth: 540, marginTop: 26,
          }}>
            Sponsor a stave of a bourbon cask laid down this season. Watch it
            age live from the rickhouse. Decide together, year after year,
            when the cask is ready — then split the spoils like a very well
            organized pirate crew.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, alignItems: "center" }}>
            <button style={{
              padding: "14px 22px", background: palette.accent, color: "#FFF",
              border: "none", borderRadius: palette.radius,
              fontFamily: palette.sans, fontSize: 13, letterSpacing: "0.08em",
              textTransform: "uppercase", cursor: "pointer",
            }}>Claim a stave — $72</button>
            <button style={{
              padding: "14px 22px", background: "transparent", color: palette.ink,
              border: `1px solid ${palette.ink}`, borderRadius: palette.radius,
              fontFamily: palette.sans, fontSize: 13, letterSpacing: "0.08em",
              textTransform: "uppercase", cursor: "pointer",
            }}>Read the charter →</button>
          </div>
        </div>

        {/* Right: cask card */}
        <div style={{
          background: palette.card, borderRadius: palette.radius,
          border: `1px solid ${palette.rule}`, padding: 28,
          display: "flex", flexDirection: "column", gap: 16,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div style={{ fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.18em",
                color: palette.inkMuted, textTransform: "uppercase" }}>Active cask</div>
              <div style={{ fontFamily: palette.display, fontSize: 34, fontWeight: 500,
                marginTop: 4, letterSpacing: "-0.01em" }}>No. 0142 · Heaven's Floor</div>
            </div>
            <window.BarrelArt size={88} palette={palette} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14,
            padding: "18px 0", borderTop: `1px solid ${palette.rule}`, borderBottom: `1px solid ${palette.rule}` }}>
            {[
              ["Mash bill", "70 / 21 / 9", "Corn / Rye / Malt"],
              ["Entry proof", "115°", "Filled 03.2025"],
              ["Rickhouse", "5F", "North side · River bluff"],
            ].map(([k, v, sub]) => (
              <div key={k}>
                <div style={{ fontFamily: palette.mono, fontSize: 9.5, letterSpacing: "0.14em",
                  textTransform: "uppercase", color: palette.inkMuted }}>{k}</div>
                <div style={{ fontFamily: palette.display, fontSize: 18, fontWeight: 500, marginTop: 4 }}>{v}</div>
                <div style={{ fontFamily: palette.serif, fontSize: 13, color: palette.inkMuted, fontStyle: "italic" }}>{sub}</div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ display: "flex", justifyContent: "space-between",
              fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.14em",
              textTransform: "uppercase", color: palette.inkMuted, marginBottom: 8 }}>
              <span>Staves sponsored</span><span>72 / 400</span>
            </div>
            <div style={{ height: 6, background: "rgba(27,14,8,0.08)", borderRadius: 999 }}>
              <div style={{ height: "100%", width: "18%", background: palette.accent, borderRadius: 999 }} />
            </div>
            <div style={{ fontFamily: palette.serif, fontSize: 14, fontStyle: "italic",
              color: palette.inkMuted, marginTop: 10 }}>
              "It pours tangerine and toasted almond at 18 months. The vote to
              hold until summer is currently winning, 64%." — Sam R., sponsor
            </div>
          </div>
        </div>
      </div>

      {/* Featured articles band */}
      <div style={{ borderTop: `1px solid ${palette.rule}`, borderBottom: `1px solid ${palette.rule}`,
        padding: "40px 56px", background: palette.surface }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 36 }}>
          {[
            ["FIELD NOTE", "The Angels Take 37 Gallons", "Evaporation in year two tells you everything about the floor and the wood. Here's what we lost, and what stayed."],
            ["ROUNDTABLE", "Bottle, Blend, or Hold?", "Eight sponsors on whether to pull Cask 0141 next autumn — or give it another humid summer."],
            ["FROM THE RICKHOUSE", "A Stave's Life, in 900 Days", "From white oak stand to bottled pour, narrated by the cooper who raised it."],
          ].map(([kicker, title, dek]) => (
            <div key={title} style={{
              background: palette.card, padding: 24, borderRadius: palette.radius,
              border: `1px solid ${palette.rule}`,
            }}>
              <div style={{ fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.2em",
                textTransform: "uppercase", color: palette.accent }}>{kicker}</div>
              <div style={{ fontFamily: palette.display, fontSize: 24, fontWeight: 500,
                marginTop: 10, letterSpacing: "-0.01em", lineHeight: 1.15 }}>{title}</div>
              <div style={{ fontFamily: palette.serif, fontSize: 16, color: palette.inkMuted,
                marginTop: 10, lineHeight: 1.5 }}>{dek}</div>
              <div style={{ fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.14em",
                textTransform: "uppercase", color: palette.ink, marginTop: 16 }}>Read →</div>
            </div>
          ))}
        </div>
      </div>

      {/* How it works */}
      <div style={{ padding: "64px 56px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 36 }}>
          <h2 style={{ fontFamily: palette.display, fontSize: 44, fontWeight: 500,
            letterSpacing: "-0.02em", margin: 0 }}>The covenant</h2>
          <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.14em",
            textTransform: "uppercase", color: palette.inkMuted }}>§ III of the charter</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {[
            ["01", "Choose a cask", "Each season we lay down three barrels. Pick one before its staves are claimed."],
            ["02", "Sponsor a stave", "A stave is one vote and roughly two bottles. Four hundred staves fill a cask."],
            ["03", "Watch it age", "Monthly readings, live rickhouse camera, and quarterly sips mailed with tasting notes."],
            ["04", "Decide together", "At maturity, members vote on pull date, cut proof, and finish. Majority carries."],
          ].map(([n, h, p]) => (
            <div key={n}>
              <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.18em",
                color: palette.accent }}>{n}</div>
              <div style={{ fontFamily: palette.display, fontSize: 22, fontWeight: 500,
                marginTop: 10, letterSpacing: "-0.01em" }}>{h}</div>
              <div style={{ fontFamily: palette.serif, fontSize: 16, color: palette.inkMuted,
                marginTop: 8, lineHeight: 1.5 }}>{p}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{ borderTop: `1px solid ${palette.rule}`, padding: "28px 56px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.14em",
        textTransform: "uppercase", color: palette.inkMuted }}>
        <span>© {new Date().getFullYear()} CrowdCask'd · a cooperative</span>
        <span>Drink like you voted for it</span>
        <span>Press · Rickhouse hours · Legal</span>
      </div>
    </div>
  );
};