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

/* ---- About ---- */
function About() {
  return (
    <Section id="about" bg="var(--navy-050)">
      <Container width="var(--container-xl)">
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:56, alignItems:"center" }}>
          <div style={{ position:"relative" }}>
            <img
              src="https://images.unsplash.com/photo-1551836022-4c4c79ecde51?auto=format&fit=crop&w=1000&q=80"
              alt="A teen speaking with a supportive counselor"
              style={{ width:"100%", borderRadius:"var(--radius-xl)", boxShadow:"var(--shadow-lg)", display:"block" }}
            />
            <div style={{ position:"absolute", bottom:-24, right:-8, background:"#fff", borderRadius:"var(--radius-lg)", boxShadow:"var(--shadow-lg)", padding:"18px 22px", display:"flex", alignItems:"center", gap:14 }}>
              <IconBadge icon="fa-solid fa-heart-pulse" color="green" size="md" />
              <div>
                <div style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.1rem", color:"var(--navy-700)", lineHeight:1.1 }}>Evidence-based care</div>
                <div style={{ fontFamily:"var(--font-body)", fontSize:"0.85rem", color:"var(--ink-600)" }}>Built exclusively for adolescents</div>
              </div>
            </div>
          </div>
          <div>
            <Eyebrow>Our mission</Eyebrow>
            <h2 style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"clamp(1.9rem,3.5vw,2.7rem)", lineHeight:1.1, color:"var(--navy-700)", margin:"0 0 18px" }}>Hope and healing for teens — wherever they are on their journey</h2>
            <HeartDivider width={70} style={{ justifyContent:"flex-start", marginBottom:22 }} />
            <p style={{ fontFamily:"var(--font-body)", fontSize:"1.08rem", lineHeight:1.65, color:"var(--ink-700)", margin:"0 0 16px", textWrap:"pretty" }}>Center for Teens was founded to close a critical gap in the Houston area: high-quality, evidence-based mental health care designed specifically for adolescents — not adapted from adult programs.</p>
            <p style={{ fontFamily:"var(--font-body)", fontSize:"1.08rem", lineHeight:1.65, color:"var(--ink-700)", margin:"0 0 26px", textWrap:"pretty" }}>From teens in acute crisis to those who simply want tools for navigating life, every program we offer is rooted in clinical best practices and delivered with genuine compassion and belief in a brighter future.</p>
            <div style={{ fontFamily:"var(--font-serif)", fontStyle:"italic", fontSize:"1.45rem", color:"var(--green-800)", lineHeight:1.3 }}>&ldquo;Have hope — help is on the way.&rdquo;</div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---- Insurance ---- */
function Insurance() {
  const insurers = [
    { name:"Aetna", note:"In-network" },
    { name:"Cigna", note:"In-network" },
    { name:"Curative", note:"In-network" },
    { name:"UnitedHealthcare", note:"In-network" },
  ];
  return (
    <Section id="insurance" bg="var(--cream-50)">
      <Container>
        <SectionHead
          eyebrow="Insurance & Coverage"
          title="We work with your insurance"
          sub="Center for Teens is in-network with major insurers. We also work with out-of-network plans — call us and we’ll help you understand your benefits before your first visit."
        />
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(200px,1fr))", gap:18, marginTop:46 }}>
          {insurers.map(ins => (
            <div key={ins.name} style={{ background:"#fff", borderRadius:"var(--radius-lg)", border:"1px solid var(--line-200)", padding:"30px 24px", textAlign:"center", boxShadow:"var(--shadow-xs)" }}>
              <i className="fa-solid fa-shield-halved" style={{ fontSize:"2.2rem", color:"var(--green-600)", marginBottom:14, display:"block" }} aria-hidden="true"></i>
              <div style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.1rem", color:"var(--navy-700)", marginBottom:8 }}>{ins.name}</div>
              <span style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.7rem", letterSpacing:"0.1em", textTransform:"uppercase", color:"var(--green-600)", background:"var(--green-050)", borderRadius:"var(--radius-pill)", padding:"4px 12px" }}>{ins.note}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop:32, padding:"24px 28px", background:"var(--navy-050)", borderRadius:"var(--radius-lg)", textAlign:"center" }}>
          <p style={{ fontFamily:"var(--font-body)", fontSize:"1rem", color:"var(--ink-700)", margin:"0 0 12px" }}>Out-of-network? We still work with you. Our team helps families navigate coverage and maximize their benefits.</p>
          <a href="https://centerforteens.com/insurance/" target="_blank" rel="noopener noreferrer" style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"var(--green-800)", fontSize:"0.95rem" }}>See full insurance details →</a>
        </div>
      </Container>
    </Section>
  );
}

