/* website-minimal.jsx — modern-minimal direction. More Aesop than
   Wild Turkey: quiet typography, generous space, warm sand accent. */

window.WebsiteMinimal = function WebsiteMinimal() {
  const palette = window.PALETTES.minimal;
  const Wordmark = window.Wordmark;

  return (
    <div style={{
      background: palette.bg, color: palette.ink, minHeight: "100%",
      fontFamily: palette.sans,
    }}>
      {/* Nav */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "28px 64px",
      }}>
        <Wordmark palette={palette} size={20} />
        <div style={{ display: "flex", gap: 36, fontSize: 13.5, color: palette.inkMuted }}>
          <a style={{ color: "inherit" }}>Concept</a>
          <a style={{ color: "inherit" }}>Cask</a>
          <a style={{ color: "inherit" }}>Members</a>
          <a style={{ color: "inherit" }}>Journal</a>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a style={{ color: palette.inkMuted, fontSize: 13.5 }}>Sign in</a>
          <button style={{
            padding: "10px 18px", background: palette.ink, color: palette.bg,
            border: "none", borderRadius: 999, fontSize: 13, fontWeight: 500, cursor: "pointer",
          }}>Get notified</button>
        </div>
      </div>

      {/* Hero */}
      <div style={{ padding: "100px 64px 72px" }}>
        <div style={{ maxWidth: 820 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase",
            color: palette.accent, marginBottom: 28, fontFamily: palette.mono }}>
            Now filling · Season 04
          </div>
          <h1 style={{
            fontSize: 78, lineHeight: 1.05, fontWeight: 500, letterSpacing: "-0.04em",
            margin: 0, color: palette.ink,
          }}>
            Own a share of the cask.<br/>
            Drink it in four years.
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: palette.inkMuted, maxWidth: 620, marginTop: 28 }}>
            A bourbon fractional, the way a quiet magazine would do it. Four hundred
            members sponsor a single barrel, age it together, and share the bottles.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <button style={{
              padding: "14px 22px", background: palette.ink, color: palette.bg,
              border: "none", borderRadius: 999, fontSize: 14, fontWeight: 500, cursor: "pointer",
            }}>Claim a stave · $72</button>
            <button style={{
              padding: "14px 22px", background: "transparent", color: palette.ink,
              border: `1px solid ${palette.rule}`, borderRadius: 999, fontSize: 14, cursor: "pointer",
            }}>Watch the rickhouse →</button>
          </div>
        </div>
      </div>

      {/* Live card grid */}
      <div style={{ padding: "0 64px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr 1fr", gap: 16 }}>
          {/* Feature cask card */}
          <div style={{
            background: palette.card, borderRadius: palette.radius, padding: 32,
            border: `1px solid ${palette.rule}`, display: "flex", flexDirection: "column",
            justifyContent: "space-between", minHeight: 360,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.14em",
                  textTransform: "uppercase", color: palette.inkMuted }}>Cask 0142</div>
                <div style={{ fontSize: 40, fontWeight: 500, letterSpacing: "-0.03em", marginTop: 6,
                  lineHeight: 1.05 }}>Heaven's Floor</div>
                <div style={{ fontSize: 15, color: palette.inkMuted, marginTop: 6 }}>
                  High-rye bourbon · Filled March 2025
                </div>
              </div>
              <window.BarrelArt size={90} palette={palette} />
            </div>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between",
                fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.14em",
                textTransform: "uppercase", color: palette.inkMuted, marginBottom: 8 }}>
                <span>Staves claimed</span><span>72 / 400</span>
              </div>
              <div style={{ height: 3, background: "rgba(0,0,0,0.06)", borderRadius: 999 }}>
                <div style={{ height: "100%", width: "18%", background: palette.accent, borderRadius: 999 }} />
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
                <button style={{
                  padding: "10px 16px", background: palette.ink, color: palette.bg,
                  border: "none", borderRadius: 999, fontSize: 12.5, cursor: "pointer",
                }}>Sponsor a stave</button>
                <button style={{
                  padding: "10px 16px", background: "transparent", color: palette.ink,
                  border: `1px solid ${palette.rule}`, borderRadius: 999, fontSize: 12.5, cursor: "pointer",
                }}>Detail</button>
              </div>
            </div>
          </div>

          {/* Live readings */}
          <div style={{
            background: palette.surface, borderRadius: palette.radius, padding: 28,
            minHeight: 360, display: "flex", flexDirection: "column", justifyContent: "space-between",
          }}>
            <div>
              <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.14em",
                textTransform: "uppercase", color: palette.inkMuted }}>Live readings</div>
              <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 14 }}>
                {[
                  ["Rickhouse temp", "78° F", "+2 since sunrise"],
                  ["Barrel proof", "121.4°", "Up 2.1 from Q1"],
                  ["Angel's share", "3.8%", "Year to date"],
                ].map(([k, v, sub]) => (
                  <div key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <div style={{ fontSize: 13, color: palette.inkMuted }}>{k}</div>
                    <div style={{ textAlign: "right" }}>
                      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{v}</div>
                      <div style={{ fontSize: 11, color: palette.inkMuted, fontFamily: palette.mono }}>{sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ fontSize: 11.5, fontFamily: palette.mono, letterSpacing: "0.12em",
              textTransform: "uppercase", color: palette.inkMuted }}>
              Updated 3 min ago
            </div>
          </div>

          {/* Next vote */}
          <div style={{
            background: palette.ink, color: palette.bg, borderRadius: palette.radius, padding: 28,
            minHeight: 360, display: "flex", flexDirection: "column", justifyContent: "space-between",
          }}>
            <div>
              <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.14em",
                textTransform: "uppercase", color: palette.accent }}>Next vote</div>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 10,
                lineHeight: 1.15 }}>Cask 0141 · Pull date</div>
              <div style={{ fontSize: 14, opacity: 0.75, marginTop: 8, lineHeight: 1.5 }}>
                Summer humidity vs. autumn plateau. Your stave is one vote.
              </div>
            </div>
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12,
                fontFamily: palette.mono, letterSpacing: "0.12em", textTransform: "uppercase",
                opacity: 0.7, marginBottom: 8 }}>
                <span>Hold through August</span><span>64%</span>
              </div>
              <div style={{ height: 2, background: "rgba(255,255,255,0.15)", borderRadius: 999 }}>
                <div style={{ height: "100%", width: "64%", background: palette.accent, borderRadius: 999 }} />
              </div>
              <button style={{
                marginTop: 18, padding: "10px 16px", background: palette.bg, color: palette.ink,
                border: "none", borderRadius: 999, fontSize: 12.5, cursor: "pointer", fontWeight: 500,
              }}>Cast your vote</button>
            </div>
          </div>
        </div>
      </div>

      {/* How it works */}
      <div style={{ padding: "80px 64px", borderTop: `1px solid ${palette.rule}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 64, alignItems: "start" }}>
          <div>
            <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.18em",
              textTransform: "uppercase", color: palette.accent }}>The model</div>
            <h2 style={{ fontSize: 44, fontWeight: 500, letterSpacing: "-0.03em", margin: "14px 0 18px" }}>
              Four steps. About four years.
            </h2>
            <p style={{ fontSize: 16, color: palette.inkMuted, lineHeight: 1.6 }}>
              Quiet. Legal. Warmly communal. Built with a Kentucky distiller of record,
              bonded warehouses, and receipts you can actually read.
            </p>
          </div>
          <div style={{ display: "grid", gap: 2 }}>
            {[
              ["Choose a cask", "Three barrels laid down each season. Pick one before staves are claimed."],
              ["Sponsor a stave", "A stave costs $72 and grants two bottles plus one vote on every major decision."],
              ["Watch it age", "Monthly readings, quarterly sips, and a live camera feed from Rickhouse 5F."],
              ["Decide together", "Members vote on pull date, proof, finish, and label. Majority carries the barrel."],
            ].map(([h, p], i) => (
              <div key={h} style={{
                padding: "22px 4px", borderBottom: `1px solid ${palette.rule}`,
                display: "grid", gridTemplateColumns: "40px 1fr", gap: 18, alignItems: "baseline",
              }}>
                <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.16em",
                  color: palette.inkMuted }}>0{i + 1}</div>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em" }}>{h}</div>
                  <div style={{ fontSize: 15, color: palette.inkMuted, marginTop: 4, lineHeight: 1.55 }}>{p}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: "80px 64px 100px", borderTop: `1px solid ${palette.rule}`, textAlign: "center" }}>
        <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: "-0.03em", margin: 0 }}>
          Join the next four hundred.
        </h2>
        <p style={{ fontSize: 16, color: palette.inkMuted, marginTop: 14 }}>
          Cask 0142 opens for sponsorship this Friday. 72 of 400 staves already claimed.
        </p>
        <button style={{
          marginTop: 28, padding: "16px 28px", background: palette.ink, color: palette.bg,
          border: "none", borderRadius: 999, fontSize: 14, fontWeight: 500, cursor: "pointer",
        }}>Get on the list</button>
      </div>

      {/* Footer */}
      <div style={{ padding: "28px 64px", borderTop: `1px solid ${palette.rule}`,
        display: "flex", justifyContent: "space-between",
        fontSize: 12, color: palette.inkMuted }}>
        <span>© {new Date().getFullYear()} CrowdCask'd</span>
        <span>Drink responsibly, vote responsibly</span>
        <span>Press · Terms · Privacy</span>
      </div>
    </div>
  );
};