/* Willow Creek — inner content screens: About, Programs, The Home, FAQ. */
const { Icon: IIcon, useParallax: IuseParallax, Reveal: IReveal, Photo: IPhoto, Container: IContainer, Eyebrow: IEyebrow } = window.WC;

function PageHero({ eyebrow, title, subtitle, tone = "canopy" }) {
  const ref = IuseParallax();
  const grads = { canopy: "var(--grad-canopy)", creek: "var(--grad-creek)", clay: "var(--grad-clay)" };
  return (
    <section ref={ref} style={{ position: "relative", overflow: "hidden", background: grads[tone], color: "#fffdf8" }}>
      <div data-depth="0.3" style={{ position: "absolute", top: "-40%", right: "6%", width: 380, height: 380, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,241,214,.35), transparent 66%)" }} />
      <img src="assets/logo-mark.svg" alt="" data-depth="0.55" style={{ position: "absolute", right: "8%", bottom: "-30%", width: 220, opacity: 0.14 }} />
      <IContainer style={{ position: "relative", zIndex: 2, padding: "calc(var(--space-10) + 40px) var(--gutter) var(--space-9)" }}>
        <IReveal><IEyebrow style={{ color: "var(--sage-200)" }}>{eyebrow}</IEyebrow></IReveal>
        <IReveal delay={80}><h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d1)", letterSpacing: "0.01em", textTransform: "uppercase",
          margin: "14px 0 0", maxWidth: "18ch", color: "#fffdf8" }}>{title}</h1></IReveal>
        {subtitle && <IReveal delay={140}><p style={{ fontSize: "var(--text-lg)", color: "var(--sage-200)", maxWidth: "54ch", marginTop: 18, lineHeight: 1.6 }}>{subtitle}</p></IReveal>}
      </IContainer>
    </section>
  );
}

/* ---------- ABOUT ---------- */
function AboutScreen({ go }) {
  const { Card, Button, Avatar } = window.WillowCreekDesignSystem_90378c;
  const values = [
    ["sprout", "Dignity first", "You are a person in recovery, not a case number. We speak plainly and treat you like an adult."],
    ["scale", "Honest structure", "Clear rules, applied fairly. Structure is a form of care, not control."],
    ["users-round", "Real community", "Small houses where people know your name and notice when you're struggling."],
    ["compass", "Built for after", "Everything points toward the day you leave stronger than you arrived."],
  ];
  const team = [["Rebecca Hale", "Founder & Director"], ["James Ortiz", "House Manager, Creekside"], ["Nadia Brooks", "Recovery Coach"], ["Sam Whitfield", "Alumni Coordinator"]];
  return (
    <>
      <PageHero eyebrow="Our Story" tone="canopy"
        title="Built by people who've walked it."
        subtitle="Willow Creek began the way a lot of good things do — because someone needed it and it didn't exist yet." />
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <IContainer style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "var(--space-9)", alignItems: "center" }} className="wc-two-col">
          <div>
            <IReveal><IEyebrow>Why we're here</IEyebrow></IReveal>
            <IReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 20px" }}>
              A home between treatment and the rest of your life.</h2></IReveal>
            <IReveal delay={140}><p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", lineHeight: 1.7 }}>
              Leaving treatment can feel like stepping off a cliff. Willow Creek is the bridge — a structured, sober home where you can practice living again with support close by.</p></IReveal>
            <IReveal delay={200}><p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", lineHeight: 1.7 }}>
              Our founder spent her own first year of recovery in a house like this one. We built Willow Creek to be the version she wished she'd had: calm, honest, and genuinely warm.</p></IReveal>
            <IReveal delay={260}><Button variant="primary" style={{ marginTop: 12 }} onClick={() => go("home-tour")} rightIcon={<IIcon name="arrow-right" size={18} />}>See the home</Button></IReveal>
          </div>
          <IReveal delay={120}><IPhoto tone="dawn" label="The front porch" icon="home" ratio="4 / 5" /></IReveal>
        </IContainer>
      </section>
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-sunken)" }}>
        <IContainer>
          <div style={{ maxWidth: 620, marginBottom: "var(--space-8)" }}>
            <IReveal><IEyebrow>What we stand for</IEyebrow></IReveal>
            <IReveal 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" }}>Four things we won't compromise on.</h2></IReveal>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-5)" }} className="wc-pillars">
            {values.map(([ic, t, d], i) => (
              <IReveal key={i} delay={i * 90}><Card elevation="sm" style={{ height: "100%" }}>
                <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: "var(--surface-clay-soft)", color: "var(--clay-600)", marginBottom: 16 }}><IIcon name={ic} size={24} /></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></IReveal>
            ))}
          </div>
        </IContainer>
      </section>
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <IContainer>
          <div style={{ maxWidth: 620, marginBottom: "var(--space-7)" }}>
            <IReveal><IEyebrow>The house team</IEyebrow></IReveal>
            <IReveal 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" }}>People who actually pick up the phone.</h2></IReveal>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-5)" }} className="wc-pillars">
            {team.map(([n, r], i) => (
              <IReveal key={i} delay={i * 80}><div style={{ textAlign: "center" }}>
                <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}><Avatar name={n} size={92} ring /></div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--text-heading)", fontSize: "var(--text-lg)" }}>{n}</div>
                <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", marginTop: 2 }}>{r}</div>
              </div></IReveal>
            ))}
          </div>
        </IContainer>
      </section>
    </>
  );
}

