/* website-vintage.jsx — dark, Prohibition-era distillery feel.
   Warm amber, cream type, lots of hairline ornament. */

window.WebsiteVintage = function WebsiteVintage() {
  const palette = window.PALETTES.vintage;
  const Wordmark = window.Wordmark;

  const rule = (
    <div style={{
      height: 1, background: palette.rule,
      boxShadow: `0 2px 0 ${palette.rule}`,
    }} />
  );

  return (
    <div style={{
      background: palette.bg, color: palette.ink, minHeight: "100%",
      fontFamily: palette.serif,
      backgroundImage: "radial-gradient(circle at 50% 0%, rgba(233,180,116,0.08), transparent 50%)",
    }}>
      {/* Top bar */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "20px 56px",
      }}>
        <div style={{ fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.3em",
          color: palette.inkMuted, textTransform: "uppercase" }}>
          EST. MMXXV · BOND NO. 0142
        </div>
        <div style={{ fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.3em",
          color: palette.inkMuted, textTransform: "uppercase" }}>
          Tallowed Rickhouse · River Bluff, KY
        </div>
      </div>
      {rule}

      {/* Masthead */}
      <div style={{ padding: "52px 56px 24px", textAlign: "center" }}>
        <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.4em",
          color: palette.accent, textTransform: "uppercase", marginBottom: 22 }}>
          ✦ The Cooperative of Patient Drinkers ✦
        </div>
        <Wordmark palette={palette} size={84} style={{ letterSpacing: "0.02em" }} />
        <div style={{ fontFamily: palette.serif, fontSize: 22, fontStyle: "italic",
          color: palette.inkMuted, marginTop: 18, letterSpacing: "0.02em" }}>
          Four hundred hands, one small barrel, considerable patience.
        </div>
      </div>
      {rule}

      {/* Triple ornament band */}
      <div style={{ padding: "22px 56px", display: "flex", justifyContent: "center",
        gap: 42, fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.24em",
        color: palette.inkMuted, textTransform: "uppercase" }}>
        <span>I. Fill</span>
        <span>·</span>
        <span>II. Age</span>
        <span>·</span>
        <span>III. Vote</span>
        <span>·</span>
        <span>IV. Bottle</span>
      </div>
      {rule}

      {/* Hero block */}
      <div style={{ padding: "56px 56px", display: "grid",
        gridTemplateColumns: "1fr 360px", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.3em",
            color: palette.accent, textTransform: "uppercase", marginBottom: 18 }}>
            ——— A broadside ———
          </div>
          <h1 style={{ fontFamily: palette.display, fontSize: 66, lineHeight: 1.08,
            fontWeight: 500, margin: 0, letterSpacing: "0.005em" }}>
            Sponsor a <span style={{ fontStyle: "italic", color: palette.accent }}>stave</span>.
            Mind it like an <span style={{ fontStyle: "italic", color: palette.accent }}>heirloom</span>.
            Bottle it when the room agrees.
          </h1>
          <p style={{ fontFamily: palette.serif, fontSize: 20, lineHeight: 1.55,
            color: palette.inkMuted, marginTop: 26, fontStyle: "italic", maxWidth: 520 }}>
            A small society proposes: every season a single oak cask, lightly
            charred and heavily considered. Four hundred sponsors; four years
            of weather; one democratic uncorking.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 32, alignItems: "center" }}>
            <button style={{
              padding: "14px 22px", background: palette.accent, color: palette.bg,
              border: "none", borderRadius: palette.radius, cursor: "pointer",
              fontFamily: palette.sans, fontSize: 12.5, letterSpacing: "0.14em",
              textTransform: "uppercase", fontWeight: 600,
            }}>Claim a stave · $72</button>
            <span style={{ fontFamily: palette.mono, fontSize: 11, letterSpacing: "0.2em",
              color: palette.inkMuted, textTransform: "uppercase" }}>
              —— 72 of 400 taken ——
            </span>
          </div>
        </div>
        {/* Cask plate */}
        <div style={{
          border: `1px solid ${palette.rule}`, padding: "36px 28px 28px",
          background: palette.surface, position: "relative",
          boxShadow: `0 0 0 4px ${palette.bg}, 0 0 0 5px ${palette.rule}`,
          textAlign: "center",
        }}>
          <div style={{ fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.3em",
            color: palette.inkMuted, textTransform: "uppercase", marginBottom: 18 }}>
            Bonded Barrel
          </div>
          <window.BarrelArt size={120} palette={palette} />
          <div style={{ fontFamily: palette.display, fontSize: 36, fontWeight: 500,
            marginTop: 16, letterSpacing: "0.02em" }}>
            No. 0142
          </div>
          <div style={{ fontFamily: palette.serif, fontStyle: "italic", fontSize: 18,
            color: palette.inkMuted, marginTop: 2 }}>
            "Heaven's Floor"
          </div>
          <div style={{ margin: "18px auto 10px", height: 1, background: palette.rule, width: "60%" }} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, textAlign: "left",
            fontFamily: palette.mono, fontSize: 10.5, letterSpacing: "0.14em",
            textTransform: "uppercase", color: palette.inkMuted }}>
            <span>Mash 70·21·9</span><span>Entry 115°</span>
            <span>Floor 5 · N</span><span>Char ★★★</span>
          </div>
        </div>
      </div>
      {rule}

      {/* "Ledger" */}
      <div style={{ padding: "48px 56px" }}>
        <div style={{ textAlign: "center", fontFamily: palette.mono, fontSize: 11,
          letterSpacing: "0.3em", color: palette.accent, textTransform: "uppercase", marginBottom: 24 }}>
          The Ledger
        </div>
        <div style={{
          border: `1px solid ${palette.rule}`, background: palette.surface,
          fontFamily: palette.mono,
        }}>
          {[
            ["MAR 2025", "Barrel filled · 53 gal · entry 115°", "signed, W.P. Cooper"],
            ["AUG 2025", "First reading · 116.8° · tangerine, toasted oat", "R. Hollis, master"],
            ["DEC 2025", "Winter tare · angel's share 1.9% · stable", "auditor G. Lowe"],
            ["APR 2026", "Quarterly sample · vote: hold or bottle", "400 members"],
          ].map(([date, entry, sig], i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "110px 1fr 180px",
              padding: "14px 22px", borderTop: i === 0 ? "none" : `1px solid ${palette.rule}`,
              gap: 16, fontSize: 13, alignItems: "center",
            }}>
              <span style={{ letterSpacing: "0.14em", color: palette.accent }}>{date}</span>
              <span style={{ fontFamily: palette.serif, fontStyle: "italic", fontSize: 16,
                color: palette.ink }}>{entry}</span>
              <span style={{ textAlign: "right", fontSize: 11, letterSpacing: "0.1em",
                color: palette.inkMuted }}>{sig}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: "26px 56px 46px", textAlign: "center" }}>
        <div style={{ fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.3em",
          color: palette.inkMuted, textTransform: "uppercase" }}>
          ✦ Aged in bond · Sold by the stave · Drunk by committee ✦
        </div>
      </div>
    </div>
  );
};