// Hero section with animated inbox → calendar extraction demo
const heroStyles = {
  hero: {
    paddingTop: "120px",
    paddingBottom: "64px",
    position: "relative",
    overflow: "hidden",
  },
  badge: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    padding: "6px 12px",
    borderRadius: 999,
    border: "1px solid var(--line-strong)",
    background: "var(--bg-elev)",
    fontSize: 13,
    color: "var(--ink-2)",
    marginBottom: 28,
    boxShadow: "var(--shadow-sm)",
  },
  badgeDot: {
    width: 6,
    height: 6,
    borderRadius: 999,
    background: "var(--accent)",
    boxShadow: "0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent)",
  },
  sub: {
    fontSize: "clamp(1.05rem, 1.4vw, 1.25rem)",
    color: "var(--muted)",
    maxWidth: 560,
    marginTop: 24,
    marginBottom: 36,
    lineHeight: 1.55,
  },
  ctaRow: { display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" },
  trustRow: {
    display: "flex",
    gap: 24,
    marginTop: 32,
    alignItems: "center",
    color: "var(--muted)",
    fontSize: 13,
    flexWrap: "wrap",
  },
  trustItem: { display: "flex", alignItems: "center", gap: 6 },
  grid: {
    display: "grid",
    gridTemplateColumns: "1fr",
    gap: 56,
    alignItems: "center",
  },
};

function HeroBadge() {
  return (
    <div style={heroStyles.badge}>
      <span style={heroStyles.badgeDot}></span>
      <span>Private beta · Limited spots</span>
    </div>
  );
}

function Hero({ onJoin }) {
  return (
    <section style={heroStyles.hero}>
      <div className="container">
        <div
          className="hero-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
            gap: 56,
            alignItems: "center",
          }}
        >
          <div className="reveal in">
            <HeroBadge />
            <h1>
              Your kids' school concert
              <br />
              is in your inbox.
              <br />
              <span
                style={{
                  color: "var(--accent-ink)",
                  fontStyle: "italic",
                  fontWeight: 400,
                }}
              >
                So is everything else.
              </span>
            </h1>
            <p style={heroStyles.sub}>
              We watch your email and group chats, pull out the events that
              matter, and drop them into your calendar. You don't have to do
              anything.
            </p>
            <div style={heroStyles.ctaRow}>
              <button className="btn btn-primary" onClick={onJoin}>
                Get early access <IArrow size={16} />
              </button>
              <a className="btn btn-secondary" href="#how">
                <IPlay size={14} /> Watch demo
              </a>
            </div>
            <div style={heroStyles.trustRow}>
              <span style={heroStyles.trustItem}>
                <IShield size={14} /> Read-only access
              </span>
              <span style={heroStyles.trustItem}>
                <ICheck size={14} /> Cancel anytime
              </span>
              <span style={heroStyles.trustItem} className="mono">
                247 on the waitlist
              </span>
            </div>
          </div>
          <HeroDemo />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Animated demo: an email arrives → AI extracts → lands in calendar
// ============================================================

const SAMPLE_EMAILS = [
  {
    from: "Greenwood Elementary",
    fromShort: "GE",
    subject: "Spring concert — Thursday May 14, 6:30pm",
    preview:
      "Dear families, please join us in the gym for our annual spring concert featuring grades 2 through 5...",
    event: {
      title: "Lily's Spring Concert",
      date: "Thu May 14",
      time: "6:30 PM",
      loc: "School Gym",
      who: "Lily",
      whoColor: "#74473B",
    },
    color: "#74473B",
  },
  {
    from: "Riverside Pediatrics",
    fromShort: "RP",
    subject: "Reminder: Wellness check May 22",
    preview:
      "This is a reminder of Max's upcoming appointment with Dr. Patel on Friday...",
    event: {
      title: "Max — Dr. Patel",
      date: "Fri May 22",
      time: "10:15 AM",
      loc: "Riverside Clinic",
      who: "Max",
      whoColor: "#2D5A52",
    },
    color: "#2D5A52",
  },
  {
    from: "Northside Soccer",
    fromShort: "NS",
    subject: "Practice rescheduled — now Saturday 9am",
    preview:
      "Heads up parents — due to field maintenance, this Saturday's practice moves to...",
    event: {
      title: "Soccer Practice",
      date: "Sat May 17",
      time: "9:00 AM",
      loc: "Field 3",
      who: "Lily",
      whoColor: "#74473B",
    },
    color: "#71717A",
  },
];

