const React = window.React;
const { Button, Eyebrow, Badge } = window.CreativeTherapyZoneDesignSystem_30174f;
const { Arrow, Shield, Leaf, Heart } = window.CTZIcons;

// Shared photo placeholder — organic, airy, natural-light tint.
function Photo({ ratio = "4/5", radius = "var(--radius-2xl)", tone = "teal", label = "Bright, natural-light photo", src, alt = "", style = {} }) {
  const tints = {
    teal: "radial-gradient(120% 120% at 25% 15%, var(--teal-100), var(--cream-100) 70%)",
    coral: "radial-gradient(120% 120% at 25% 15%, var(--coral-100), var(--cream-100) 70%)",
    cream: "radial-gradient(120% 120% at 30% 20%, var(--cream-200), var(--cream-50) 75%)",
  };
  return (
    <div style={{ aspectRatio: ratio, borderRadius: radius, background: src ? "var(--surface-sunken)" : tints[tone], border: "1px solid var(--border-soft)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", ...style }}>
      {src ? (
        <img src={src} alt={alt} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      ) : (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 700, letterSpacing: ".04em", color: "var(--taupe-500)", background: "rgba(255,255,255,.55)", padding: "8px 14px", borderRadius: "var(--radius-pill)" }}>
          <Leaf size={15} /> {label}
        </span>
      )}
    </div>
  );
}
window.Photo = Photo;

function Hero() {
  return (
    <section id="top" style={{ background: "var(--surface-page)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -120, right: -80, width: 420, height: 420, borderRadius: "44% 56% 60% 40% / 50% 44% 56% 50%", background: "var(--teal-50)", filter: "blur(2px)", zIndex: 0 }} />
      <div style={{ position: "relative", zIndex: 1, maxWidth: "var(--container)", margin: "0 auto", padding: "72px var(--gutter) 84px", display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center" }}>
        <div>
          <Eyebrow>Art therapy &amp; psychotherapy · Toronto</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 60, lineHeight: 1.06, letterSpacing: "-.02em", color: "var(--text-strong)", margin: "18px 0 0", textWrap: "balance" }}>
            Where creativity reaches <span style={{ fontStyle: "italic", color: "var(--brand-strong)" }}>what words can’t.</span>
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 19, lineHeight: 1.6, color: "var(--text-body)", margin: "22px 0 0", maxWidth: "40ch", textWrap: "pretty" }}>
            Art therapy accesses emotional, right-brain processing — the places traditional talk therapy can’t always reach. For adults, teens, and children. No artistic skill required.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="warm" size="lg" iconRight={<Arrow size={18} />} href="#contact">Book a free consultation</Button>
            <Button variant="secondary" size="lg" href="#services">Explore services</Button>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
            <Badge tone="brand"><Heart size={13} /> For every age</Badge>
            <Badge tone="outline"><Shield size={13} /> No art skill needed</Badge>
            <Badge tone="outline">Virtual across Canada</Badge>
          </div>
        </div>
        <Photo ratio="4/5" src={(window.__resources && window.__resources.studioImg) || "assets/studio.png"} alt="Hands painting with watercolor in a sunlit studio" />
      </div>
    </section>
  );
}
window.Hero = Hero;