/* Willow Creek — Contact: inquiry form + details. */
const { Icon: CIcon, useParallax: CuseParallax, Reveal: CReveal, Container: CContainer, Eyebrow: CEyebrow } = window.WC;
const { useState: cUseState } = React;

function ContactScreen({ go }) {
  const { Input, Select, Textarea, Button, Card, Alert, Badge } = window.WillowCreekDesignSystem_90378c;
  const [sent, setSent] = cUseState(false);
  const [form, setForm] = cUseState({});
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e && e.target ? e.target.value : e }));
  const ref = CuseParallax();

  const details = [
    ["map-pin", "Visit", "2013 Mark Twain Lane\nDenton, TX 76210"],
    ["phone", "Call or text", "(940) 555-0142\nA real person, 8am–8pm CT"],
    ["mail", "Email", "avira25.llc@gmail.com"],
    ["clock", "Tours", "Weekdays & Saturday mornings\nby appointment"],
  ];

  return (
    <>
      <section ref={ref} style={{ position: "relative", overflow: "hidden", background: "var(--grad-canopy)", color: "#fffdf8" }}>
        <div data-depth="0.3" style={{ position: "absolute", top: "-40%", right: "8%", width: 360, height: 360, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,241,214,.3), transparent 66%)" }} />
        <CContainer style={{ position: "relative", zIndex: 2, padding: "calc(var(--space-10) + 40px) var(--gutter) var(--space-9)" }}>
          <CReveal><CEyebrow style={{ color: "var(--sage-200)" }}>Contact</CEyebrow></CReveal>
          <CReveal delay={80}><h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d1)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 0", maxWidth: "16ch", color: "#fffdf8" }}>Let's talk. No pressure, ever.</h1></CReveal>
          <CReveal delay={140}><p style={{ fontSize: "var(--text-lg)", color: "var(--sage-200)", maxWidth: "50ch", marginTop: 18, lineHeight: 1.6 }}>
            Whether you're ready to apply or just have questions, reach out. We'll answer honestly — even if the answer is "we're not the right fit."
          </p></CReveal>
        </CContainer>
      </section>

      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <CContainer style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="wc-two-col">
          <CReveal>
            <Card elevation="lg" padding="xl">
              {sent ? (
                <div style={{ textAlign: "center", padding: "20px 0" }}>
                  <span style={{ width: 68, height: 68, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center",
                    background: "var(--success-soft)", color: "var(--success)", margin: "0 auto 18px" }}><CIcon name="check" size={36} strokeWidth={2.5} /></span>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d3)", color: "var(--text-heading)", margin: "0 0 10px" }}>Message sent.</h3>
                  <p style={{ color: "var(--text-body)", maxWidth: "36ch", margin: "0 auto 22px" }}>We'll get back to you within one business day — usually much sooner.</p>
                  <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
                </div>
              ) : (
                <>
                  <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d3)", color: "var(--text-heading)", margin: "0 0 6px" }}>Send us a message</h2>
                  <p style={{ color: "var(--text-muted)", margin: "0 0 24px" }}>A real person reads every message.</p>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 18 }} className="wc-form-grid">
                    <Input label="Your name" required value={form.name || ""} onChange={set("name")} placeholder="Jordan Rivera" />
                    <Input label="Phone" type="tel" value={form.phone || ""} onChange={set("phone")} placeholder="(940) 555-0142" />
                  </div>
                  <div style={{ marginBottom: 18 }}>
                    <Input label="Email" type="email" required value={form.email || ""} onChange={set("email")} placeholder="you@email.com" />
                  </div>
                  <div style={{ marginBottom: 18 }}>
                    <Select label="I'm reaching out about…" placeholder="Choose one" value={form.topic || ""} onChange={set("topic")}
                      options={["Applying for a bed", "Scheduling a tour", "A question about the program", "Something else"]} />
                  </div>
                  <div style={{ marginBottom: 22 }}>
                    <Textarea label="How can we help?" rows={4} value={form.message || ""} onChange={set("message")} placeholder="Tell us a little about your situation…" />
                  </div>
                  <Button variant="primary" size="lg" fullWidth onClick={() => setSent(true)} rightIcon={<CIcon name="send" size={18} />}>Send message</Button>
                  <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 14, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
                    <CIcon name="lock" size={13} /> Confidential. This is a demo — no data is stored.
                  </p>
                </>
              )}
            </Card>
          </CReveal>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <CReveal delay={80}>
              <Card elevation="md" padding="lg" style={{ background: "var(--surface-inverse)", border: "none" }}>
                <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
                  <Badge variant="success" dot>3 beds available</Badge>
                  <Badge variant="water">Sober living</Badge>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                  {details.map(([ic, t, v], i) => (
                    <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                      <span style={{ flexShrink: 0, width: 42, height: 42, borderRadius: "var(--radius-md)", display: "inline-flex", alignItems: "center", justifyContent: "center",
                        background: "rgba(255,255,255,.08)", color: "var(--sage-300)" }}><CIcon name={ic} size={20} /></span>
                      <div>
                        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--sand-50)", fontSize: "var(--text-md)" }}>{t}</div>
                        <div style={{ fontSize: "var(--text-sm)", color: "var(--sage-200)", marginTop: 2, whiteSpace: "pre-line", lineHeight: 1.5 }}>{v}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            </CReveal>
            <CReveal delay={140}>
              <Alert variant="info" title="In crisis right now?" icon={<CIcon name="life-buoy" size={20} />}>
                Call or text <strong>988</strong> for the Suicide &amp; Crisis Lifeline — free, confidential, 24/7.
              </Alert>
            </CReveal>
            <CReveal delay={200}>
              <Card elevation="sm" padding="lg" style={{ textAlign: "center", background: "var(--surface-accent-soft)", borderColor: "transparent" }}>
                <p style={{ margin: "0 0 14px", color: "var(--forest-700)", fontWeight: 600 }}>Ready to take the step?</p>
                <Button variant="primary" onClick={() => go("admissions")} rightIcon={<CIcon name="arrow-right" size={18} />}>Start your application</Button>
              </Card>
            </CReveal>
          </div>
        </CContainer>
      </section>
    </>
  );
}
window.WC.ContactScreen = ContactScreen;