/* Willow Creek — Home screen with layered parallax hero. */
const { Icon: HIcon, useParallax: HuseParallax, Reveal: HReveal, Photo: HPhoto, Container: HContainer, Eyebrow: HEyebrow, LeafField: HLeafField, VideoBG: HVideoBG, FOOTAGE: HFOOTAGE } = window.WC;

function Hill({ color, d, style, ...rest }) {
  return (
    <svg viewBox="0 0 1440 320" preserveAspectRatio="none" {...rest} style={{ position: "absolute", left: -40, right: -40, width: "calc(100% + 80px)", ...style }}>
      <path d={d} fill={color} />
    </svg>
  );
}

function ParallaxHero({ go }) {
  const ref = HuseParallax();
  const { Button, Badge } = window.WillowCreekDesignSystem_90378c;
  const leaves = [
    { top: "18%", left: "12%", s: 26, dep: 0.9, r: -20 },
    { top: "30%", left: "82%", s: 34, dep: 0.7, r: 15 },
    { top: "58%", left: "8%", s: 20, dep: 1.0, r: 40 },
    { top: "12%", left: "62%", s: 18, dep: 0.85, r: -10 },
    { top: "44%", left: "90%", s: 22, dep: 0.6, r: 25 },
  ];
  return (
    <section ref={ref} style={{ position: "relative", overflow: "hidden", minHeight: "92vh", display: "flex",
      alignItems: "center", background: "linear-gradient(180deg,#eff4d8 0%,#f8e4c9 58%,#fbf0dc 100%)" }}>
      {/* REAL FOOTAGE — weeping willow swaying, slow motion (Pexels free license) */}
      <div data-depth="0.1" style={{ position: "absolute", inset: "-6%" }}>
        <HVideoBG sources={HFOOTAGE.willow.sources} poster={HFOOTAGE.willow.poster} rate={0.5} tintOpacity={0.5} darken={0.28} />
      </div>
      {/* Sun glow */}
      <div data-depth="0.12" style={{ position: "absolute", top: "-6%", right: "14%", width: 420, height: 420,
        borderRadius: "50%", background: "radial-gradient(circle, rgba(255,241,214,.95) 0%, rgba(240,138,75,.35) 45%, transparent 70%)" }} />
      {/* Drifting clouds */}
      <div data-depth="0.16" style={{ position: "absolute", top: "12%", left: "36%", width: 300, height: 64, borderRadius: 999,
        background: "rgba(255,253,248,.6)", filter: "blur(18px)" }} />
      <div data-depth="0.26" style={{ position: "absolute", top: "24%", left: "6%", width: 220, height: 48, borderRadius: 999,
        background: "rgba(255,253,248,.5)", filter: "blur(14px)" }} />
      <div data-depth="0.4" style={{ position: "absolute", top: "8%", right: "4%", width: 180, height: 40, borderRadius: 999,
        background: "rgba(255,253,248,.45)", filter: "blur(12px)" }} />
      {/* Falling willow leaves — far layer (behind copy) */}
      <div data-depth="0.3" style={{ position: "absolute", inset: "-6%" }}>
        <HLeafField count={20} />
      </div>
      {/* Far hills */}
      <Hill data-depth="0.18" color="#d9ec8f" d="M0,220 C220,150 420,190 720,170 C1000,152 1200,200 1440,168 L1440,320 L0,320 Z" style={{ bottom: 0, opacity: 0.9 }} />
      {/* Mid hills */}
      <Hill data-depth="0.34" color="#9cbf2e" d="M0,250 C260,200 480,250 760,230 C1040,212 1230,258 1440,232 L1440,320 L0,320 Z" style={{ bottom: 0 }} />
      {/* Near hills */}
      <Hill data-depth="0.52" color="#279a4e" d="M0,285 C240,250 520,290 820,275 C1080,262 1280,296 1440,280 L1440,320 L0,320 Z" style={{ bottom: 0 }} />
      {/* Foreground bank */}
      <Hill data-depth="0.72" color="#155c2e" d="M0,305 C320,288 640,312 960,300 C1180,292 1320,312 1440,304 L1440,320 L0,320 Z" style={{ bottom: 0 }} />
      {/* Floating leaves (logo mark) */}
      {leaves.map((l, i) => (
        <img key={i} src="assets/logo-mark.svg" alt="" data-depth={l.dep} style={{
          position: "absolute", top: l.top, left: l.left, width: l.s, opacity: 0.55,
          transform: `rotate(${l.r}deg)`, filter: "drop-shadow(0 6px 10px rgba(26,44,32,.2))" }} />
      ))}

      {/* Floating stat chip in the scene */}
      <div data-depth="0.85" style={{ position: "absolute", right: "9%", top: "38%", zIndex: 4,
        background: "rgba(255,253,248,.82)", backdropFilter: "blur(10px)", borderRadius: "var(--radius-lg)",
        boxShadow: "var(--shadow-float)", padding: "16px 20px", display: "flex", alignItems: "center", gap: 14 }} className="wc-float-chip">
        <span style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", display: "inline-flex", alignItems: "center",
          justifyContent: "center", background: "var(--surface-accent-soft)", color: "var(--brand-primary)" }}>
          <HIcon name="key-round" size={24} /></span>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: "var(--forest-900)", lineHeight: 1, textTransform: "uppercase" }}>Move-in ready</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--ink-600)", marginTop: 3 }}>3 beds open this week</div>
        </div>
      </div>
      {/* Copy */}
      <HContainer style={{ position: "relative", zIndex: 5 }}>
        <div style={{ maxWidth: 640 }}>
          <HReveal>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "7px 14px",
              borderRadius: "var(--radius-pill)", background: "rgba(255,253,248,.7)", backdropFilter: "blur(8px)",
              boxShadow: "var(--shadow-sm)", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "var(--text-sm)",
              color: "var(--forest-700)", marginBottom: 22 }}>
              <HIcon name="shield-check" size={16} color="var(--brand-primary)" />
              Structured Sober Living Community
            </span>
          </HReveal>
          <HReveal delay={80}>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--text-hero)",
              lineHeight: 1.02, letterSpacing: "0.01em", textTransform: "uppercase", color: "#fffdf8", margin: 0,
              textShadow: "0 8px 44px rgba(11,29,18,.55)" }}>
              A calmer place to&nbsp;begin again.
            </h1>
          </HReveal>
          <HReveal delay={160}>
            <p style={{ fontSize: "var(--text-xl)", lineHeight: 1.5, color: "#f4efe4", maxWidth: "48ch", margin: "20px 0 32px",
              textShadow: "0 4px 24px rgba(11,29,18,.5)" }}>
              Structured, supportive recovery housing where accountability meets belonging — so early sobriety has room to take root.
            </p>
          </HReveal>
          <HReveal delay={240}>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
              <Button variant="primary" size="lg" onClick={() => go("admissions")}
                rightIcon={<HIcon name="arrow-right" size={20} />}>Start your application</Button>
              <Button variant="secondary" size="lg" onClick={() => go("home-tour")}
                leftIcon={<HIcon name="play" size={18} />}>Tour the home</Button>
            </div>
          </HReveal>
          <HReveal delay={320}>
            <div style={{ display: "flex", gap: 26, marginTop: 40, flexWrap: "wrap" }}>
              {[["3", "beds available now"], ["90+", "avg. days in residence"], ["24/7", "house support"]].map(([v, l], i) => (
                <div key={i} style={{ display: "flex", flexDirection: "column" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, color: "#fffdf8", lineHeight: 1, textShadow: "0 4px 20px rgba(11,29,18,.5)" }}>{v}</span>
                  <span style={{ fontSize: "var(--text-sm)", color: "var(--sage-200)", marginTop: 4, textShadow: "0 2px 12px rgba(11,29,18,.5)" }}>{l}</span>
                </div>
              ))}
            </div>
          </HReveal>
        </div>
      </HContainer>
      {/* Falling willow leaves — near layer (in front of everything) */}
      <div data-depth="0.95" style={{ position: "absolute", inset: "-8%", zIndex: 6, pointerEvents: "none" }}>
        <HLeafField count={9} near />
      </div>
      <div style={{ position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)", zIndex: 5,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 6, color: "#fffdf8", opacity: 0.8 }}>
        <span style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", fontFamily: "var(--font-sans)", fontWeight: 600 }}>Scroll</span>
        <HIcon name="chevron-down" size={18} />
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    ["shield-check", "Real structure", "High-support sober living"],
    ["heart-handshake", "Peer & staff support", "House managers on site"],
    ["calendar-check", "Tours & visits", "See the home before you decide"],
    ["map-pin", "Rooted in community", "Near meetings, jobs, transit"],
  ];
  return (
    <div style={{ background: "var(--surface-inverse)", color: "var(--sage-100)" }}>
      <HContainer style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-5)", padding: "var(--space-6) var(--gutter)" }} className="wc-trust-grid">
        {items.map(([ic, t, s], i) => (
          <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <span style={{ flexShrink: 0, width: 44, height: 44, borderRadius: "var(--radius-md)", display: "inline-flex",
              alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,.08)", color: "var(--sage-300)" }}>
              <HIcon name={ic} size={22} /></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-300)", marginTop: 2 }}>{s}</div>
            </div>
          </div>
        ))}
      </HContainer>
    </div>
  );
}