function HeroDemo() {
  const [step, setStep] = React.useState(0); // 0: idle, 1: email arrives, 2: scanning, 3: extracted, 4: on calendar
  const [emailIdx, setEmailIdx] = React.useState(0);
  const [calendarEvents, setCalendarEvents] = React.useState([]);

  React.useEffect(() => {
    const seq = [
      { delay: 600, to: 1 }, // email slides in
      { delay: 1100, to: 2 }, // AI scans
      { delay: 1400, to: 3 }, // event card pops
      { delay: 1300, to: 4 }, // event lands in calendar
      { delay: 1800, to: 0 }, // pause then next
    ];
    let timeouts = [];
    let cumDelay = 0;
    seq.forEach((s) => {
      cumDelay += s.delay;
      timeouts.push(
        setTimeout(() => {
          setStep(s.to);
          if (s.to === 4) {
            const ev = SAMPLE_EMAILS[emailIdx].event;
            setCalendarEvents((prev) => {
              const next = [...prev, ev];
              return next.slice(-3);
            });
          }
          if (s.to === 0) {
            setEmailIdx((i) => (i + 1) % SAMPLE_EMAILS.length);
          }
        }, cumDelay),
      );
    });
    return () => timeouts.forEach(clearTimeout);
  }, [emailIdx]);

  const email = SAMPLE_EMAILS[emailIdx];

  return (
    <div
      style={{
        position: "relative",
        minHeight: 540,
        borderRadius: "var(--radius-lg)",
        background: "var(--bg-soft)",
        border: "1px solid var(--line)",
        padding: 24,
        overflow: "hidden",
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gridTemplateRows: "1fr auto 1fr",
          gap: 16,
          height: "100%",
          minHeight: 492,
        }}
      >
        <InboxPanel email={email} step={step} />
        <ExtractionBridge step={step} email={email} />
        <CalendarPanel
          events={calendarEvents}
          latestColor={email.color}
          step={step}
        />
      </div>
    </div>
  );
}

function InboxPanel({ email, step }) {
  return (
    <div
      style={{
        background: "var(--bg-elev)",
        border: "1px solid var(--line)",
        borderRadius: 12,
        boxShadow: "var(--shadow-sm)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        minHeight: 0,
      }}
    >
      <div
        style={{
          padding: "10px 14px",
          borderBottom: "1px solid var(--line)",
          display: "flex",
          alignItems: "center",
          gap: 8,
          fontSize: 12,
          color: "var(--muted)",
        }}
      >
        <IInbox size={14} />
        <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>Inbox</span>
        <span className="mono" style={{ marginLeft: "auto" }}>
          3 unread
        </span>
      </div>
      <div
        style={{
          flex: 1,
          padding: 8,
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Static older emails */}
        <EmailRow
          muted
          from="Costco Membership"
          subj="Your renewal is on its way"
        />
        <EmailRow muted from="LinkedIn" subj="3 new connection requests" />
        {/* The animated incoming email */}
        <div
          key={email.subject}
          style={{
            position: "relative",
            transform: step >= 1 ? "translateY(0)" : "translateY(-30px)",
            opacity: step >= 1 ? 1 : 0,
            transition: "all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)",
          }}
        >
          <EmailRow
            from={email.from}
            fromShort={email.fromShort}
            subj={email.subject}
            preview={email.preview}
            highlight={step >= 1 && step <= 2}
            scanning={step === 2}
            color={email.color}
          />
        </div>
      </div>
    </div>
  );
}

function EmailRow({
  from,
  fromShort,
  subj,
  preview,
  muted,
  highlight,
  scanning,
  color,
}) {
  return (
    <div
      style={{
        display: "flex",
        gap: 12,
        padding: "10px 12px",
        borderRadius: 8,
        background: highlight
          ? "color-mix(in oklch, var(--accent) 8%, transparent)"
          : "transparent",
        border: highlight
          ? "1px solid color-mix(in oklch, var(--accent) 30%, transparent)"
          : "1px solid transparent",
        transition: "all 0.3s ease",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          flexShrink: 0,
          width: 32,
          height: 32,
          borderRadius: 8,
          background: color || "var(--bg-soft)",
          color: color ? "white" : "var(--muted)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 11,
          fontWeight: 600,
          opacity: muted ? 0.5 : 1,
        }}
      >
        {fromShort || from?.[0] || "?"}
      </div>
      <div style={{ minWidth: 0, flex: 1, opacity: muted ? 0.45 : 1 }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "baseline",
            gap: 8,
          }}
        >
          <span
            style={{
              fontSize: 13,
              fontWeight: 500,
              color: "var(--ink)",
              whiteSpace: "nowrap",
              overflow: "hidden",
              textOverflow: "ellipsis",
            }}
          >
            {from}
          </span>
        </div>
        <div
          style={{
            fontSize: 13,
            color: "var(--ink-2)",
            marginTop: 2,
            overflow: "hidden",
            textOverflow: "ellipsis",
            whiteSpace: "nowrap",
          }}
        >
          {subj}
        </div>
        {preview && (
          <div
            style={{
              fontSize: 12,
              color: "var(--muted)",
              marginTop: 2,
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
            }}
          >
            {preview}
          </div>
        )}
      </div>
      {scanning && <ScanLine />}
    </div>
  );
}

function ScanLine() {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        background:
          "linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--accent) 30%, transparent) 50%, transparent 100%)",
        animation: "scanSweep 1s ease-in-out",
        pointerEvents: "none",
      }}
    />
  );
}

