/* RAAIRO Project detail template. Exposes window.RAAIRODetail. */
const DDS = window.RAAIRODesignSystem_d9bba9;
const { SectionBand, CTABand, Badge, Button, ProjectCard, FAQAccordion } = DDS;

function DetailBlock({ label, children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
      <h3 style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--brand-accent)", margin: 0 }}>{label}</h3>
      <p style={{ fontSize: "var(--text-md)", lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>{children}</p>
    </div>
  );
}

function RAAIRODetail({ slug, nav }) {
  const data = window.RAAIRO_DATA;
  const p = data.projects.find((x) => x.slug === slug) || data.projects[0];
  const themeColor = `var(--theme-${p.theme})`;
  const related = data.projects.filter((x) => x.theme === p.theme && x.slug !== p.slug).slice(0, 3);

  return (
    <div>
      {/* Hero */}
      <div style={{ background: `linear-gradient(135deg, ${themeColor} 0%, color-mix(in srgb, ${themeColor} 55%, #000) 100%)`, color: "#fff", padding: "var(--space-9) var(--gutter)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
          <button onClick={() => nav("projects")} style={{ background: "transparent", border: "none", color: "rgba(255,255,255,0.85)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", textTransform: "uppercase", letterSpacing: "0.08em", cursor: "pointer", padding: 0, marginBottom: "var(--space-5)" }}>← All projects</button>
          <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", marginBottom: "var(--space-4)" }}>
            <Badge tone={p.status} dot variant="solid">{p.status}</Badge>
            <Badge tone={p.theme} variant="solid">{data.themeLabels[p.theme]}</Badge>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(2.25rem, 6vw, 3.25rem)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "0 0 var(--space-4)", color: "#fff" }}>{p.name}</h1>
          <p style={{ fontSize: "var(--text-md)", lineHeight: 1.6, maxWidth: 620, color: "rgba(255,255,255,0.9)", margin: 0 }}>{p.summary}</p>
          {p.site && (
            <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", marginTop: "var(--space-5)", color: "rgba(255,255,255,0.85)" }}>◍ {p.region} &nbsp;·&nbsp; {p.site}</p>
          )}
        </div>
      </div>

      {p.scaffold ? (
        <SectionBand narrow eyebrow="Draft" heading="This project page is being written.">
          <p style={{ color: "var(--text-muted)" }}><strong>TODO</strong> — full copy for {p.name} (who it's for, what it is, how it works, how it's sustained) still needs to be supplied. It follows the same template as our five documented projects.</p>
          <Button variant="secondary" onClick={() => nav("projects")}>Back to directory</Button>
        </SectionBand>
      ) : (
        <>
          <SectionBand>
            <div style={{ display: "grid", gap: "var(--space-8)", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
              <DetailBlock label="What it is">{p.what}</DetailBlock>
              <DetailBlock label="Who it's for">{p.who}</DetailBlock>
              <DetailBlock label="How it works">{p.how}</DetailBlock>
              <DetailBlock label="How it's sustained">{p.sustained}</DetailBlock>
            </div>
          </SectionBand>

          <SectionBand tone="clay-soft" narrow eyebrow="Trust as a feature" heading="Built to be transparent">
            <p style={{ fontSize: "var(--text-md)", lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>{p.trust}</p>
          </SectionBand>

          <SectionBand eyebrow="Good to know" heading="Common questions" narrow>
            <FAQAccordion defaultOpen={[0]} items={[
              { q: "How is my data handled?", a: "We collect only what the project needs, explain why, and let you opt out. Personal data is stored in the EU/CH where required." },
              { q: "What does it cost?", a: "Core access is free or offered on a transparent, need-based scale. Any fees are shown before you commit." },
              { q: "How can I get involved?", a: "Most projects welcome volunteers and partners. Reach out via the Get Involved page and mention " + p.name + "." },
            ]} />
          </SectionBand>
        </>
      )}

      {related.length > 0 && (
        <SectionBand eyebrow="Related work" heading={"More in " + data.themeLabels[p.theme]} tone="band">
          <div style={{ display: "grid", gap: "var(--space-5)", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
            {related.map((r) => (
              <div key={r.slug} onClick={() => nav(r.scaffold ? "projects" : "detail", r.slug)} style={{ cursor: "pointer" }}>
                <ProjectCard title={r.name} theme={r.theme} status={r.status} region={r.region} summary={r.summary} href="#" />
              </div>
            ))}
          </div>
        </SectionBand>
      )}

      <CTABand tone="forest" heading={"Support the work behind " + p.name}
        text="Every RA | AI | RO project runs on volunteers and donations. Help keep it live."
        primaryCta={{ label: "Support RA | AI | RO", href: "#support" }}
        secondaryCta={{ label: "Volunteer", href: "#volunteer" }} />
    </div>
  );
}

window.RAAIRODetail = RAAIRODetail;