function ApproachSection({ go }) {
  const { Card, Button } = window.WillowCreekDesignSystem_90378c;
  const pillars = [
    ["home", "A real home", "A calm, well-kept house — not an institution. Private and shared rooms, shared meals, quiet space to breathe."],
    ["users", "Peer accountability", "You're surrounded by people a few steps ahead. Curfews, check-ins, and honest community keep everyone honest."],
    ["route", "A path with phases", "Structure loosens as you grow — from stabilizing, to working your program, to launching into independent living."],
    ["hand-heart", "Support that stays", "House managers on site, connections to meetings, therapists, jobs and family — and an alumni network that doesn't disappear."],
  ];
  return (
    <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
      <HContainer>
        <div style={{ maxWidth: 640, marginBottom: "var(--space-8)" }}>
          <HReveal><HEyebrow>Our Approach</HEyebrow></HReveal>
          <HReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)",
            letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 0" }}>Structure, not judgment.</h2></HReveal>
          <HReveal delay={140}><p style={{ fontSize: "var(--text-lg)", color: "var(--text-body)", marginTop: 14, lineHeight: 1.6 }}>
            Recovery isn't a straight line. We build the scaffolding — routine, community, and accountability — so you can do the hard, hopeful work of rebuilding.
          </p></HReveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-5)" }} className="wc-pillars">
          {pillars.map(([ic, t, d], i) => (
            <HReveal key={i} delay={i * 90}>
              <Card elevation="md" interactive style={{ height: "100%" }}>
                <span style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", display: "inline-flex",
                  alignItems: "center", justifyContent: "center", background: "var(--surface-accent-soft)",
                  color: "var(--brand-primary)", marginBottom: 18 }}><HIcon name={ic} size={26} /></span>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", color: "var(--text-heading)", margin: "0 0 8px" }}>{t}</h3>
                <p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", margin: 0, lineHeight: 1.6 }}>{d}</p>
              </Card>
            </HReveal>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function OutcomesSection() {
  const { Stat } = window.WillowCreekDesignSystem_90378c;
  const { VideoBG, FOOTAGE, Icon } = window.WC;
  return (
    <section style={{ padding: "var(--section-y) 0", background: "var(--surface-sunken)" }}>
      <HContainer style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "center" }} className="wc-two-col">
        <HReveal>
          <div style={{ position: "relative", aspectRatio: "5 / 4", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
            <VideoBG sources={FOOTAGE.creek.sources} poster={FOOTAGE.creek.poster} rate={0.5} darken={0.18} tintOpacity={0.3} />
            <div style={{ position: "absolute", left: 16, bottom: 14, zIndex: 2 }}>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: ".08em",
                textTransform: "uppercase", color: "#fffdf8", background: "rgba(11,29,18,.45)", padding: "5px 12px",
                borderRadius: "var(--radius-pill)", backdropFilter: "blur(4px)", display: "inline-flex", alignItems: "center", gap: 7 }}>
                <Icon name="sun" size={14} color="#fffdf8" /> The creek at dawn
              </span>
            </div>
          </div>
        </HReveal>
        <div>
          <HReveal><HEyebrow>Why it works</HEyebrow></HReveal>
          <HReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)",
            letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 22px" }}>Time and belonging change everything.</h2></HReveal>
          <HReveal delay={140}><p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", lineHeight: 1.7, marginBottom: 30 }}>
            The research is clear: people who stay in structured recovery housing for 90 days or more see lasting gains in sobriety, employment, and stability. We build a home worth staying in.
          </p></HReveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-6)" }}>
            <HReveal delay={180}><Stat value="90+" label="Days is the goal" sublabel="the milestone that predicts long-term recovery" /></HReveal>
            <HReveal delay={240}><Stat value="12" accent="clay" label="Beds, two houses" sublabel="small enough to know everyone's name" /></HReveal>
            <HReveal delay={300}><Stat value="3×" accent="water" label="Weekly house meetings" sublabel="plus daily check-ins" /></HReveal>
            <HReveal delay={360}><Stat value="100%" label="Abstinence-based" sublabel="regular, supportive testing" /></HReveal>
          </div>
        </div>
      </HContainer>
    </section>
  );
}