/* ---- FAQ ---- */
function FAQ() {
  const faqs = [
    ["What’s the difference between PHP and IOP?",
     "PHP (Partial Hospitalization Program) is the more intensive option — teens attend for full days on weekdays and return home each evening. IOP (Intensive Outpatient Program) meets after school, allowing teens to continue attending classes while receiving concentrated, group-based therapy. Our team will help you determine which level is right during the free assessment."],
    ["How do I know which program is right for my teen?",
     "That’s exactly what our free assessment is for. A licensed clinician will talk with you and your teen to understand the full picture and recommend the most appropriate level of care. There’s no obligation and no pressure."],
    ["Do you accept insurance?",
     "Yes. We’re in-network with Aetna, Cigna, Curative, and UnitedHealthcare. We also work with out-of-network plans. Contact us and we’ll help clarify your specific benefits before your first visit."],
    ["How quickly can my teen be seen?",
     `We prioritize getting families in quickly. Call us at ${PHONE} or submit the form and a specialist will reach out within one business day to schedule your free assessment.`],
    ["What happens during the free assessment?",
     "A licensed clinician meets with you and your teen to understand what’s happening, how long it’s been going on, and what your family needs. From there we recommend the right program and walk you through next steps — no pressure."],
    ["Where are you located?",
     "We’re at First Colony Commons, 15263 Southwest Freeway, Sugar Land, TX 77478 — serving teens throughout Greater Houston."],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" bg="var(--cream-50)">
      <Container width="var(--container-md)">
        <SectionHead eyebrow="Questions & answers" title="Frequently asked questions" />
        <div style={{ marginTop:42, display:"grid", gap:12 }}>
          {faqs.map(([q,a],i) => {
            const isOpen = open===i;
            return (
              <div key={q} style={{ background:"#fff", border:"1px solid var(--line-200)", borderRadius:"var(--radius-lg)", boxShadow:isOpen?"var(--shadow-md)":"var(--shadow-xs)", overflow:"hidden", transition:"box-shadow var(--dur-base)" }}>
                <button onClick={() => setOpen(isOpen?-1:i)} style={{ width:"100%", display:"flex", alignItems:"center", gap:16, padding:"20px 24px", background:"none", border:"none", cursor:"pointer", textAlign:"left" }}>
                  <span style={{ flex:1, fontFamily:"var(--font-display)", fontWeight:700, fontSize:"1.05rem", color:"var(--navy-700)" }}>{q}</span>
                  <span style={{ flexShrink:0, width:30, height:30, borderRadius:"999px", background:isOpen?"var(--green-600)":"var(--green-050)", color:isOpen?"#fff":"var(--green-800)", display:"flex", alignItems:"center", justifyContent:"center", transition:"all var(--dur-base)", transform:isOpen?"rotate(180deg)":"none" }}>
                    <i className="fa-solid fa-chevron-down" aria-hidden="true"></i>
                  </span>
                </button>
                {isOpen && <div style={{ padding:"0 24px 22px", fontFamily:"var(--font-body)", fontSize:"1.02rem", lineHeight:1.65, color:"var(--ink-700)", textWrap:"pretty" }}>{a}</div>}
              </div>
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

/* ---- Contact ---- */
function Contact() {
  const rows = [
    ["fa-solid fa-location-dot","Visit us",ADDRESS],
    ["fa-solid fa-phone","Call us",PHONE],
    ["fa-solid fa-envelope","Email",EMAIL],
    ["fa-solid fa-clock","Hours","Mon–Fri during program hours · Assessment calls anytime"],
  ];
  return (
    <Section id="contact" bg="var(--navy-800)">
      <Container width="var(--container-xl)">
        <div style={{ display:"grid", gridTemplateColumns:"0.9fr 1.1fr", gap:46, alignItems:"center" }}>
          <div style={{ color:"#fff" }}>
            <Eyebrow onDark>Get in touch</Eyebrow>
            <h2 style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"clamp(1.9rem,3.6vw,2.7rem)", lineHeight:1.1, margin:"0 0 18px" }}>Your teen doesn’t have to wait.</h2>
            <p style={{ fontFamily:"var(--font-body)", fontSize:"1.08rem", lineHeight:1.6, color:"#dbe3f0", margin:"0 0 30px", maxWidth:460 }}>Request a free assessment or call us. A specialist will reach out within one business day to help you figure out the right next step for your teen.</p>
            <div style={{ display:"grid", gap:18, marginBottom:32 }}>
              {rows.map(([icon,label,val]) => (
                <div key={label} style={{ display:"flex", alignItems:"flex-start", gap:15 }}>
                  <IconBadge icon={icon} color="sky" size="md" outline />
                  <div>
                    <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.78rem", letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--sky-300)" }}>{label}</div>
                    <div style={{ fontFamily:"var(--font-body)", fontSize:"1.02rem", color:"#fff", marginTop:3 }}>{val}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display:"flex", flexWrap:"wrap", gap:13 }}>
              <Button size="lg" icon="fa-solid fa-clipboard-list" onClick={() => scrollToId("assessment")}>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)" }}>Call {PHONE}</Button>
            </div>
          </div>
          <div style={{ borderRadius:"var(--radius-xl)", overflow:"hidden", boxShadow:"0 24px 60px rgba(0,0,0,.4)", border:"1px solid rgba(255,255,255,.14)" }}>
            <iframe
              title="Map to Center for Teens"
              src="https://maps.google.com/maps?q=15263+Southwest+Freeway+Sugar+Land+TX+77478&z=14&output=embed"
              style={{ width:"100%", height:420, border:0, display:"block" }}
              loading="lazy"
            ></iframe>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---- Footer ---- */
function Footer() {
  return (
    <footer style={{ background:"var(--navy-900)", color:"#c3cbdc", padding:"54px 0 30px" }}>
      <Container width="var(--container-xl)">
        <div style={{ display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr", gap:40, paddingBottom:34, borderBottom:"1px solid rgba(255,255,255,.1)" }}>
          <div>
            <div style={{ display:"flex", alignItems:"center", gap:12, marginBottom:16 }}>
              <div style={{ width:40, height:40, borderRadius:"50%", background:"var(--green-600)", display:"flex", alignItems:"center", justifyContent:"center" }}>
                <i className="fa-solid fa-heart-pulse" style={{ color:"#fff", fontSize:"1rem" }} aria-hidden="true"></i>
              </div>
              <div style={{ lineHeight:1.05 }}>
                <div style={{ fontFamily:"var(--font-display)", fontWeight:800, fontSize:"1.1rem", color:"#fff" }}>Center for Teens</div>
                <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.58rem", letterSpacing:"0.18em", color:"var(--sky-300)", textTransform:"uppercase" }}>Teen Mental Health · Sugar Land, TX</div>
              </div>
            </div>
            <p style={{ fontFamily:"var(--font-body)", fontSize:"0.95rem", lineHeight:1.6, maxWidth:320, margin:0 }}>Evidence-based mental health treatment for adolescents in Sugar Land and Greater Houston, TX. PHP, IOP, therapy, and preventive programs — teen-only care.</p>
          </div>
          <div>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.78rem", letterSpacing:"0.12em", textTransform:"uppercase", color:"#fff", marginBottom:16 }}>Programs</div>
            <div style={{ display:"grid", gap:10 }}>
              {[["PHP — Partial Hospitalization"],["IOP — Intensive Outpatient"],["Individual & Family Therapy"],["Mind Matters Program"]].map(([l]) => (
                <span key={l} onClick={() => scrollToId("programs")} style={{ cursor:"pointer", fontFamily:"var(--font-body)", fontSize:"0.95rem" }} className="cft-flink">{l}</span>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:"0.78rem", letterSpacing:"0.12em", textTransform:"uppercase", color:"#fff", marginBottom:16 }}>Contact</div>
            <div style={{ display:"grid", gap:11, fontFamily:"var(--font-body)", fontSize:"0.95rem" }}>
              <div style={{ display:"flex", gap:10 }}><i className="fa-solid fa-location-dot" style={{ color:"var(--sky-300)", marginTop:3 }} aria-hidden="true"></i><span>15263 Southwest Freeway,<br/>Sugar Land, TX 77478</span></div>
              <a href={`tel:${PHONE.replace(/-/g,"")}`} className="cft-flink" style={{ display:"flex", gap:10, textDecoration:"none", color:"inherit" }}><i className="fa-solid fa-phone" style={{ color:"var(--sky-300)" }} aria-hidden="true"></i>{PHONE}</a>
              <a href={`mailto:${EMAIL}`} className="cft-flink" style={{ display:"flex", gap:10, textDecoration:"none", color:"inherit" }}><i className="fa-solid fa-envelope" style={{ color:"var(--sky-300)" }} aria-hidden="true"></i>{EMAIL}</a>
            </div>
          </div>
        </div>
        <div style={{ display:"flex", flexWrap:"wrap", justifyContent:"space-between", gap:12, paddingTop:22, fontFamily:"var(--font-body)", fontSize:"0.82rem", color:"#8794b0" }}>
          <span>&copy; {new Date().getFullYear()} Center for Teens. All rights reserved.</span>
          <span style={{ fontFamily:"var(--font-serif)", fontStyle:"italic", color:"var(--sky-300)" }}>Have hope — help is on the way.</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { About, Insurance, FAQ, Contact, Footer });
