const { Button, IconBadge, HeartDivider, Badge, Card, FeatureItem, Stat, Input } = window.TwinCitiesLivingAssistanceDesignSystem_f22824;
const { PHONE, EMAIL, ADDRESS, GHL_LOCATION_ID, GHL_PIT, scrollToId, Container, Section, Eyebrow, SectionHead } = window;

/* ---- Header ---- */
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [["programs","Programs"],["why-us","Why Us"],["insurance","Insurance"],["faq","FAQ"],["contact","Contact"]];
  return (
    <header style={{ position:"sticky", top:0, zIndex:50, background:"rgba(247,245,239,0.94)", backdropFilter:"blur(8px)", borderBottom:`1px solid ${scrolled?"var(--line-200)":"transparent"}`, boxShadow:scrolled?"var(--shadow-sm)":"none", transition:"box-shadow var(--dur-base), border-color var(--dur-base)" }}>
      <Container width="var(--container-xl)" style={{ display:"flex", alignItems:"center", gap:20, padding:"10px 28px" }}>
        <div style={{ display:"flex", alignItems:"center", gap:12, cursor:"pointer" }} onClick={() => window.scrollTo({top:0,behavior:"smooth"})}>
          <div style={{ width:42, height:42, borderRadius:"50%", background:"var(--green-600)", display:"flex", alignItems:"center", justifyContent:"center" }}>
            <i className="fa-solid fa-heart-pulse" style={{ color:"#fff", fontSize:"1.1rem" }} aria-hidden="true"></i>
          </div>
          <div style={{ lineHeight:1.05 }}>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.1rem", color:"var(--navy-700)" }}>Center for Teens</div>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.58rem", letterSpacing:"0.18em", color:"var(--green-600)", textTransform:"uppercase" }}>Teen Mental Health · Sugar Land, TX</div>
          </div>
        </div>
        <nav style={{ display:"flex", gap:26, marginLeft:"auto", alignItems:"center" }} className="cft-nav">
          {links.map(([k,label]) => (
            <span key={k} onClick={() => scrollToId(k)} style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.9rem", letterSpacing:"0.02em", textTransform:"uppercase", cursor:"pointer", color:"var(--navy-700)" }} className="cft-navlink">{label}</span>
          ))}
        </nav>
        <a href={`tel:${PHONE.replace(/-/g,"")}`} className="cft-phone" style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.95rem", color:"var(--navy-700)", textDecoration:"none", display:"flex", alignItems:"center", gap:8 }}>
          <i className="fa-solid fa-phone" style={{ color:"var(--green-600)" }} aria-hidden="true"></i>{PHONE}
        </a>
        <Button size="sm" icon="fa-solid fa-clipboard-list" onClick={() => scrollToId("assessment")}>Free Assessment</Button>
      </Container>
    </header>
  );
}

/* ---- Lead form ---- */
const cardShell = { background:"#fff", borderRadius:"var(--radius-xl)", boxShadow:"0 24px 60px rgba(8,28,64,.28)", border:"1px solid var(--line-200)", padding:"30px 30px 26px", width:"100%" };

function Field({ error, children }) {
  return <div>{children}{error && <div style={{ fontFamily:"var(--font-body)", fontSize:"0.78rem", color:"var(--red-500)", marginTop:5, display:"flex", alignItems:"center", gap:5 }}><i className="fa-solid fa-circle-exclamation" aria-hidden="true"></i>{error}</div>}</div>;
}