/* ---------- PROGRAMS ---------- */
function ProgramsScreen({ go }) {
  const { Tabs, Card, Badge, Button } = window.WillowCreekDesignSystem_90378c;
  const phase = (title, desc, points) => (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-7)", alignItems: "start" }} className="wc-two-col">
      <div>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d3)", color: "var(--text-heading)", margin: "0 0 12px" }}>{title}</h3>
        <p style={{ fontSize: "var(--text-md)", color: "var(--text-body)", lineHeight: 1.7 }}>{desc}</p>
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {points.map((p, i) => (
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <span style={{ flexShrink: 0, marginTop: 2, color: "var(--brand-primary)" }}><IIcon name="check-circle-2" size={20} /></span>
            <span style={{ color: "var(--text-body)" }}>{p}</span>
          </li>
        ))}
      </ul>
    </div>
  );
  const schedule = [
    ["Morning", "Wake, chores, breakfast together", "check-in with house manager"],
    ["Midday", "Work, school, or job search", "recovery coaching by appointment"],
    ["Evening", "Shared dinner", "12-step or SMART meeting (on-site or nearby)"],
    ["Weekly", "3× house meetings", "1:1 coaching · supportive drug testing"],
  ];
  const included = [
    ["bed", "Furnished bed & board"], ["utensils", "Shared, stocked kitchen"], ["car", "Rides to meetings & appts"],
    ["clipboard-list", "Individual recovery plan"], ["users", "Peer & alumni community"], ["phone-call", "24/7 house support line"],
  ];
  return (
    <>
      <PageHero eyebrow="Our Program" tone="creek"
        title="A path that meets you where you are."
        subtitle="Willow Creek is a structured sober living home with a phased program that grows your independence as you're ready." />
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <IContainer>
          <IReveal><div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 28 }}>
            <Badge variant="water">Structured living</Badge>
            <Badge variant="forest" dot>Staffed 24/7</Badge>
            <Badge variant="clay">Abstinence-based</Badge>
          </div></IReveal>
          <IReveal delay={80}>
          <Card elevation="lg" padding="xl">
            <Tabs tabs={[
              { id: "p1", label: "Phase 1 · Stabilize", content: phase("Stabilize (weeks 1–4)",
                "The first weeks are about safety, rhythm, and rest. Higher structure, more support, fewer decisions — so you can find your feet.",
                ["Daily check-ins & curfew", "House orientation and buddy", "Supportive testing 2–3× weekly", "Build your individual recovery plan"]) },
              { id: "p2", label: "Phase 2 · Rebuild", content: phase("Rebuild (months 2–4)",
                "As trust grows, so does responsibility. You take on work or school, service commitments, and more freedom with the same accountability.",
                ["Employment or education required", "Extended curfew & weekend passes", "Lead a house chore or meeting", "Weekly recovery coaching"]) },
              { id: "p3", label: "Phase 3 · Launch", content: phase("Launch (month 4+)",
                "The final phase is a rehearsal for independent living — with the safety net still in place while you plan your next home.",
                ["Mentor newer residents", "Savings & housing plan", "Flexible schedule", "Warm handoff to alumni network"]) },
            ]} />
          </Card>
          </IReveal>
        </IContainer>
      </section>
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-sunken)" }}>
        <IContainer style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)" }} className="wc-two-col">
          <div>
            <IReveal><IEyebrow>A day at Willow Creek</IEyebrow></IReveal>
            <IReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 24px" }}>Predictable rhythm, room to live.</h2></IReveal>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {schedule.map(([when, a, b], i) => (
                <IReveal key={i} delay={i * 70}><div style={{ display: "flex", gap: 18, padding: "16px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                  <span style={{ flexShrink: 0, width: 88, fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--brand-primary)" }}>{when}</span>
                  <span style={{ color: "var(--text-body)" }}><strong style={{ color: "var(--text-heading)" }}>{a}</strong> · {b}</span>
                </div></IReveal>
              ))}
            </div>
          </div>
          <div>
            <IReveal><IEyebrow>What's included</IEyebrow></IReveal>
            <IReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 24px" }}>One weekly rate covers it.</h2></IReveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {included.map(([ic, t], i) => (
                <IReveal key={i} delay={i * 60}><div style={{ display: "flex", gap: 12, alignItems: "center", background: "var(--surface-card)",
                  padding: "16px 18px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-xs)" }}>
                  <span style={{ color: "var(--brand-secondary)" }}><IIcon name={ic} size={22} /></span>
                  <span style={{ fontWeight: 600, color: "var(--text-heading)", fontSize: "var(--text-sm)" }}>{t}</span>
                </div></IReveal>
              ))}
            </div>
            <IReveal delay={200}><Button variant="accent" size="lg" style={{ marginTop: 28 }} onClick={() => go("contact")} leftIcon={<IIcon name="calendar-check" size={18} />}>Schedule a visit</Button></IReveal>
          </div>
        </IContainer>
      </section>
    </>
  );
}

