// src/Home.jsx — KinCulture Co homepage
// Voice: dignified, plainspoken, role-specific. No jargon. No emoji.

const { useState: useStateHome } = React;

// ------------------------------------------------------------
// HERO
// ------------------------------------------------------------
const HomeHero = () =>
<section className="kc-page">
    <div className="kc-hero">
      <div className="kc-hero__copy">
        <span className="kc-eyebrow">A credentialed leadership development program</span>
        <h1 className="kc-display-xl" style={{ textWrap: "balance" }}>
          Developing<br />the people who<br />care for people.
        </h1>
        <p className="kc-lede kc-lede--xl">Eight to twelve weeks of coursework and weekly 1:1 coaching for newly promoted direct care staff in behavioral health.

      </p>
        <div className="kc-hero__cta">
          <a className="kc-btn kc-btn--primary kc-btn--lg" href="contact.html">Enroll in the Program →</a>
          <a className="kc-btn kc-btn--secondary kc-btn--lg" href="courses.html">See the curriculum</a>
        </div>
        <div className="kc-hero__trust" style={{ display: "block" }}>
          <strong>Located in Utah</strong> · Annual partnerships for agencies in <strong>behavioral health</strong>
        </div>
      </div>
      <div className="kc-hero__art">
        <KCHeroArt />
      </div>
    </div>
  </section>;


// ------------------------------------------------------------
// THESIS STRIP — single-sentence positioning band
// ------------------------------------------------------------
const ThesisStrip = () =>
<section className="kc-section kc-section--soft" style={{ padding: "72px 0" }}>
    <div className="kc-page kc-collapse-md" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
      <h2 className="kc-display-lg" style={{ maxWidth: 980 }}>
        The credential <span style={{ color: "var(--color-brand-coral)" }}>built for this workforce.</span>
      </h2>
      <p className="kc-prose" style={{ maxWidth: 320, paddingBottom: 8 }}>Most are promoted because they are excellent direct-care staff. From day one, they're expected to lead without a guidebook. KinCulture gives behavioral health staff the leadership development their roles require. We have the guidebook and a system to meet them where they are.

    </p>
    </div>
  </section>;


// ------------------------------------------------------------
// ABOUT US — split with stats (matches reference layout)
// ------------------------------------------------------------
const HomeAbout = () =>
<section className="kc-section kc-page" id="about">
    <span className="kc-section-eyebrow">About KinCulture</span>
    <div className="kc-split" style={{ marginTop: 40 }}>
      <div className="kc-split__media">
        <PhotoPlaceholder tone="sage" label="Supervisor in clinical setting" src="assets/supervisor-clinical-setting.png" />
      </div>
      <div className="kc-split__body">
        <h2 className="kc-display-lg">
          One program. Three tiers.<br />Built for the floor.
        </h2>
        <p className="kc-prose">Every tier develops the same four core competencies—Leading People, Risk & Compliance, Critical Incidents, and Building a Team that Lasts—through videos paired with structured weekly coaching. This approach ensures that whether you're just starting or advancing your leadership, you learn through real application, not theory alone.</p>
        <p className="kc-prose">Direct care staff spend more time with clients than anyone else in the building. They're there for the hard mornings, the long nights, and everything in between. They build trust, read behavior, de-escalate crises, and keep people safe, shift after shift.</p>
        <p className="kc-prose">Therapists arrive with degrees. So do administrators. Direct care staff learn their craft on the floor, in real time, with real people, and they are offered the least formal training of anyone on the team. That skill deserves an education of its own. KinCulture is that education: leadership programs built for direct care, by people who have done the work.</p>
        <a className="kc-link" href="about.html" style={{ marginTop: 12 }}>Read the full story →</a>
      </div>
    </div>
  </section>;


// ------------------------------------------------------------
// SERVICE / WHAT WE DO — large colored card with image (per reference)
// ------------------------------------------------------------
const HomeService = () =>
<section className="kc-section kc-page" id="service">
    <span className="kc-section-eyebrow">The program</span>
    <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "5fr 7fr", gap: 24 }} className="kc-collapse-md">
      <div className="kc-fcard kc-fcard--forest" style={{ minHeight: 420, padding: 40, justifyContent: "space-between" }}>
        <div>
          <span className="kc-fcard__eyebrow" style={{ color: "#C8A96E", opacity: 1 }}>Hybrid · 12 weeks · 1:1 coaching</span>
          <h3 className="kc-display-md" style={{ marginTop: 16, color: "#FAF7F2" }}>Coursework at the beginning of the week. Scheduled 1:1 with a coach. Application the rest of the week.

        </h3>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14, color: "rgba(250,247,242,0.88)", fontSize: 15, lineHeight: 1.5 }}>
          <li>· Weekly asynchronous video module — 30 to 45 minutes</li>
          <li>· Weekly 1:1 coaching session with a coach</li>
          <li>· Weekly applied assignment that ships in the supervisor's own program</li>
          <li>· Cohort completion delivers an association-recognized credential</li>
        </ul>
        <a className="kc-btn kc-btn--on-color" href="courses.html" style={{ alignSelf: "flex-start" }}>See the 12-week arc →</a>
      </div>
      <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 24 }}>
        <div className="kc-split__media" style={{ aspectRatio: "auto" }}>
          <PhotoPlaceholder tone="ochre" label="1:1 coaching session" src="assets/one-on-one-coaching.png" />
        </div>
        <div className="kc-split__media" style={{ aspectRatio: "auto" }}>
          <PhotoPlaceholder tone="peach" label="Cohort group, mixed roles" src="assets/training-laptop-desk.png" />
        </div>
      </div>
    </div>
  </section>;