function LeadForm() {
  const [f, setF] = React.useState({ name:"", phone:"", email:"", program:"", message:"" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const set = k => e => setF(s => ({...s, [k]:e.target.value}));
  const validate = () => {
    const er = {};
    if (!f.name.trim()) er.name = "Please enter your name";
    if (!/^[\d\s()+-]{7,}$/.test(f.phone.trim())) er.phone = "Enter a valid phone number";
    if (!/^\S+@\S+\.\S+$/.test(f.email.trim())) er.email = "Enter a valid email";
    setErrors(er);
    return Object.keys(er).length === 0;
  };
  const submit = async e => {
    e.preventDefault();
    if (!validate() || submitting) return;
    setSubmitting(true);
    try {
      if (GHL_LOCATION_ID && GHL_PIT) {
        const res = await fetch("https://services.leadconnectorhq.com/contacts/", {
          method:"POST",
          headers:{ Authorization:`Bearer ${GHL_PIT}`, "Content-Type":"application/json" },
          body: JSON.stringify({
            locationId: GHL_LOCATION_ID,
            firstName: f.name.trim(), phone: f.phone.trim(), email: f.email.trim(),
            source: "Center for Teens LP", tags:["assessment-request"],
            customFields:[
              { key:"program_interest", value:f.program },
              { key:"message", value:f.message.trim() }
            ]
          })
        });
        if (!res.ok) throw new Error(res.status);
      }
    } catch(err) { console.error("CFT LP submit:", err); }
    finally { setSubmitting(false); setSent(true); }
  };

  if (sent) return (
    <div style={cardShell}>
      <div style={{ textAlign:"center", padding:"18px 6px" }}>
        <IconBadge icon="fa-solid fa-check" color="green" size="lg" style={{ margin:"0 auto 18px" }} />
        <h3 style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.6rem", color:"var(--navy-700)", margin:"0 0 10px" }}>Thank you, {f.name.split(" ")[0]}!</h3>
        <p style={{ fontFamily:"var(--font-body)", fontSize:"1rem", lineHeight:1.6, color:"var(--ink-600)", margin:"0 0 22px" }}>A specialist will reach out to schedule your free assessment within one business day.</p>
        <Button variant="outline" icon="fa-solid fa-phone" href={`tel:${PHONE.replace(/-/g,"")}`}>Or call us now: {PHONE}</Button>
      </div>
    </div>
  );

  return (
    <form style={cardShell} onSubmit={submit} noValidate>
      <div style={{ marginBottom:18 }}>
        <div style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.45rem", color:"var(--navy-700)", lineHeight:1.15 }}>Request a free assessment</div>
        <div style={{ fontFamily:"var(--font-body)", fontSize:"0.95rem", color:"var(--ink-600)", marginTop:6 }}>A specialist will call you within one business day.</div>
      </div>
      <div style={{ display:"grid", gap:14 }}>
        <Field error={errors.name}><Input label="Your name" icon="fa-solid fa-user" placeholder="Jane Smith" value={f.name} onChange={set("name")} /></Field>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }} className="cft-form2">
          <Field error={errors.phone}><Input label="Phone" icon="fa-solid fa-phone" placeholder="832-555-0100" value={f.phone} onChange={set("phone")} /></Field>
          <Field error={errors.email}><Input label="Email" icon="fa-solid fa-envelope" placeholder="you@email.com" value={f.email} onChange={set("email")} /></Field>
        </div>
        <div>
          <label style={{ display:"block", fontFamily:"var(--font-display)", fontWeight:600, fontSize:"var(--fs-sm)", color:"var(--text-heading)", marginBottom:6 }}>Program interest</label>
          <div style={{ display:"flex", alignItems:"center", gap:10, background:"#fff", border:"1.5px solid var(--border-strong)", borderRadius:"var(--radius-md)", padding:"0 14px" }}>
            <i className="fa-solid fa-brain" style={{ color:"var(--ink-400)", fontSize:"0.95rem" }} aria-hidden="true"></i>
            <select value={f.program} onChange={set("program")} style={{ flex:1, border:"none", outline:"none", background:"transparent", fontFamily:"var(--font-body)", fontSize:"var(--fs-body)", color:"var(--ink-900)", padding:"13px 0" }}>
              <option value="">Not sure yet — help me decide</option>
              <option>PHP — Partial Hospitalization Program</option>
              <option>IOP — Intensive Outpatient Program</option>
              <option>Mind Matters (after-school program)</option>
              <option>Individual / Family Therapy</option>
            </select>
          </div>
        </div>
        <Input label="What's going on? (optional)" multiline rows={2} placeholder="Brief description of what your teen is experiencing…" value={f.message} onChange={set("message")} />
        <Button type="submit" size="lg" fullWidth icon="fa-solid fa-clipboard-list" style={{ marginTop:4 }} disabled={submitting}>
          {submitting ? "Sending…" : "Request My Free Assessment"}
        </Button>
        <div style={{ fontFamily:"var(--font-body)", fontSize:"0.8rem", color:"var(--ink-400)", textAlign:"center" }}>Or call <a href={`tel:${PHONE.replace(/-/g,"")}`} style={{ color:"var(--green-800)", fontWeight:600 }}>{PHONE}</a> — we’re here for you.</div>
      </div>
    </form>
  );
}