/* ---------- THE HOME ---------- */
function HomeTourScreen({ go }) {
  const { Button, Badge } = window.WillowCreekDesignSystem_90378c;
  const gallery = [
    ["dawn", "Living room", "sofa", "1 / 1"], ["forest", "The backyard & garden", "trees", "1 / 1"],
    ["room", "Shared bedroom", "bed", "1 / 1"], ["creek", "Kitchen & shared meals", "utensils", "1 / 1"],
    ["sage", "Quiet reading nook", "book-open", "1 / 1"], ["dawn", "Front porch", "armchair", "1 / 1"],
  ];
  const amenities = ["Furnished private & shared rooms", "Fully stocked shared kitchen", "Laundry on site", "Fast Wi-Fi & study space",
    "Fenced backyard & garden", "Off-street parking", "Near transit & meetings", "Weekly housekeeping of common areas"];
  return (
    <>
      <PageHero eyebrow="The Home" tone="clay"
        title="A house that feels like one."
        subtitle="Two calm, well-kept homes on a quiet residential street — close to meetings, jobs, and the outdoors." />
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <IContainer>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-5)" }} className="wc-gallery">
            {gallery.map(([tone, label, icon, ratio], i) => (
              <IReveal key={i} delay={(i % 3) * 90}><IPhoto tone={tone} label={label} icon={icon} ratio={ratio} /></IReveal>
            ))}
          </div>
        </IContainer>
      </section>
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-sunken)" }}>
        <IContainer style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "var(--space-9)", alignItems: "center" }} className="wc-two-col">
          <div>
            <IReveal><IEyebrow>Comforts of home</IEyebrow></IReveal>
            <IReveal delay={80}><h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 24px" }}>The details that make it livable.</h2></IReveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {amenities.map((a, i) => (
                <IReveal key={i} delay={i * 50}><div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{ flexShrink: 0, marginTop: 2, color: "var(--brand-primary)" }}><IIcon name="check" size={18} /></span>
                  <span style={{ color: "var(--text-body)", fontSize: "var(--text-sm)" }}>{a}</span>
                </div></IReveal>
              ))}
            </div>
            <IReveal delay={220}><div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
              <Button variant="primary" onClick={() => go("admissions")} rightIcon={<IIcon name="arrow-right" size={18} />}>Apply to move in</Button>
              <Button variant="secondary" onClick={() => go("contact")}>Schedule a visit</Button>
            </div></IReveal>
          </div>
          <IReveal delay={120}><IPhoto tone="forest" label="Willow Creek · Creekside House" icon="home" ratio="4 / 3" /></IReveal>
        </IContainer>
      </section>
    </>
  );
}