// ------------------------------------------------------------
// COURSES — alternating cards, one tier per card (per reference)
// ------------------------------------------------------------
const TIER_CARDS = [
{
  eyebrow: "Tier 1",
  title: "Lead Direct Care Staff",
  body: "Lead - Mental Health Technician, Behavioral Health Technician, Cottage Aide, Youth Care Worker, Residential Counselor, Direct Support Professional, Recovery Support Professional, Charge Technician",
  img: "sage",
  label: "Floor lead in residential setting",
  src: "assets/floor-lead-residential.png",
  flip: false
},
{
  eyebrow: "Tier 2",
  title: "Direct Care Supervisor",
  body: "Supervisor - Mental Health Technician, Behavioral Health Technician, Cottage Aide, Youth Care Worker, Residential Counselor, Direct Support Professional, Recovery Support Professional,",
  img: "peach",
  label: "Clinical supervisor reviewing charts",
  src: "assets/clinical-supervisor-charts.png",
  flip: true
},
{
  eyebrow: "Tier 3",
  title: "Direct Care Senior Manager",
  body: "Manager - Milieu, Program, Residential Life, Behavioral Health",
  img: "walnut",
  label: "Program Director at planning table",
  src: "assets/program-director-planning.png",
  flip: false
}];


const HomeCourses = () =>
<section className="kc-section kc-page" id="courses">
    <span className="kc-section-eyebrow">Courses</span>
    <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 24 }}>
      {TIER_CARDS.map((c, i) =>
    <div key={c.eyebrow} style={{
      display: "grid",
      gridTemplateColumns: c.flip ? "7fr 5fr" : "5fr 7fr",
      gap: 24
    }} className="kc-tier-row kc-collapse-md">
          {c.flip ?
      <>
              <div className="kc-split__media" style={{ aspectRatio: "16/10" }}>
                <PhotoPlaceholder tone={c.img} label={c.label} src={c.src} />
              </div>
              <CourseCard {...c} />
            </> :

      <>
              <CourseCard {...c} />
              <div className="kc-split__media" style={{ aspectRatio: "16/10" }}>
                <PhotoPlaceholder tone={c.img} label={c.label} src={c.src} />
              </div>
            </>
      }
        </div>
    )}
    </div>
    <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
      <a className="kc-btn kc-btn--primary kc-btn--lg" href="courses.html">View all weeks across all tiers →</a>
    </div>
  </section>;


const CourseCard = ({ eyebrow, title, body }) =>
<article className="kc-fcard kc-fcard--cream" style={{ minHeight: 280, padding: 36 }}>
    <span className="kc-pill kc-pill--ochre" style={{ alignSelf: "flex-start" }}>{eyebrow}</span>
    <h3 className="kc-display-sm">{title}</h3>
    <p className="kc-fcard__body" style={{ fontSize: 15.5 }}>{body}</p>
    <a className="kc-link" href="courses.html">See this tier's {eyebrow === "Tier 1" ? "8" : "12"} weeks →</a>
  </article>;


// ------------------------------------------------------------
// BENEFITS — 4 small cards (per reference)
// ------------------------------------------------------------
const BENEFITS = [
{ icon: "users", title: "Supervisor retention", body: "Staff support is the single biggest retention predictor in behavioral health. With KinCulture, newly promoted staff experience support in their development. That becomes the standard they set for their own teams." },
{ icon: "shield", title: "Reduced critical incidents", body: "Trained staff prevent more incidents than they respond to — and when one happens, they know what to do in the first ninety minutes." },
{ icon: "compass", title: "Culture that lasts.", body: "Culture is set by lead staff — in every hire, every accountability conversation, every shift handoff. Trained well, the team shows it. Hires that hold. Culture that retains. A successor in development." },
{ icon: "leaf", title: "Faster, Smoother Promotions", body: "When you promote someone, they start developing as a leader immediately. The training keeps pace with the promotion." }];