/* ---- Hero ---- */
function Hero() {
  return (
    <section id="assessment" style={{ position:"relative", overflow:"hidden", background:"var(--navy-800)" }}>
      <img src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?auto=format&fit=crop&w=1920&q=80" alt="A teen in a compassionate therapy session" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", objectPosition:"50% 30%" }} />
      <div style={{ position:"absolute", inset:0, background:"linear-gradient(105deg, rgba(14,28,82,.96) 0%, rgba(14,28,82,.88) 40%, rgba(14,28,82,.60) 68%, rgba(14,28,82,.36) 100%)" }} />
      <Container width="var(--container-xl)" style={{ position:"relative", display:"grid", gridTemplateColumns:"1.1fr 0.9fr", gap:54, alignItems:"center", padding:"76px 28px 84px" }}>
        <div className="cft-hero-copy" style={{ color:"#fff" }}>
          <div style={{ display:"inline-flex", alignItems:"center", gap:9, background:"rgba(255,255,255,.12)", border:"1px solid rgba(255,255,255,.2)", borderRadius:"var(--radius-pill)", padding:"7px 15px", fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.78rem", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:26 }}>
            <i className="fa-solid fa-location-dot" style={{ color:"var(--sky-300)" }} aria-hidden="true"></i> Teen Mental Health · Sugar Land &amp; Greater Houston, TX
          </div>
          <h1 style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"clamp(2.4rem, 4.4vw, 3.5rem)", lineHeight:1.04, letterSpacing:"-0.015em", margin:"0 0 22px" }}>When your teen is struggling, you need more than a waitlist.</h1>
          <p style={{ fontFamily:"var(--font-body)", fontSize:"clamp(1.05rem, 1.5vw, 1.22rem)", lineHeight:1.6, color:"#dbe3f0", margin:"0 0 30px", maxWidth:520, textWrap:"pretty" }}>Center for Teens offers evidence-based PHP, IOP, and preventive programs designed exclusively for adolescents — with a free assessment to get started right away.</p>
          <div style={{ display:"flex", flexWrap:"wrap", gap:14, marginBottom:34 }}>
            <Button size="lg" icon="fa-solid fa-clipboard-list" onClick={() => scrollToId("assessment-anchor")}>Request Free Assessment</Button>
            <Button size="lg" variant="ghost" icon="fa-solid fa-phone" href={`tel:${PHONE.replace(/-/g,"")}`} style={{ color:"#fff", border:"1.5px solid rgba(255,255,255,.35)" }}>{PHONE}</Button>
          </div>
          <div style={{ display:"flex", flexWrap:"wrap", gap:"14px 26px" }}>
            {[["fa-solid fa-shield-heart","Evidence-Based Care"],["fa-solid fa-users","Teen-Only Programs"],["fa-solid fa-building-shield","In-Network Insurance"]].map(([i,t]) => (
              <div key={t} style={{ display:"flex", alignItems:"center", gap:9, fontFamily:"var(--font-body)", fontSize:"0.95rem", color:"#eaf0fb" }}>
                <i className={i} style={{ color:"var(--green-400)" }} aria-hidden="true"></i>{t}
              </div>
            ))}
          </div>
        </div>
        <div id="assessment-anchor"><LeadForm /></div>
      </Container>
    </section>
  );
}

