/* eslint-disable */
// AI Literacy page, written from the BUYER's perspective, to sell the service.
// Informed by the deck's Capability pillar, but deliberately does NOT give the
// teaching away: we name the foundations and the outcomes to prove depth and
// create need, and keep the actual "how" (full definitions, the voice Skill,
// the peer-practice playbook) inside the paid engagement.

// The five foundations, NAMED to signal depth, described by why they matter to
// the buyer, not how to do them. The "how" is the workshop.
const FOUNDATIONS = [
  { w: "Prompting", d: "The difference between a generic answer and a genuinely useful one. Almost no one is taught this properly." },
  { w: "Grounding", d: "Why AI makes things up, and how your team gets answers they can actually stand behind." },
  { w: "RAG", d: "Letting AI work from your own information, safely, and knowing what it should never be allowed to see." },
  { w: "Bias awareness", d: "Every model leans differently. Knowing how is what keeps AI out of decisions it could get badly wrong." },
  { w: "Model selection", d: "The right tool for the task at hand. Most teams run at half capacity without ever realising it." },
];

// Outcomes, what the buyer's team walks away with (benefits, not methods).
const OUTCOMES = [
  {
    icon: "user-check",
    h: "Confident daily users",
    d: "People who reach for AI on the right work and get real value from it, not a novelty they tried once and abandoned.",
  },
  {
    icon: "pen-line",
    h: "Output that sounds like you",
    d: "The fix for \u201cAI slop.\u201d Your team learns to make AI write in your voice, so the work reads like your business, not a generic chatbot.",
  },
  {
    icon: "trending-up",
    h: "Capability that compounds",
    d: "We leave a peer-practice habit behind, champions and a cadence, so confidence keeps growing after we go, instead of fading after one session.",
  },
];

