// ContactScreen — project brief / quote flow with rush toggle

function ContactScreen({ go }) {
  const { Eyebrow, Input, Textarea, Select, Checkbox, Button, Timecode, Badge } = window.NewAgeAnimationDesignSystem_178027;
  const { Section } = window;
  const [rush, setRush] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  return (
    <Section id="contact" style={{ paddingTop: 56 }}>
      <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56 }}>
        <div>
          <Eyebrow>Start a project</Eyebrow>
          <h1 style={{ margin: "16px 0 16px", fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "var(--fs-display-m)", lineHeight: 0.95, letterSpacing: "-0.03em", textTransform: "uppercase", color: "var(--paper-100)" }}>Tell us the deadline</h1>
          <p style={{ color: "var(--text-body)", fontSize: "var(--fs-lg)", lineHeight: 1.6, maxWidth: 380 }}>
            Send the brief and we'll come back with a quote and a slot — usually within a couple of hours.
          </p>
          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
            <Timecode label="Typical reply" value="00:02:00:00" />
            {rush && <Badge tone="rush">24H RUSH ADDED · +50%</Badge>}
          </div>
        </div>

        <div style={{ background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: "var(--r-md)", padding: "var(--s-6)" }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "40px 0" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "var(--fs-h1)", color: "var(--lime-500)", textTransform: "uppercase" }}>Brief received</div>
              <p style={{ color: "var(--text-body)", marginTop: 12 }}>We'll be in touch shortly. Check your inbox for a confirmation.</p>
              <div style={{ marginTop: 20 }}><Button variant="outline" onClick={() => setSent(false)}>Send another</Button></div>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <Input label="Name" placeholder="Your name" required />
              <Input label="Work email" type="email" placeholder="you@studio.com" required />
              <Select label="Service" options={["Video editing", "Motion graphics", "Animated concept", "Social cutdowns", "Content retainer"]} />
              <Select label="Turnaround" options={["24-hour rush", "3-day standard", "1-week", "Retainer"]} />
              <div style={{ gridColumn: "1 / -1" }}>
                <Textarea label="Project brief" rows={4} placeholder="Format, length, hard deadline, references…" />
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <Checkbox label="Add 24-hour rush (+50%) — front of the line, on-time guarantee" checked={rush} onChange={(e) => setRush(e.target.checked)} />
              </div>
              <div style={{ gridColumn: "1 / -1", marginTop: 4 }}>
                <Button variant={rush ? "solid" : "signal"} size="lg" full type="submit">
                  {rush ? "Send rush brief" : "Send brief"}
                </Button>
              </div>
            </form>
          )}
        </div>
      </div>
    </Section>
  );
}
window.ContactScreen = ContactScreen;