/* ---- Programs (high-design section) ---- */
function Programs() {
  const programs = [
    {
      acronym:"PHP", name:"Partial Hospitalization Program",
      intensity:"Most Intensive", color:"#dc2626",
      icon:"fa-solid fa-hospital",
      schedule:"Full days, Mon–Fri · Home evenings & weekends",
      for:"Teens in active crisis who need intensive structure without inpatient admission",
      description:"PHP provides the highest level of outpatient care — a full therapeutic day with individual therapy, group sessions, family work, and psychiatric support as needed. Teens return home each evening, keeping family connection intact while receiving the intensive care they need.",
      pillars:["Individual therapy","Group therapy","Family sessions","Psychiatric support as needed"],
    },
    {
      acronym:"IOP", name:"Intensive Outpatient Program",
      intensity:"Concentrated Care", color:"#d97706",
      icon:"fa-solid fa-users",
      schedule:"After school · 3–5 days/week",
      for:"Teens who need more than weekly therapy but can continue attending school",
      description:"CFT’s IOP is a group-based, DBT-aligned program that delivers concentrated, evidence-based care around your teen’s school schedule. It helps adolescents make real gains while staying engaged in their daily lives and relationships.",
      pillars:["DBT-based group therapy","Individual therapy sessions","Family involvement","Skill-building focus"],
    },
    {
      acronym:"Therapy", name:"Individual, Group & Family Therapy",
      intensity:"Structured Support", color:"#0891b2",
      icon:"fa-solid fa-heart-pulse",
      schedule:"Integrated within PHP & IOP programs",
      for:"All enrolled teens as a core part of their personalized treatment plan",
      description:"Every teen in our programs receives a combination of individual, group, and family therapy guided by evidence-based approaches. Our clinicians build genuine therapeutic relationships, adapting care as each teen’s needs evolve through treatment.",
      pillars:["Personalized care plans","Evidence-based approaches","Family involvement","Progress-adaptive treatment"],
    },
    {
      acronym:"MM", name:"Mind Matters Program",
      intensity:"Preventive", color:"#16a34a",
      icon:"fa-solid fa-seedling",
      schedule:"6 weeks · After school · Twice a week",
      for:"Teens who want to build emotional resilience before reaching a crisis point",
      description:"Mind Matters is our after-school life skills program — six weeks of small-group sessions where teens learn practical, evidence-based tools for managing anxiety, building self-esteem, and navigating life’s inevitable challenges. Mental health care that works before things get critical.",
      pillars:["Emotional regulation skills","Peer group support","Anxiety & stress tools","Self-esteem building"],
    },
  ];

  return (
    <Section id="programs" bg="var(--cream-50)">
      <Container width="var(--container-xl)">
        <SectionHead
          eyebrow="Our Programs"
          title="The right level of care for where your teen is right now"
          sub="From building everyday resilience to intensive day treatment — every program is evidence-based, teen-only, and built around your family’s needs."
        />

        {/* Intensity spectrum bar */}
        <div style={{ maxWidth:680, margin:"42px auto 56px", padding:"0 8px" }}>
          <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.72rem", letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--ink-400)", textAlign:"center", marginBottom:10 }}>Care intensity</div>
          <div style={{ height:10, borderRadius:999, background:"linear-gradient(90deg, #16a34a 0%, #0891b2 33%, #d97706 66%, #dc2626 100%)" }} />
          <div style={{ display:"flex", justifyContent:"space-between", marginTop:8 }}>
            {[["Mind Matters","#16a34a"],["Therapy","#0891b2"],["IOP","#d97706"],["PHP","#dc2626"]].map(([label,color]) => (
              <div key={label} style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.75rem", color, flex:1, textAlign:"center" }}>{label}</div>
            ))}
          </div>
        </div>

        {/* Cards */}
        <div className="cft-prog-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:24 }}>
          {programs.map(p => (
            <div key={p.acronym} className="cft-prog-card" style={{ background:"#fff", borderRadius:"var(--radius-xl)", boxShadow:"0 8px 32px rgba(8,28,64,.10)", border:"1px solid var(--line-200)", overflow:"hidden" }}>
              <div style={{ background:`linear-gradient(135deg, ${p.color}18 0%, ${p.color}08 100%)`, borderBottom:`3px solid ${p.color}`, padding:"28px 30px 22px" }}>
                <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between", gap:16, marginBottom:14 }}>
                  <div>
                    <span style={{ fontFamily:"var(--font-display)", fontWeight:900, fontSize:"2.4rem", color:p.color, lineHeight:1 }}>{p.acronym}</span>
                    <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"1rem", color:"var(--navy-700)", marginTop:4, lineHeight:1.2 }}>{p.name}</div>
                  </div>
                  <span style={{ flexShrink:0, display:"inline-flex", alignItems:"center", gap:6, background:p.color, color:"#fff", fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.68rem", letterSpacing:"0.1em", textTransform:"uppercase", borderRadius:"var(--radius-pill)", padding:"5px 12px", whiteSpace:"nowrap" }}>
                    <i className={p.icon} aria-hidden="true"></i>{p.intensity}
                  </span>
                </div>
                <div style={{ display:"flex", alignItems:"center", gap:8, fontFamily:"var(--font-body)", fontSize:"0.87rem", color:"var(--ink-600)" }}>
                  <i className="fa-regular fa-clock" style={{ color:p.color }} aria-hidden="true"></i>{p.schedule}
                </div>
              </div>
              <div style={{ padding:"24px 30px 28px" }}>
                <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.72rem", letterSpacing:"0.1em", textTransform:"uppercase", color:"var(--ink-400)", marginBottom:5 }}>Best for</div>
                <p style={{ fontFamily:"var(--font-body)", fontSize:"0.95rem", color:"var(--navy-700)", fontWeight:500, margin:"0 0 12px", lineHeight:1.45, textWrap:"pretty" }}>{p.for}</p>
                <p style={{ fontFamily:"var(--font-body)", fontSize:"0.93rem", lineHeight:1.6, color:"var(--ink-600)", margin:"0 0 20px", textWrap:"pretty" }}>{p.description}</p>
                <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"8px 12px" }}>
                  {p.pillars.map(item => (
                    <div key={item} style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <span style={{ flexShrink:0, width:20, height:20, borderRadius:999, background:`${p.color}18`, color:p.color, display:"flex", alignItems:"center", justifyContent:"center", fontSize:"0.62rem" }}>
                        <i className="fa-solid fa-check" aria-hidden="true"></i>
                      </span>
                      <span style={{ fontFamily:"var(--font-body)", fontSize:"0.86rem", color:"var(--ink-700)" }}>{item}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign:"center", marginTop:44 }}>
          <p style={{ fontFamily:"var(--font-body)", fontSize:"1rem", color:"var(--ink-600)", margin:"0 0 18px" }}>Not sure which program fits? We’ll find the right fit together — starting with a free assessment.</p>
          <Button size="lg" icon="fa-solid fa-clipboard-list" onClick={() => scrollToId("assessment")}>Request a Free Assessment</Button>
        </div>
      </Container>
    </Section>
  );
}

