// HomeScreen — elegant studio site; rush is one refined feature, not the whole story
function HomeScreen({ go }) {
  const { Button, Eyebrow, Timecode, Stat, Testimonial, Card } = window.NewAgeAnimationDesignSystem_178027;
  const { VideoTile, Section } = window;
  const services = [
    ["01", "Video editing", "Rough cut to color-graded master. Long-form, ads, social — any format, any platform."],
    ["02", "Motion graphics", "Titles, lower-thirds, and logo animation designed to move with your brand."],
    ["03", "Animated concepts", "Storyboard to finished short — original animation for products and stories."],
    ["04", "Color & finishing", "Grade, cleanup, sound polish, and delivery specs handled to the last frame."],
    ["05", "Social cutdowns", "One shoot, a season of verticals — captions and hooks included."],
    ["06", "Content retainers", "An always-on edit desk for teams shipping video every week."],
  ];
  return (
    <div>
      {/* Hero */}
      <Section id="hero" style={{ paddingTop: 88, paddingBottom: 40 }}>
        <div style={{ maxWidth: 820 }}>
          <Eyebrow>New Age Animation — Studio</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)",
          }}>Video &amp; animation,<br />crafted end to end.</h1>
          <p style={{ margin: "26px 0 0", fontSize: "var(--fs-lg)", lineHeight: 1.65, color: "var(--text-body)", maxWidth: 540 }}>
            A full-service studio for editing, motion graphics, and animated storytelling —
            with rush delivery for the moments that can&rsquo;t wait.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 34, alignItems: "center", flexWrap: "wrap" }}>
            <Button variant="solid" size="lg" onClick={() => go("contact")}>Start a project</Button>
            <Button variant="ghost" size="lg" onClick={() => go("work")}>View our work &rarr;</Button>
          </div>
        </div>
        <div style={{ marginTop: 48 }}>
          <VideoTile label="Northwind — Brand Film" tc="00:01:48:00" autoplay />
        </div>
      </Section>

      {/* Client strip */}
      <div style={{
        borderTop: "1px solid var(--border-soft)", borderBottom: "1px solid var(--border-soft)",
        padding: "20px var(--gutter)", display: "flex", gap: 44, justifyContent: "center", flexWrap: "wrap",
        fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)",
      }}>
        <span>Northwind</span><span>Lumen Labs</span><span>Cadence</span><span>Field Notes</span><span>Halcyon</span><span>Rivet</span>
      </div>

      {/* Services */}
      <Section id="services">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 44 }}>
          <div>
            <Eyebrow>What we do</Eyebrow>
            <h2 style={{ margin: "16px 0 0", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", letterSpacing: "-0.02em", color: "var(--paper-100)" }}>Full-service, start to finish</h2>
          </div>
          <p style={{ margin: 0, color: "var(--text-muted)", maxWidth: 320, fontSize: "var(--fs-md)", lineHeight: 1.6 }}>
            One team from concept to final delivery — no handoffs, no lost context.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {services.map(([n, t, d]) => (
            <Card key={n} interactive>
              <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>

      {/* Rush — one refined feature */}
      <Section id="rush-feature" style={{ paddingTop: 0 }}>
        <div style={{
          border: "1px solid var(--border-soft)", borderRadius: "var(--r-lg)", overflow: "hidden",
          display: "grid", gridTemplateColumns: "1fr 1fr", background: "var(--bg-surface)",
        }}>
          <div style={{ padding: "clamp(32px, 4vw, 56px)", display: "flex", flexDirection: "column", justifyContent: "center", gap: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 28, height: 2, background: "var(--flare-500)" }} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--flare-500)" }}>Rush delivery</span>
            </div>
            <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", lineHeight: 1.02, letterSpacing: "-0.02em", color: "var(--paper-100)" }}>
              When the moment can&rsquo;t wait
            </h2>
            <p style={{ margin: 0, fontSize: "var(--fs-lg)", lineHeight: 1.65, color: "var(--text-body)", maxWidth: 460 }}>
              Add expedited delivery and your project moves to the front of the line —
              a finished cut back within <strong style={{ color: "var(--paper-100)" }}>24 hours</strong>, guaranteed on time or the rush fee is on us.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 4 }}>
              <Timecode label="Rush ETA" value="00:00:24:00" tone="flare" />
              <Button variant="outline" onClick={() => go("rush")}>How it works</Button>
            </div>
          </div>
          <div style={{ position: "relative", minHeight: 300 }}>
            <VideoTile label="Cadence — Q4 Launch" tc="00:00:19:00" ratio="auto" rush />
            <div style={{ position: "absolute", inset: 0, borderLeft: "1px solid var(--border-soft)", pointerEvents: "none" }} />
          </div>
        </div>
      </Section>

      {/* Stats */}
      <Section id="stats" style={{ paddingTop: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, borderTop: "1px solid var(--border-soft)", paddingTop: 48 }}>
          <Stat value="1,200+" label="Videos delivered" tone="plain" />
          <Stat value="98%" label="On-time rate" tone="plain" />
          <Stat value="24h" label="Rush turnaround" />
          <Stat value="4.9" label="Avg. client rating" tone="plain" />
        </div>
      </Section>

      {/* Testimonials / prior art */}
      <Section id="testimonials" style={{ paddingTop: 0 }}>
        <Eyebrow tick={false}>In their words</Eyebrow>
        <h2 style={{ margin: "16px 0 40px", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", letterSpacing: "-0.02em", color: "var(--paper-100)" }}>Work that shipped</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          <Testimonial quote="They shaped our launch film with real taste — and turned the final cut around in a day when we needed it." name="Dana Ruiz" role="Head of Brand, Northwind" project="Series A launch film" />
          <Testimonial quote="Our weekly long-form used to eat two people. Now it's one message and it comes back polished." name="Marcus Bell" role="Creator, 640k subs" project="Weekly long-form retainer" />
          <Testimonial quote="Fifty verticals from one shoot day, each one considered. Every hook landed." name="Priya Nandi" role="Growth, Cadence" project="Q4 social campaign" />
        </div>
      </Section>
    </div>
  );
}
window.HomeScreen = HomeScreen;