function ExtractionBridge({ step, email }) {
  const showCard = step >= 3;
  return (
    <div
      style={{
        position: "relative",
        height: 64,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {/* Connector line */}
      <svg
        width="2"
        height="100%"
        style={{
          position: "absolute",
          left: "50%",
          transform: "translateX(-50%)",
          overflow: "visible",
        }}
      >
        <line
          x1="1"
          y1="0"
          x2="1"
          y2="100%"
          stroke="var(--line-strong)"
          strokeWidth="1"
          strokeDasharray="3 3"
        />
      </svg>

      {/* AI badge or extracted card */}
      <div
        style={{
          position: "relative",
          background: "var(--bg-elev)",
          border: "1px solid var(--line-strong)",
          borderRadius: 10,
          padding: showCard ? "10px 14px" : "6px 12px",
          boxShadow: "var(--shadow-md)",
          display: "flex",
          alignItems: "center",
          gap: 10,
          transition: "all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)",
          transform: showCard ? "scale(1)" : "scale(0.92)",
        }}
      >
        {showCard ? (
          <React.Fragment>
            <div
              style={{
                width: 28,
                height: 28,
                borderRadius: 6,
                background: email.event.whoColor,
                color: "white",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 11,
                fontWeight: 600,
              }}
            >
              {email.event.who[0]}
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>
                {email.event.title}
              </div>
              <div
                className="mono"
                style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}
              >
                {email.event.date} · {email.event.time} · {email.event.loc}
              </div>
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div
              style={{
                width: 18,
                height: 18,
                borderRadius: 999,
                background: step === 2 ? "var(--accent)" : "var(--bg-soft)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                transition: "all 0.3s ease",
              }}
            >
              <ISpark
                size={11}
                stroke={step === 2 ? "white" : "var(--muted)"}
                strokeWidth={2}
              />
            </div>
            <span
              className="mono"
              style={{
                fontSize: 11,
                color: "var(--muted)",
                textTransform: "uppercase",
                letterSpacing: "0.1em",
              }}
            >
              {step === 2
                ? "Reading…"
                : step === 0 || step === 1
                  ? "Watching inbox"
                  : "Done"}
            </span>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function CalendarPanel({ events, latestColor, step }) {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  return (
    <div
      style={{
        background: "var(--bg-elev)",
        border: "1px solid var(--line)",
        borderRadius: 12,
        boxShadow: "var(--shadow-sm)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        minHeight: 0,
      }}
    >
      <div
        style={{
          padding: "10px 14px",
          borderBottom: "1px solid var(--line)",
          display: "flex",
          alignItems: "center",
          gap: 8,
          fontSize: 12,
          color: "var(--muted)",
        }}
      >
        <ICal size={14} />
        <span style={{ fontWeight: 500, color: "var(--ink-2)" }}>
          This week
        </span>
        <span className="mono" style={{ marginLeft: "auto" }}>
          May 12 — 18
        </span>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(7, 1fr)",
          flex: 1,
          position: "relative",
        }}
      >
        {days.map((d, i) => (
          <div
            key={d}
            style={{
              borderRight: i < 6 ? "1px solid var(--line)" : "none",
              padding: "8px 6px",
              display: "flex",
              flexDirection: "column",
              gap: 4,
              minWidth: 0,
              position: "relative",
            }}
          >
            <div
              className="mono"
              style={{
                fontSize: 10,
                color: "var(--muted)",
                textTransform: "uppercase",
                letterSpacing: "0.08em",
              }}
            >
              {d}
            </div>
            <div style={{ fontSize: 16, fontWeight: 500, color: "var(--ink)" }}>
              {12 + i}
            </div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 3,
                marginTop: 4,
              }}
            >
              {events
                .filter((e) => calendarDayIndex(e.date) === i)
                .map((e, idx) => {
                  const justAdded =
                    step === 4 &&
                    events.length > 0 &&
                    events[events.length - 1] === e;
                  return (
                    <CalEvent
                      key={`${e.title}-${idx}`}
                      event={e}
                      fresh={justAdded}
                    />
                  );
                })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function calendarDayIndex(dateStr) {
  // Map "Thu May 14" → 3, "Fri May 22" wraps but for demo we keep within week
  const map = { Mon: 0, Tue: 1, Wed: 2, Thu: 3, Fri: 4, Sat: 5, Sun: 6 };
  const day = dateStr.split(" ")[0];
  return map[day] ?? 3;
}

function CalEvent({ event, fresh }) {
  return (
    <div
      style={{
        padding: "4px 6px",
        borderRadius: 4,
        background: `color-mix(in oklch, ${event.whoColor} 15%, transparent)`,
        borderLeft: `2px solid ${event.whoColor}`,
        fontSize: 10,
        lineHeight: 1.25,
        animation: fresh
          ? "eventLand 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)"
          : "none",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          fontWeight: 500,
          color: "var(--ink)",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
        }}
      >
        {event.title}
      </div>
      <div
        className="mono"
        style={{ color: "var(--muted)", fontSize: 9, marginTop: 1 }}
      >
        {event.time}
      </div>
    </div>
  );
}

Object.assign(window, { Hero });