/* Conto Labs website kit · Nav + Hero + Problem section
   All copy/images come from content/site.yaml via window.CONTENT. */

// Mustard palette classes applied to the three symptom tiles, in order.
const SYMPTOM_TILE = ["o", "y", "g"];

function SiteNav() {
  const c = window.CONTENT.nav;
  return (
    <nav>
      <div className="container nav-in">
        <a href="#home" className="logo" aria-label={c.logoAlt}><Raw html={c.logo} /></a>
        <div className="nav-links">
          {c.links.map((l) => (
            <a href={l.href} key={l.href}>{l.label}</a>
          ))}
          <a href={c.cta.href} className="nav-cta">{c.cta.label}</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const c = window.CONTENT.hero;
  return (
    <header id="home" className="hero">
      <div className="container">
        <span className="eyebrow">{c.eyebrow}</span>
        <h1>{c.heading} <span className="hl">{c.highlight}</span>{c.headingAfter ? " " + c.headingAfter : ""}</h1>
        <p className="lede">{c.lede}</p>
        <div className="hero-cta">
          <a href={c.primaryCta.href} className="btn btn-primary">{c.primaryCta.label}</a>
          <a href={c.secondaryCta.href} className="btn btn-ghost">{c.secondaryCta.label}</a>
        </div>
      </div>
    </header>
  );
}

function Problem() {
  const c = window.CONTENT.problem;
  return (
    <section id="problem" style={{ paddingTop: 64 }}>
      <div className="container">
        <div className="sec-head">
          <span className="kicker">{c.kicker}</span>
          <h2>{c.heading}</h2>
          <p>{c.intro}</p>
        </div>

        <div className="profiles">
          {c.profiles.map((p, i) => (
            <div className={"profile " + (i === 0 ? "a" : "b") + " reveal"} key={p.label}>
              <span className="lab">{p.label}</span>
              <h3>{p.heading}</h3>
              <p>{p.text}</p>
            </div>
          ))}
        </div>

        <div className="sec-head" style={{ marginBottom: 30 }}>
          <h2 style={{ fontSize: 24 }}>{c.symptomsHeading}</h2>
        </div>
        <div className="grid grid-3">
          {c.symptoms.map((s, i) => (
            <div className="card reveal" key={s.heading}>
              <Raw as="div" className={"tile " + (SYMPTOM_TILE[i] || "")} html={s.icon} />
              <h3>{s.heading}</h3>
              <p>{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteNav, Hero, Problem });