const BenefitIcon = ({ name }) => {
  const common = { width: 22, height: 22, fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    users: <g><circle cx="9" cy="8" r="3.5" /><path d="M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6" /><circle cx="17" cy="9" r="2.5" /><path d="M15 19c0-2.4 1.6-4.5 4-5" /></g>,
    shield: <path d="M12 3 L20 6 V12 C20 16 16 19 12 21 C8 19 4 16 4 12 V6 Z" />,
    compass: <g><circle cx="12" cy="12" r="9" /><path d="M15 9 L13 13 L9 15 L11 11 Z" /></g>,
    leaf: <g><path d="M5 19 C5 11 11 5 19 5 C19 13 13 19 5 19 Z" /><path d="M5 19 L13 11" /></g>
  };
  return <svg viewBox="0 0 24 24" {...common}>{paths[name]}</svg>;
};

const HomeBenefits = () =>
<section className="kc-section kc-page" id="benefits">
    <span className="kc-section-eyebrow">Benefits of the program</span>
    <h2 className="kc-display-lg" style={{ marginTop: 16, maxWidth: 920 }}>
      What an agency gets when its supervisors are actually prepared.
    </h2>
    <div className="kc-fgrid kc-fgrid--4" style={{ marginTop: 48 }}>
      {BENEFITS.map((b) =>
    <article key={b.title} className="kc-fcard kc-fcard--cream" style={{ minHeight: 220, padding: 28 }}>
          <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: "var(--color-brand-coral)", color: "var(--color-on-dark)",
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>
            <BenefitIcon name={b.icon} />
          </div>
          <h4 className="kc-fcard__title" style={{ marginTop: 8 }}>{b.title}</h4>
          <p className="kc-fcard__body">{b.body}</p>
        </article>
    )}
    </div>
    <div style={{ marginTop: 24 }}>
      <a className="kc-link" href="benefits.html">See the full case for buyers →</a>
    </div>
  </section>;


// ------------------------------------------------------------
// LEAD CAPTURE / FREE GUIDE
// ------------------------------------------------------------
const LeadCapture = () => {
  const [submitted, setSubmitted] = useStateHome(false);
  const [name, setName] = useStateHome("");
  const [email, setEmail] = useStateHome("");
  return (
    <section className="kc-section kc-section--soft" id="guide">
      <div className="kc-page kc-collapse-md" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 56, alignItems: "center" }}>
        <div className="kc-split__media" style={{ aspectRatio: "4/5" }}>
          <PhotoPlaceholder tone="forest" label="Buyer's brief, on a desk" src="assets/buyers-brief-desk.png" />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <span className="kc-section-eyebrow">A brief for buyers</span>
          <h2 className="kc-display-lg" style={{ maxWidth: 600 }}>
            The brief for behavioral health agencies.
          </h2>
          <p className="kc-lede" style={{ maxWidth: 560 }}>
            Want to learn more about the supervisor-development problem in your subsector, the numbers behind it, and how to start the conversation in your agency? Request a PDF with more information.
          </p>
          {submitted ?
          <div style={{
            background: "#EAF0E4", color: "#2F4F2A", padding: "16px 20px",
            borderRadius: 12, fontWeight: 500, maxWidth: 460
          }}>
              Thank you. The brief is on its way to {email || "your inbox"} — and we'll be in touch within a business day.
            </div> :

          <form onSubmit={(e) => {e.preventDefault();setSubmitted(true);}} style={{ maxWidth: 460, display: "flex", flexDirection: "column", gap: 12 }}>
              <input className="kc-input" placeholder="Your name" required value={name} onChange={(e) => setName(e.target.value)} />
              <input className="kc-input" type="email" placeholder="Work email" required value={email} onChange={(e) => setEmail(e.target.value)} />
              <button className="kc-btn kc-btn--primary kc-btn--lg" type="submit">Send me the brief →</button>
              <span className="kc-prose" style={{ fontSize: 12, color: "var(--color-muted)" }}>
                We'll only email you about KinCulture. No third-party sharing.
              </span>
            </form>
          }
        </div>
      </div>
    </section>);

};

// ------------------------------------------------------------
// TESTIMONIALS — illustrative voice (clearly labelled as buyer scenarios)
// ------------------------------------------------------------