/* ---------- FAQ ---------- */
function FaqScreen({ go }) {
  const { Accordion, Alert, Button } = window.WillowCreekDesignSystem_90378c;
  const faqs = [
    { q: "How long can I stay?", a: "As long as you're working your program and following house agreements. Most residents stay 90 days or more — the milestone research links to lasting recovery. There's no artificial time limit on getting well." },
    { q: "Who is Willow Creek for?", a: "Adults in early recovery from substance use who want a structured, sober, supportive place to rebuild — often after detox, residential treatment, or incarceration. We offer a high level of on-site support." },
    { q: "What are the house rules?", a: "The essentials: complete abstinence, respect for housemates, participation in meetings and chores, curfew (which relaxes by phase), and honesty about your recovery. Rules exist to keep everyone safe — they're applied consistently and fairly." },
    { q: "Is there drug testing?", a: "Yes — regular, supportive testing is part of a structured sober home. It's not a 'gotcha'; it protects the whole house and helps you stay accountable to yourself." },
    { q: "Can my family stay involved?", a: "Absolutely, with your consent. Recovery is stronger with support, and we keep families reasonably informed and invited into the process where it's healthy to do so." },
    { q: "What does it cost?", a: "One transparent weekly rate covers your furnished bed, shared kitchen, utilities, transportation to meetings, and coaching. Reach out and we'll walk you through current rates and any assistance you may qualify for." },
  ];
  return (
    <>
      <PageHero eyebrow="Questions & Answers" tone="canopy"
        title="Everything you're wondering, answered plainly."
        subtitle="If your question isn't here, call us — a real person will pick up." />
      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <IContainer narrow>
          <IReveal><Alert variant="info" title="In crisis right now?" icon={<IIcon name="life-buoy" size={20} />} style={{ marginBottom: 28 }}>
            You don't have to wait for an application. Call or text <strong>988</strong> for the Suicide &amp; Crisis Lifeline, or call us directly at <strong>(940) 555-0142</strong>. Free and confidential, any time.
          </Alert></IReveal>
          <IReveal delay={100}><Accordion defaultOpen={[0]} items={faqs} /></IReveal>
          <IReveal delay={160}><div style={{ textAlign: "center", marginTop: 40 }}>
            <p style={{ color: "var(--text-muted)", marginBottom: 14 }}>Still have a question?</p>
            <Button variant="primary" size="lg" onClick={() => go("contact")} rightIcon={<IIcon name="arrow-right" size={18} />}>Talk to a real person</Button>
          </div></IReveal>
        </IContainer>
      </section>
    </>
  );
}

Object.assign(window.WC, { AboutScreen, ProgramsScreen, HomeTourScreen, FaqScreen });