function VoiceSection() {
  const { Testimonial } = window.WillowCreekDesignSystem_90378c;
  const quotes = [
    { name: "Marcus R.", role: "Alumnus · 2 years sober", accent: "forest",
      quote: "For the first time in a decade, people expected me to show up. So I did." },
    { name: "Dana P.", role: "Mother of a resident", accent: "clay",
      quote: "I finally slept through the night. I knew where my son was, and I knew he was safe." },
    { name: "Theo L.", role: "Alumnus · 14 months", accent: "water",
      quote: "The phases gave me something I hadn't had in years — a next step I could actually reach." },
  ];
  return (
    <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
      <HContainer>
        <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto var(--space-8)" }}>
          <HReveal><HEyebrow style={{ justifyContent: "center" }}>In their words</HEyebrow></HReveal>
          <HReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)",
            letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 0" }}>Recovery is a team sport.</h2></HReveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)" }} className="wc-pillars">
          {quotes.map((q, i) => (
            <HReveal key={i} delay={i * 100}><Testimonial {...q} style={{ height: "100%" }} /></HReveal>
          ))}
        </div>
      </HContainer>
    </section>
  );
}

function CTASection({ go }) {
  const { Button } = window.WillowCreekDesignSystem_90378c;
  const ref = HuseParallax();
  return (
    <section ref={ref} style={{ position: "relative", overflow: "hidden", background: "var(--grad-canopy)", color: "#fffdf8" }}>
      {/* REAL FOOTAGE — creek flowing, slow motion (Pexels free license) */}
      <HVideoBG sources={HFOOTAGE.creek.sources} poster={HFOOTAGE.creek.poster} rate={0.55} tint="#10301c" tintOpacity={0.5} darken={0.55} />
      <div data-depth="0.3" style={{ position: "absolute", top: "-30%", right: "-5%", width: 480, height: 480, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(240,138,75,.4), transparent 65%)" }} />
      <img src="assets/logo-mark.svg" alt="" data-depth="0.5" style={{ position: "absolute", left: "-2%", bottom: "-10%", width: 260, opacity: 0.12 }} />
      <HContainer style={{ position: "relative", zIndex: 2, padding: "var(--section-y) var(--gutter)", textAlign: "center" }}>
        <HReveal>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d1)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "0 auto", maxWidth: "16ch", color: "#fffdf8" }}>
            The hardest step is reaching out. We'll walk the next one with you.
          </h2>
        </HReveal>
        <HReveal delay={120}>
          <p style={{ fontSize: "var(--text-lg)", color: "var(--sage-200)", maxWidth: "44ch", margin: "20px auto 34px", lineHeight: 1.6 }}>
            Beds are open now. Apply online in minutes, or call and talk to a real person today.
          </p>
        </HReveal>
        <HReveal delay={200}>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="inverse" size="lg" onClick={() => go("admissions")} rightIcon={<HIcon name="arrow-right" size={20} />}>Start your application</Button>
            <Button variant="ghost" size="lg" onClick={() => go("contact")}
              style={{ color: "#fffdf8", border: "1px solid rgba(255,255,255,.35)" }} leftIcon={<HIcon name="phone" size={18} />}>Talk to a real person</Button>
          </div>
        </HReveal>
      </HContainer>
    </section>
  );
}

function HomeScreen({ go }) {
  return (
    <>
      <ParallaxHero go={go} />
      <TrustStrip />
      <ApproachSection go={go} />
      <OutcomesSection />
      <VoiceSection />
      <CTASection go={go} />
    </>
  );
}
window.WC.HomeScreen = HomeScreen;