// RushScreen — expedited delivery, presented as a refined premium feature
function RushScreen({ go }) {
  const { Eyebrow, Timecode, Button, Badge, Card } = window.NewAgeAnimationDesignSystem_178027;
  const { Section, VideoTile } = window;
  const steps = [
    ["01", "Send the brief", "Upload footage and tell us the hard deadline. We confirm the slot within the hour."],
    ["02", "We take over", "A dedicated editor picks it up and works it to the front of the line, any time zone."],
    ["03", "Delivered", "A color-graded master and every platform export, back inside 24 hours."],
  ];
  return (
    <div>
      <Section id="rush" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Rush delivery</Eyebrow>
          <h1 style={{ margin: "22px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--fs-display-l)", lineHeight: 0.98, letterSpacing: "-0.03em", color: "var(--paper-100)" }}>
            Finished in 24 hours,<br />when it has to be.
          </h1>
          <p style={{ margin: "26px 0 0", fontSize: "var(--fs-lg)", lineHeight: 1.65, color: "var(--text-body)", maxWidth: 540 }}>
            Most projects run on our standard schedule. But when a launch slips or an edit stalls,
            expedited delivery moves you to the front of the line &mdash; on time, or the rush fee is on us.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", marginTop: 32 }}>
            <Timecode label="Countdown" value="00:00:24:00" tone="flare" style={{ fontSize: "var(--fs-lg)", padding: "10px 16px" }} />
            <Button variant="solid" size="lg" onClick={() => go("contact")}>Book a rush slot</Button>
          </div>
        </div>
        <div style={{ marginTop: 44 }}>
          <VideoTile label="Halcyon — Rush cut, delivered in 19h" tc="00:00:32:00" rush />
        </div>
      </Section>

      {/* How it works */}
      <Section id="how" style={{ paddingTop: 0 }}>
        <Eyebrow tick={false}>How it works</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 32 }}>
          {steps.map(([n, t, d]) => (
            <Card key={n}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--flare-500)", letterSpacing: "0.14em" }}>{n}</div>
              <h3 style={{ margin: "14px 0 8px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--fs-h3)", color: "var(--paper-100)" }}>{t}</h3>
              <p style={{ margin: 0, color: "var(--text-body)", lineHeight: 1.6 }}>{d}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* Pricing */}
      <Section id="pricing" style={{ paddingTop: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <div style={{ background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: "var(--r-lg)", padding: "var(--s-6)" }}>
            <Badge tone="neutral">Standard</Badge>
            <div style={{ margin: "18px 0 4px", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", color: "var(--paper-100)" }}>3&ndash;5 days</div>
            <p style={{ color: "var(--text-body)", margin: "0 0 18px" }}>Our default schedule. Considered, unhurried, revisions included.</p>
            <ul style={{ margin: 0, paddingLeft: 18, color: "var(--text-body)", lineHeight: 2 }}>
              <li>Dedicated editor</li><li>Two revision rounds</li><li>All platform exports</li>
            </ul>
          </div>
          <div style={{ background: "var(--bg-raised)", border: "1px solid var(--flare-500)", borderRadius: "var(--r-lg)", padding: "var(--s-6)" }}>
            <Badge tone="flare">Rush &middot; +50%</Badge>
            <div style={{ margin: "18px 0 4px", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", color: "var(--flare-500)" }}>24 hours</div>
            <p style={{ color: "var(--text-body)", margin: "0 0 18px" }}>Front of the line, delivered in a day &mdash; or the rush fee is free.</p>
            <ul style={{ margin: 0, paddingLeft: 18, color: "var(--text-body)", lineHeight: 2 }}>
              <li>Editor assigned within the hour</li><li>Live status &amp; timecode tracker</li><li>On-time guarantee</li>
            </ul>
          </div>
        </div>
      </Section>
    </div>
  );
}
window.RushScreen = RushScreen;