/* ---- Why Us ---- */
function WhyUs() {
  const stats = [
    ["Free","Initial assessment","gold"],
    ["4","Specialized programs","white"],
    ["100%","Teen-only care","gold"],
    ["In-Network","Major insurers","white"],
  ];
  const points = [
    ["fa-solid fa-flask","Evidence-based at every level","Every program and technique is grounded in proven clinical research — CBT, DBT, and other validated approaches, not guesswork."],
    ["fa-solid fa-child-reaching","Designed exclusively for teens","We don’t treat adults. Everything — our space, language, and clinical approach — is built for adolescents."],
    ["fa-solid fa-people-group","Family is part of the treatment","Parents and caregivers are active partners in care. Family therapy is built into our programs, not tacked on."],
    ["fa-solid fa-arrows-down-to-line","Meets them where they are","From crisis-level PHP to preventive after-school groups — we have a program for every stage of the journey."],
  ];
  return (
    <Section id="why-us" bg="var(--navy-700)">
      <Container>
        <SectionHead onDark eyebrow="Why families choose us" title="Compassionate, expert care built just for adolescents" sub="Center for Teens exists because adolescents deserve more than a one-size-fits-all approach — and their families deserve a team they can genuinely trust." />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:20, margin:"48px 0 52px" }} className="cft-stats">
          {stats.map(([v,l,a]) => (
            <div key={l} style={{ textAlign:"center", background:"rgba(255,255,255,.06)", border:"1px solid rgba(255,255,255,.12)", borderRadius:"var(--radius-lg)", padding:"26px 16px" }}>
              <Stat value={v} label={l} onDark accent={a} align="center" />
            </div>
          ))}
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(280px,1fr))", gap:26, justifyItems:"center" }}>
          {points.map(([icon,title,desc]) => (
            <FeatureItem key={title} icon={icon} color="green" title={title} description={desc} onDark badgeSize="lg" style={{ maxWidth:400 }} />
          ))}
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, { Header, LeadForm, Hero, Programs, WhyUs });