// ------------------------------------------------------------
// FAQ
// ------------------------------------------------------------
const FAQS = [
{ q: "Who pays — the agency or the participant?", a: "Agencies reserve cohort seats for the year ahead. Supervisors enroll the moment they're promoted. Leadership development starts the day the new role does." },
{ q: "What is the time commitment per week?", a: "A 30–45 minute video module, one 1:1 coaching session, and one applied assignment that ships in the supervisor's own program. About 2.5 to 3 hours of focused time per week." },
{ q: "How do mixed-role cohorts work?", a: "Tier 1 cohorts mix shift leads, lead RBTs, charge nurses, and lead teachers. Tier 2 mixes credentialed clinical supervisors with BCBAs and program managers. The lesson architecture is shared; the worked examples and language shift by tier." },
{ q: "Is the credential association-recognized?", a: "Yes. Association partnerships are named on the credential and recognized in the field. We can share the current list under NDA during a buyer conversation." },
{ q: "What subsectors do you serve?", a: "We are a behavioral health focused organization geared toward clinical mental health agencies, Substance use disorder treatment, and ABA / neurodevelopmental services. " },
{ q: "Where are you based and do you take out-of-region partners?", a: "We're in Lehi, Utah. Years 1–2 focus on Utah and the Mountain West; from Year 3 the program is national. Out-of-region inbound is welcomed at full retail today." }];


const FAQ = () => {
  const [open, setOpen] = useStateHome(0);
  return (
    <section className="kc-section kc-page">
      <span className="kc-section-eyebrow">Frequently asked</span>
      <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 56, marginTop: 24, alignItems: "start" }} className="kc-collapse-md">
        <h2 className="kc-display-lg">The questions buyers ask first.</h2>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {FAQS.map((f, i) =>
          <div key={i} style={{ borderTop: i === 0 ? "1px solid var(--color-hairline)" : "none", borderBottom: "1px solid var(--color-hairline)" }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
                background: "transparent", border: 0, cursor: "pointer", padding: "22px 0",
                font: "600 18px/1.4 var(--font-body)", color: "var(--color-ink)", textAlign: "left",
                letterSpacing: "-0.1px"
              }}>
              
                <span>{f.q}</span>
                <span style={{ marginLeft: 16, color: "var(--color-brand-coral)", fontSize: 22, lineHeight: 1, transform: open === i ? "rotate(45deg)" : "none", transition: "transform .15s ease" }}>+</span>
              </button>
              {open === i &&
            <div style={{ paddingBottom: 22 }}>
                  <p className="kc-prose" style={{ maxWidth: 640 }}>{f.a}</p>
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ------------------------------------------------------------
// CONTACT CTA BAND
// ------------------------------------------------------------
const HomeContactBand = () =>
<section className="kc-section kc-section--dark" id="contact" style={{ paddingTop: 96, paddingBottom: 96 }}>
    <div className="kc-page kc-collapse-md" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "center" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <span className="kc-section-eyebrow">Talk to us</span>
        <h2 className="kc-display-lg">Reserve cohort seats for your agency.</h2>
        <p className="kc-lede" style={{ color: "rgba(250,247,242,0.85)", maxWidth: 540 }}>
          Tell us your subsector, your size, and how many supervisors you promote in a year. We'll send a fit assessment and a partnership outline within one business day.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
          <a className="kc-btn kc-btn--on-color kc-btn--lg" href="contact.html">Book a call →</a>
          <a className="kc-btn" href="mailto:Partnerships@KinCultureCo.com" style={{ background: "transparent", color: "var(--color-on-dark)", boxShadow: "inset 0 0 0 1px rgba(250,247,242,0.3)" }}>Partnerships@KinCultureCo.com</a>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 18, color: "var(--color-on-dark)" }}>
        <ContactInfoRow label="Founder" value="Casey Sablan-Harris" />
        <ContactInfoRow label="Email" value="Partnerships@KinCultureCo.com" />
        <ContactInfoRow label="Phone" value="(385) 323-2551" />
        <ContactInfoRow label="Office" value="Lehi, Utah" />
        <ContactInfoRow label="Coverage" value="Utah, Mountain West, national from 2027" />
      </div>
    </div>
  </section>;


const ContactInfoRow = ({ label, value }) =>
<div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, padding: "16px 0", borderTop: "1px solid rgba(250,247,242,0.12)" }}>
    <span style={{ font: "600 11px/1 var(--font-body)", letterSpacing: "1.4px", textTransform: "uppercase", color: "#A8B89A", paddingTop: 4 }}>{label}</span>
    <span style={{ font: "500 18px/1.3 var(--font-body)", color: "var(--color-on-dark)" }}>{value}</span>
  </div>;


// ------------------------------------------------------------
// Composition
// ------------------------------------------------------------
const Home = () =>
<>
    <TopNav active="home" />
    <main>
      <HomeHero />
      <ThesisStrip />
      <HomeAbout />
      <HomeService />
      <HomeCourses />
      <HomeBenefits />
      <LeadCapture />
    </main>
    <Footer />
  </>;


window.Home = Home;