function LiteracyScreen({ go, t }) {
  return (
    <div data-screen-label="09 AI Literacy">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="container">
          <Crumbs items={["Services", "Foundations", "AI Literacy"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="enable" dot>Foundations</Tag>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Build your team's AI capability, <em>end to end.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Most teams have a few people quietly experimenting and everyone else unsure where
                to start. We close that gap, turning scattered curiosity into a whole team
                that uses AI well, safely, and every day.
              </p>
              <div className="cta-row" style={{ marginTop: 32 }}>
                <Button variant="primary" size="lg" onClick={() => go("contact")}>
                  Design a program for my team <Icon name="arrow-right" size={16} className="arrow" />
                </Button>
                <Button variant="secondary" size="lg" onClick={() => go("blueprint")}>
                  Start with a Blueprint
                </Button>
              </div>
            </div>

            <div className="card" style={{ padding: 28, background: "#fff" }}>
              <div className="enb-card-head">
                <EnablementMiniTriangle active="literacy" />
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".12em", color: "var(--ia-blue)" }}>Foundations</div>
                  <div style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500, marginTop: 2 }}>Builds <strong>the skills</strong></div>
                </div>
              </div>
              <hr className="divider" style={{ margin: "14px 0" }} />
              <Glance label="Format"    value="Virtual or in-person" />
              <Glance label="Model"     value="Peer practice, monthly cadence" />
              <Glance label="Audience"  value="Whole team, leadership, or by role" />
              <Glance label="Tailored to" value="Your tools and your starting point" />
              <Glance label="You leave with" value="Working confidence, not certificates" last />
            </div>
          </div>
        </div>
      </section>

      {/* WHAT REAL LITERACY MEANS, foundations named (teaser, proof of depth) */}
      <section className="section section--paper" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>More than &ldquo;how to use ChatGPT&rdquo;</Eyebrow>
            <h2 className="h-section">Real literacy rests on <em style={{ fontStyle: "normal", color: "var(--ia-blue)" }}>five essentials.</em></h2>
            <p className="lede">
              Tool tips date the moment the next update ships. We build the essentials that
              stay true whichever tool your team is in, so they can pick up anything new
              on their own. Here is what we cover; the depth happens in the room.
            </p>
          </div>

          <div className="lit-basics">
            {FOUNDATIONS.map((b, i) => (
              <div key={i} className="lit-basic">
                <span className="term-n">Essential · 0{i + 1}</span>
                <span className="term-w">{b.w}</span>
                <span className="term-d">{b.d}</span>
              </div>
            ))}
          </div>

          <p style={{ textAlign: "center", marginTop: 30, fontSize: 16, color: "var(--ink)", maxWidth: "58ch", marginInline: "auto", lineHeight: 1.5 }}>
            Tool tutorials last a week before the next product update.{" "}
            <strong style={{ color: "var(--ia-blue)" }}>Literacy is the durable investment.</strong>
          </p>
        </div>
      </section>

      {/* OUTCOMES, what the buyer's team walks away with */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>What your team walks away with</Eyebrow>
            <h2 className="h-section">The outcome, not the certificate.</h2>
            <p className="lede">
              We measure success by what changes back at work, not attendance. Three
              things you should expect from a program that lands.
            </p>
          </div>

          <div className="grid grid--3" style={{ gap: 20, alignItems: "stretch" }}>
            {OUTCOMES.map((o, i) => (
              <div key={i} className="card" style={{ padding: 30, display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--pl-enable-bg)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={o.icon} size={22} color="var(--pl-enable-fg)" />
                </div>
                <h3 className="h-card" style={{ margin: 0 }}>{o.h}</h3>
                <p style={{ margin: 0, color: "#5C6172", fontSize: 14.5, lineHeight: 1.55 }}>{o.d}</p>
              </div>
            ))}
          </div>

          {/* Safe-disclosure tie-in to Governance, kept to a single buyer-facing line */}
          <div className="card" style={{ marginTop: 20, padding: 28, display: "grid", gridTemplateColumns: "1fr auto", gap: 28, alignItems: "center", borderTop: "3px solid var(--ia-light-blue)" }}>
            <div>
              <h3 className="h-card" style={{ fontSize: 20, margin: "0 0 6px" }}>
                Capability only compounds when people feel safe to use AI openly.
              </h3>
              <p style={{ margin: 0, color: "#5C6172", fontSize: 14.5, lineHeight: 1.55, maxWidth: "64ch" }}>
                Literacy and governance work together, the right policy makes disclosure
                safe, so you can actually see what's working and coach it. We line the two up.
              </p>
            </div>
            <Button variant="secondary" onClick={() => go("governance")}>
              See AI Governance <Icon name="arrow-right" size={14} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

      {/* HOW WE RUN IT, image slot + delivery */}
      <section className="section section--paper">
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 56, alignItems: "stretch",
            background: "#fff", border: "1px solid var(--hairline)", borderRadius: 24, overflow: "hidden",
          }}>
            <div style={{ minHeight: 460, background: "#F2F2EE", position: "relative" }}>
              <image-slot
                id="literacy-team"
                placeholder="Photo of a team in a workshop"
                shape="rect"
                style={{ height: "100%", width: "100%" }}
              />
            </div>
            <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", gap: 24 }}>
              <Eyebrow>How we run it</Eyebrow>
              <h2 className="h-section" style={{ fontSize: 36 }}>
                Built around your team, your tools, your reality.
              </h2>
              <ul className="bullet-list">
                <li>Pitched to your team's actual starting line, the grad and the exec both move forward.</li>
                <li>Hands-on practice on the tools your team will actually use, not generic demos.</li>
                <li>The essentials first, so capability outlasts the next product update.</li>
                <li>A peer-practice habit left behind, champions and a cadence, not a one-off spike.</li>
              </ul>
              <div>
                <Button variant="primary" onClick={() => go("contact")}>
                  Talk to us about your team <Icon name="arrow-right" size={14} className="arrow" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BOTTOM CTA */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="From the keen few to the whole org"
            title={<span>Tell us your team size and where they are today. We'll design a literacy program that builds durable capability, not another tool tutorial.</span>}
            cta="Design a program"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>
  );
}

// ---------- Glance row (re-export local copy, since BlueprintScreen owns the original) ----------
function Glance({ label, value, last }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "10px 0", borderBottom: last ? "0" : "1px solid var(--hairline)" }}>
      <span style={{ fontSize: 13, color: "#5C6172" }}>{label}</span>
      <span style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500, textAlign: "right", maxWidth: "60%" }}>{value}</span>
    </div>
  );
}

window.LiteracyScreen = LiteracyScreen;