const React = window.React;
const DS = window.CreativeTherapyZoneDesignSystem_30174f;
const { Button, Eyebrow, Input, Textarea, Card } = DS;
const { Phone, Mail, Video, Pin, Arrow } = window.CTZIcons;

const wrap = { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" };

function ContactRow({ icon, label, value }) {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
      <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 42, height: 42, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,.14)", color: "#fff", flex: "0 0 auto" }}>{icon}</span>
      <div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--teal-200)" }}>{label}</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 16.5, color: "#fff", marginTop: 3 }}>{value}</div>
      </div>
    </div>
  );
}

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{ background: "var(--surface-page)", padding: "var(--section-y) 0" }}>
      <div style={wrap}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 32, alignItems: "stretch", borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
          {/* Left — options on deep teal */}
          <div style={{ background: "var(--surface-brand)", color: "#fff", padding: "48px 44px", display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <Eyebrow tone="muted" tick={false}><span style={{ color: "var(--teal-200)" }}>Get in touch</span></Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 36, lineHeight: 1.15, letterSpacing: "-.01em", margin: "12px 0 0", color: "#fff" }}>
                Start with a free, <span style={{ fontStyle: "italic", color: "var(--teal-200)" }}>15-minute</span> consultation
              </h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--teal-100)", margin: "16px 0 0" }}>
                No pressure and no commitment — just a warm conversation about what you’re looking for.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: "auto" }}>
              <ContactRow icon={<Phone size={19} />} label="Call or text" value="416-613-0181" />
              <ContactRow icon={<Mail size={19} />} label="Email" value="hello@creativetherapyzone.com" />
              <ContactRow icon={<Video size={19} />} label="Virtual" value="Across Canada · EST" />
              <ContactRow icon={<Pin size={19} />} label="In person" value="Thornhill, Ontario" />
            </div>
          </div>
          {/* Right — form */}
          <div style={{ background: "var(--surface-card)", padding: "48px 44px" }}>
            {sent ? (
              <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 14, minHeight: 360 }}>
                <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--brand-soft)", color: "var(--brand-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 6" /></svg>
                </span>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 26, color: "var(--text-strong)", margin: 0 }}>Thank you — message received.</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 16, color: "var(--text-body)", margin: 0, maxWidth: "34ch" }}>Rena will personally reply within one business day. Take good care.</p>
                <Button variant="link" onClick={() => setSent(false)}>Send another message</Button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                <Input label="Your name" placeholder="First and last" required />
                <Input label="Email" type="email" placeholder="you@email.com" required />
                <div style={{ gridColumn: "1/-1" }}><Input label="Phone (optional)" placeholder="(000) 000-0000" /></div>
                <div style={{ gridColumn: "1/-1" }}><Textarea label="What brings you here?" rows={4} placeholder="Share as much or as little as you like — there’s no wrong way to start." /></div>
                <div style={{ gridColumn: "1/-1", display: "flex", alignItems: "center", gap: 16, marginTop: 4 }}>
                  <Button variant="warm" size="lg" type="submit" iconRight={<Arrow size={18} />}>Send message</Button>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)" }}>Confidential · replies within 1 business day</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const groups = [
    { h: "Services", items: ["Art Therapy", "Art Therapy for Kids", "Psychotherapy", "Virtual Therapy"] },
    { h: "Practice", items: ["About Rena", "What to Expect", "Blog", "Contact"] },
  ];
  return (
    <footer style={{ background: "var(--brand-deep)", color: "var(--teal-100)", padding: "64px 0 34px" }}>
      <div style={{ ...wrap, display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 32 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src={(window.__resources && window.__resources.logoMarkWhite) || "assets/logo-mark-white.png"} alt="" style={{ height: 52, width: "auto" }} />
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 21, color: "#fff" }}>Creative Therapy Zone</span>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 14.5, lineHeight: 1.6, margin: "16px 0 0", maxWidth: "34ch", color: "var(--teal-200)" }}>
            Art therapy and psychotherapy for adults, teens, and children. Virtual across Canada; in person in Thornhill.
          </p>
        </div>
        {groups.map((g) => (
          <div key={g.h}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--teal-300)", marginBottom: 14 }}>{g.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {g.items.map((i) => (<a key={i} href="#" style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--teal-100)", textDecoration: "none" }}>{i}</a>))}
            </div>
          </div>
        ))}
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--teal-300)", marginBottom: 14 }}>Reach us</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--font-body)", fontSize: 14.5 }}>
            <a href="tel:4166130181" style={{ color: "var(--teal-100)", textDecoration: "none" }}>416-613-0181</a>
            <a href="#" style={{ color: "var(--teal-100)", textDecoration: "none" }}>hello@creativetherapyzone.com</a>
          </div>
        </div>
      </div>
      <div style={{ ...wrap, marginTop: 44, paddingTop: 22, borderTop: "1px solid rgba(255,255,255,.1)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--teal-300)" }}>
        <span>© 2025 Creative Therapy Zone</span>
        <span>Toronto, Canada · Sessions in English</span>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;