import { useState } from “react”;

// Each Nisan day has two segments: EVENING (night) then DAYTIME
// Hebrew day runs sunset-to-sunset: night comes FIRST, then day
// American label shows what we would call those same hours

const days = [
{
nisan: 8,
evening: { american: “WED EVENING”, events: [], tomb: null },
daytime: { american: “THURSDAY”,    events: [“Jericho. Zacchaeus encounter.”], tomb: null, ref: “LUKE 19:1”, inferred: true },
type: “transit”,
},
{
nisan: 9,
evening: { american: “THU EVENING”, events: [“Overnight in Jericho”], tomb: null, inferred: true },
daytime: { american: “FRIDAY”,      events: [“Departs Jericho. Arrives Bethany.”], tomb: null, ref: “JOHN 12:1”, anchor: true,
note: “SIX DAYS BEFORE PASSOVER — primary anchor” },
type: “anchor”,
},
{
nisan: 10,
evening: { american: “FRI EVENING”, events: [“Sabbath begins. Dinner at Bethany. Mary anoints Jesus.”], tomb: null, ref: “JOHN 12:2” },
daytime: { american: “SATURDAY”,    events: [“Triumphal Entry — Palm Saturday not Palm Sunday”, “Lamb of God presented to Jerusalem”],
tomb: null, ref: “JOHN 12:12  //  EXODUS 12:3”,
note: “PASSOVER LAMB PRESENTED — Exodus 12:3 fulfilled” },
type: “lamb”,
},
{
nisan: 11,
evening: { american: “SAT EVENING”, events: [], tomb: null },
daytime: { american: “SUNDAY”,      events: [“Rest at Bethany”], tomb: null, inferred: true },
type: “transit”,
},
{
nisan: 12,
evening: { american: “SUN EVENING”, events: [], tomb: null },
daytime: { american: “MONDAY”,      events: [“Fig tree cursed. Temple cleansed.”], tomb: null, ref: “MARK 11:15”, inferred: true },
type: “transit”,
},
{
nisan: 13,
evening: { american: “MON EVENING”, events: [], tomb: null },
daytime: { american: “TUESDAY”,     events: [“Bethany. Olivet Discourse.”], tomb: null, ref: “MARK 13”, inferred: true },
type: “transit”,
},
{
nisan: 14,
evening: { american: “TUE EVENING”, events: [“Upper Room meal”, “Arrest in Gethsemane”, “Trial before Sanhedrin”], tomb: null, ref: “JOHN 19:14” },
daytime: { american: “WEDNESDAY”,   events: [“Trial before Pilate”, “Crucifixion”, “Death at 3pm”, “Burial before sunset”],
tomb: null, ref: “JOHN 19:14  //  EXODUS 12:6”,
note: “PREPARATION DAY  //  PASSOVER LAMB SLAUGHTERED AT TWILIGHT” },
type: “crucifixion”,
},
{
nisan: 15,
evening: { american: “WED EVENING”, events: [“High Sabbath begins at sunset”, “Tomb sealed”], tomb: { label: “NIGHT 1” }, ref: “JOHN 19:31” },
daytime: { american: “THURSDAY”,    events: [“Passover. Feast of Unleavened Bread.”, “Megas sabbaton — holy convocation”],
tomb: { label: “DAY 1” }, ref: “LEV 23:7”,
note: “HIGH SABBATH  //  NOT THE WEEKLY SABBATH” },
type: “high-sabbath”,
},
{
nisan: 16,
evening: { american: “THU EVENING”, events: [“High Sabbath ends at sunset”, “Women may now move”], tomb: { label: “NIGHT 2” } },
daytime: { american: “FRIDAY”,      events: [“Women BUY spices — Mark 16:1”, “Women PREPARE spices — Luke 23:56”],
tomb: { label: “DAY 2” }, ref: “MARK 16:1  //  LUKE 23:56”,
note: “GAP DAY — resolves the two-verse contradiction” },
type: “gap”,
},
{
nisan: 17,
evening: { american: “FRI EVENING”, events: [“Weekly Sabbath begins at sunset”], tomb: { label: “NIGHT 3” }, ref: “LUKE 23:56” },
daytime: { american: “SATURDAY”,    events: [“Women rest — fourth commandment”],
tomb: { label: “DAY 3” }, ref: “LUKE 23:56” },
type: “sabbath”,
},
{
nisan: 18,
evening: { american: “SAT EVENING”, events: [“Weekly Sabbath ends at sunset”, “Resurrection”], tomb: null },
daytime: { american: “SUNDAY”,      events: [“Women arrive at tomb at sunrise”, “The tomb is empty”, “Jesus is alive”],
tomb: null, ref: “MARK 16:2”,
note: “MATTHEW 12:40 — THREE DAYS AND THREE NIGHTS FULFILLED” },
type: “resurrection”,
},
];

const theme = {
transit:        { accent: “#cccccc”, title: “#aaaaaa”, nightBg: “#fafafa”, dayBg: “#ffffff” },
anchor:         { accent: “#228844”, title: “#1a6633”, nightBg: “#f5faf7”, dayBg: “#edf7f1” },
lamb:           { accent: “#aa7700”, title: “#885500”, nightBg: “#fdf8f0”, dayBg: “#faf3e3” },
crucifixion:    { accent: “#cc1100”, title: “#aa0000”, nightBg: “#fff5f5”, dayBg: “#ffecec” },
“high-sabbath”: { accent: “#cc5500”, title: “#aa3300”, nightBg: “#fff8f3”, dayBg: “#fff0e6” },
gap:            { accent: “#888800”, title: “#666600”, nightBg: “#fafaf0”, dayBg: “#f5f5e0” },
sabbath:        { accent: “#2255cc”, title: “#1133aa”, nightBg: “#f5f7ff”, dayBg: “#edf0ff” },
resurrection:   { accent: “#116633”, title: “#0d5529”, nightBg: “#f0faf5”, dayBg: “#e3f5ec” },
};

const NIGHT_BG = “#f0f0f0”;   // universal night tint
const DAY_BG   = “#ffffff”;   // universal day white

function TombBadge({ label, night }) {
return (
<span style={{
fontFamily: “‘Share Tech Mono’, monospace”,
fontSize: 7, letterSpacing: “0.12em”,
color: night ? “#3333aa” : “#886600”,
border: `1px solid ${night ? "#aaaadd" : "#ccaa44"}`,
padding: “2px 8px”,
display: “inline-block”,
marginTop: 4,
}}>
{label}
</span>
);
}

export default function Timeline() {
const [open, setOpen] = useState(null);

return (
<div style={{
minHeight: “100vh”,
background: “#ffffff”,
fontFamily: “‘Share Tech Mono’, monospace”,
color: “#111111”,
padding: “0 0 80px”,
}}>
<style>{`@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:ital,wght@0,200;0,300;0,400;0,600;0,800;1,300&display=swap'); * { box-sizing: border-box; } .seg { cursor: pointer; transition: filter 0.1s; } .seg:hover { filter: brightness(0.97); }`}</style>

```
  {/* HEADER */}
  <div style={{
    display: "flex", flexDirection: "column", alignItems: "center",
    padding: "52px 24px 40px",
    borderBottom: "1px solid #e0e0e0",
  }}>
    <div style={{ width: 20, height: 80, background: "#111111", marginBottom: 32 }} />

    <div style={{
      fontFamily: "'Share Tech Mono', monospace",
      fontSize: 9, letterSpacing: "0.45em",
      color: "#999999", marginBottom: 12, textAlign: "center",
    }}>
      NISAN  CALENDAR  //  PASSION  WEEK
    </div>

    <div style={{
      fontFamily: "'Exo 2', sans-serif",
      fontWeight: 800, fontSize: 30,
      letterSpacing: "0.1em", color: "#111111",
      textAlign: "center", lineHeight: 1.15, marginBottom: 10,
    }}>
      THE WEDNESDAY<br />CRUCIFIXION
    </div>

    <div style={{ width: 40, height: 1, background: "#cccccc", marginBottom: 24 }} />

    <div style={{
      maxWidth: 400, textAlign: "center",
      fontFamily: "'Exo 2', sans-serif",
      fontWeight: 300, fontStyle: "italic",
      fontSize: 13, color: "#555555", lineHeight: 1.9,
      marginBottom: 10,
    }}>
      "For just as Jonah was in the belly of the huge fish for three days
      and three nights, so the Son of Man will be in the heart of the earth
      for three days and three nights."
    </div>
    <div style={{
      fontFamily: "'Share Tech Mono', monospace",
      fontSize: 8, color: "#aaaaaa", letterSpacing: "0.3em",
    }}>
      MATTHEW  12:40  NET
    </div>
  </div>

  {/* DAY RECKONING KEY */}
  <div style={{
    maxWidth: 680, margin: "32px auto 0", padding: "0 20px 24px",
    borderBottom: "1px solid #eeeeee",
  }}>
    <div style={{
      fontFamily: "'Share Tech Mono', monospace",
      fontSize: 8, letterSpacing: "0.35em",
      color: "#999999", marginBottom: 16,
    }}>
      HOW A DAY IS COUNTED
    </div>

    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
    }}>
      {/* Hebrew */}
      <div style={{ border: "1px solid #e0e0e0", padding: "14px 16px" }}>
        <div style={{
          fontFamily: "'Exo 2', sans-serif", fontWeight: 700,
          fontSize: 11, letterSpacing: "0.18em", color: "#333333", marginBottom: 8,
        }}>
          HEBREW RECKONING
        </div>
        <div style={{ display: "flex", height: 28, marginBottom: 8 }}>
          <div style={{
            flex: 1, background: NIGHT_BG,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <span style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, color: "#666666", letterSpacing: "0.1em" }}>
              EVENING  NIGHT
            </span>
          </div>
          <div style={{
            flex: 1, background: "#ffffff", border: "1px solid #eeeeee",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <span style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, color: "#666666", letterSpacing: "0.1em" }}>
              MORNING  DAY
            </span>
          </div>
        </div>
        <div style={{
          fontFamily: "'Exo 2', sans-serif", fontWeight: 300,
          fontSize: 11, color: "#777777", lineHeight: 1.7,
        }}>
          Day begins at sunset.<br />
          Evening comes first, then morning.<br />
          Genesis 1:5 — "there was evening,<br />and there was morning."
        </div>
      </div>

      {/* American */}
      <div style={{ border: "1px solid #e0e0e0", padding: "14px 16px" }}>
        <div style={{
          fontFamily: "'Exo 2', sans-serif", fontWeight: 700,
          fontSize: 11, letterSpacing: "0.18em", color: "#333333", marginBottom: 8,
        }}>
          AMERICAN RECKONING
        </div>
        <div style={{ display: "flex", height: 28, marginBottom: 8 }}>
          <div style={{
            flex: 1, background: "#ffffff", border: "1px solid #eeeeee",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <span style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, color: "#666666", letterSpacing: "0.1em" }}>
              12:00 AM  MIDNIGHT
            </span>
          </div>
          <div style={{
            flex: 1, background: NIGHT_BG,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <span style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, color: "#666666", letterSpacing: "0.1em" }}>
              EVENING  NIGHT
            </span>
          </div>
        </div>
        <div style={{
          fontFamily: "'Exo 2', sans-serif", fontWeight: 300,
          fontSize: 11, color: "#777777", lineHeight: 1.7,
        }}>
          Day begins at midnight.<br />
          Morning comes first, night ends the day.<br />
          Evening belongs to the same calendar date<br />
          it started on at midnight.
        </div>
      </div>
    </div>
  </div>

  {/* COLUMN HEADERS */}
  <div style={{ maxWidth: 680, margin: "0 auto", padding: "0 20px" }}>
    <div style={{
      display: "grid",
      gridTemplateColumns: "48px 8px 1fr 1fr",
      columnGap: 0,
      borderBottom: "1px solid #e0e0e0",
      padding: "12px 0 8px",
    }}>
      <div />
      <div />
      <div style={{
        background: NIGHT_BG,
        padding: "6px 12px",
        borderLeft: "1px solid #e0e0e0",
      }}>
        <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, letterSpacing: "0.25em", color: "#888888" }}>
          EVENING  /  NIGHT
        </div>
        <div style={{ fontFamily: "'Exo 2', sans-serif", fontWeight: 300, fontSize: 10, color: "#aaaaaa", marginTop: 2 }}>
          Hebrew day begins here
        </div>
      </div>
      <div style={{
        background: DAY_BG,
        padding: "6px 12px",
        borderLeft: "1px solid #e0e0e0",
        borderRight: "1px solid #e0e0e0",
      }}>
        <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, letterSpacing: "0.25em", color: "#888888" }}>
          MORNING  /  DAY
        </div>
        <div style={{ fontFamily: "'Exo 2', sans-serif", fontWeight: 300, fontSize: 10, color: "#aaaaaa", marginTop: 2 }}>
          American date changes here
        </div>
      </div>
    </div>

    {/* ROWS */}
    {days.map((d, i) => {
      const p = theme[d.type];
      const isOpen = open === i;
      const isKey = d.type !== "transit";

      return (
        <div
          key={i}
          className="seg"
          onClick={() => setOpen(isOpen ? null : i)}
          style={{
            display: "grid",
            gridTemplateColumns: "48px 8px 1fr 1fr",
            columnGap: 0,
            borderBottom: `1px solid ${isKey ? "#dddddd" : "#f0f0f0"}`,
            borderLeft: `3px solid ${isKey ? p.accent : "#eeeeee"}`,
          }}
        >
          {/* Nisan number */}
          <div style={{
            display: "flex", flexDirection: "column",
            alignItems: "flex-end", justifyContent: "center",
            paddingRight: 8, paddingTop: 12, paddingBottom: 12,
          }}>
            <div style={{
              fontFamily: "'Exo 2', sans-serif",
              fontWeight: isKey ? 800 : 300,
              fontSize: isKey ? 18 : 12,
              color: isKey ? p.title : "#cccccc",
              lineHeight: 1,
            }}>
              {d.nisan}
            </div>
            <div style={{
              fontFamily: "'Share Tech Mono', monospace",
              fontSize: 6, letterSpacing: "0.12em",
              color: isKey ? p.accent : "#dddddd",
              marginTop: 2,
            }}>
              NISAN
            </div>
          </div>

          {/* Dot */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <div style={{
              width: isKey ? 7 : 4,
              height: isKey ? 7 : 4,
              borderRadius: "50%",
              background: p.accent,
            }} />
          </div>

          {/* EVENING / NIGHT segment */}
          <div style={{
            background: NIGHT_BG,
            borderLeft: "1px solid #e0e0e0",
            padding: "10px 12px",
          }}>
            <div style={{
              fontFamily: "'Share Tech Mono', monospace",
              fontSize: 7, letterSpacing: "0.18em",
              color: "#888888", marginBottom: 5,
            }}>
              {d.evening.american}
            </div>
            {d.evening.events.map((e, j) => (
              <div key={j} style={{
                fontFamily: "'Exo 2', sans-serif",
                fontWeight: 300, fontSize: 11,
                color: "#444444", lineHeight: 1.6,
                marginBottom: 2,
              }}>
                {e}
              </div>
            ))}
            {d.evening.tomb && (
              <TombBadge label={d.evening.tomb.label} night={true} />
            )}
            {d.evening.ref && !d.daytime.ref && (
              <div style={{
                fontFamily: "'Share Tech Mono', monospace",
                fontSize: 7, color: "#aaaaaa",
                letterSpacing: "0.08em", marginTop: 4,
              }}>
                {d.evening.ref}
              </div>
            )}
          </div>

          {/* DAYTIME segment */}
          <div style={{
            background: DAY_BG,
            borderLeft: "1px solid #e0e0e0",
            borderRight: "1px solid #e0e0e0",
            padding: "10px 12px",
          }}>
            <div style={{
              fontFamily: "'Share Tech Mono', monospace",
              fontSize: 7, letterSpacing: "0.18em",
              color: "#888888", marginBottom: 5,
            }}>
              {d.daytime.american}
            </div>
            {d.daytime.events.map((e, j) => (
              <div key={j} style={{
                fontFamily: "'Exo 2', sans-serif",
                fontWeight: isKey ? 400 : 300,
                fontSize: 11,
                color: isKey ? "#222222" : "#666666",
                lineHeight: 1.6, marginBottom: 2,
              }}>
                {e}
              </div>
            ))}
            {d.daytime.tomb && (
              <TombBadge label={d.daytime.tomb.label} night={false} />
            )}
            {d.daytime.ref && (
              <div style={{
                fontFamily: "'Share Tech Mono', monospace",
                fontSize: 7, color: "#aaaaaa",
                letterSpacing: "0.08em", marginTop: 4,
              }}>
                {d.daytime.ref}
              </div>
            )}
            {d.daytime.note && isOpen && (
              <div style={{
                fontFamily: "'Share Tech Mono', monospace",
                fontSize: 7, color: p.title,
                letterSpacing: "0.12em",
                marginTop: 8, lineHeight: 1.7,
                borderTop: `1px solid ${p.accent}33`,
                paddingTop: 6,
              }}>
                {d.daytime.note}
              </div>
            )}
            {d.daytime.inferred && (
              <div style={{
                fontFamily: "'Share Tech Mono', monospace",
                fontSize: 6, color: "#aaaacc",
                border: "1px solid #ccccee",
                display: "inline-block",
                padding: "1px 5px", letterSpacing: "0.1em", marginTop: 4,
              }}>
                INFERRED
              </div>
            )}
          </div>
        </div>
      );
    })}
  </div>

  {/* FOOTER */}
  <div style={{ maxWidth: 680, margin: "48px auto 0", padding: "0 20px" }}>

    {/* Matt 12:40 */}
    <div style={{ borderTop: "1px solid #e0e0e0", paddingTop: 28, marginBottom: 36 }}>
      <div style={{
        fontFamily: "'Share Tech Mono', monospace",
        fontSize: 8, letterSpacing: "0.35em",
        color: "#999999", marginBottom: 14,
      }}>
        MATTHEW 12:40  //  SIGN OF JONAH  //  FULFILLED
      </div>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {[
          { label: "WED NIGHT", night: true },
          { label: "THU NIGHT", night: true },
          { label: "FRI NIGHT", night: true },
          { label: "THU DAY",   night: false },
          { label: "FRI DAY",   night: false },
          { label: "SAT DAY",   night: false },
        ].map((item, i) => (
          <div key={i} style={{
            fontFamily: "'Share Tech Mono', monospace",
            fontSize: 9, letterSpacing: "0.1em",
            padding: "6px 14px",
            color: item.night ? "#3333aa" : "#886600",
            border: `1px solid ${item.night ? "#aaaadd" : "#ccaa44"}`,
            background: item.night ? "#f5f5ff" : "#fffbf0",
          }}>
            {item.label}
          </div>
        ))}
      </div>
    </div>

    {/* Typology */}
    <div style={{ borderTop: "1px solid #e0e0e0", paddingTop: 28, marginBottom: 36 }}>
      <div style={{
        fontFamily: "'Share Tech Mono', monospace",
        fontSize: 8, letterSpacing: "0.35em",
        color: "#999999", marginBottom: 18,
      }}>
        PASSOVER LAMB TYPOLOGY
      </div>
      {[
        {
          ref: "EXODUS 12:3", nisan: "NISAN 10",
          type: "LAMB SELECTED",
          fulfill: "Jesus presents himself to Jerusalem on lamb selection day",
          col: theme.lamb.title, bdr: theme.lamb.accent,
        },
        {
          ref: "EXODUS 12:6", nisan: "NISAN 14",
          type: "LAMB SLAUGHTERED AT TWILIGHT",
          fulfill: "Jesus crucified on Preparation Day before sunset",
          col: theme.crucifixion.title, bdr: theme.crucifixion.accent,
        },
        {
          ref: "JOHN 1:29", nisan: null,
          type: "LAMB OF GOD",
          fulfill: "Takes away the sin of the world",
          col: theme.resurrection.title, bdr: theme.resurrection.accent,
        },
      ].map((row, i) => (
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "90px 160px 1fr",
          gap: 16, marginBottom: 14,
          paddingLeft: 12,
          borderLeft: `2px solid ${row.bdr}`,
        }}>
          <div>
            <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 8, color: row.col, letterSpacing: "0.1em" }}>
              {row.ref}
            </div>
            {row.nisan && (
              <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, color: "#aaaaaa", letterSpacing: "0.08em", marginTop: 2 }}>
                {row.nisan}
              </div>
            )}
          </div>
          <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 8, color: "#777777", letterSpacing: "0.06em", lineHeight: 1.6 }}>
            {row.type}
          </div>
          <div style={{ fontFamily: "'Exo 2', sans-serif", fontWeight: 300, fontSize: 12, color: "#333333", lineHeight: 1.6 }}>
            {row.fulfill}
          </div>
        </div>
      ))}
    </div>

    {/* Two sabbath */}
    <div style={{ borderTop: "1px solid #e0e0e0", paddingTop: 28, marginBottom: 36 }}>
      <div style={{
        fontFamily: "'Share Tech Mono', monospace",
        fontSize: 8, letterSpacing: "0.35em",
        color: "#999999", marginBottom: 18,
      }}>
        TWO SABBATH RESOLUTION
      </div>
      {[
        { ref: "MARK 16:1",  text: "Women buy spices after the sabbath.", col: theme["high-sabbath"].title },
        { ref: "LUKE 23:56", text: "Women prepare spices then rest on the sabbath.", col: theme.sabbath.title },
      ].map((row, i) => (
        <div key={i} style={{ display: "flex", gap: 20, marginBottom: 10, alignItems: "baseline" }}>
          <span style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 8, color: row.col, letterSpacing: "0.1em", flexShrink: 0, width: 88 }}>
            {row.ref}
          </span>
          <span style={{ fontFamily: "'Exo 2', sans-serif", fontWeight: 300, fontSize: 13, color: "#333333", lineHeight: 1.7 }}>
            {row.text}
          </span>
        </div>
      ))}
      <div style={{
        marginTop: 12, paddingLeft: 108,
        fontFamily: "'Exo 2', sans-serif",
        fontWeight: 300, fontStyle: "italic",
        fontSize: 12, color: "#777777", lineHeight: 1.9,
      }}>
        Nisan 16 Friday is the only day that satisfies both statements
        without contradiction. The Friday crucifixion view produces an
        irreconcilable conflict between these two verses.
      </div>
    </div>

    {/* Closing */}
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 24, borderTop: "1px solid #eeeeee" }}>
      <div style={{ fontFamily: "'Share Tech Mono', monospace", fontSize: 7, letterSpacing: "0.3em", color: "#cccccc", marginBottom: 16 }}>
        TAP ANY ROW TO EXPAND  //  NET BIBLE TRANSLATION
      </div>
      <div style={{ width: 12, height: 48, background: "#111111" }} />
    </div>

  </div>
</div>
```

);
}