/* Public brand library: guidance and finished export downloads. */
const LibraryLink = ({ href, children, primary = false, download = false }) => (
  <a href={href} download={download || undefined}
    className="inline-flex items-center justify-center rounded-lg px-4 py-3"
    style={{ background: primary ? BRAND.primary[500] : BRAND.surface.card, color: primary ? "#FFFFFF" : BRAND.primary[700], border: `1px solid ${BRAND.primary[500]}`, fontSize: 14, fontWeight: 700, textDecoration: "none", lineHeight: 1.4 }}>
    {children}
  </a>
);

const PublicLibraryIntro = () => (
  <section aria-labelledby="library-use-title">
    <SectionEyebrow number="02" label="Start here" />
    <h2 id="library-use-title" style={{ fontSize: 30, fontWeight: 700, color: BRAND.ink.body, letterSpacing: "-0.02em" }}>Use the brand in your next project</h2>
    <div className="grid md:grid-cols-3 gap-4 mt-5">
      {[
        ["01", "Start with the message", "Lead with cybersecurity engineering. Use Voice for company descriptions and naming rules.", "#voice", "Read the messaging"],
        ["02", "Choose your finished assets", "Preview the logo variants and animated intros. Download the format and resolution your project needs.", "#assets", "Get logos and videos"],
        ["03", "Choose the design treatment", "Use the technical system for dense content and the cinematic language for campaigns, events, and team stories.", "#design-language", "Explore the design language"],
      ].map(([n, title, body, href, label]) => (
        <Card key={n} className="flex flex-col">
          <div className="font-mono" style={{ color: BRAND.primary[500], fontWeight: 700, fontSize: 14 }}>{n}</div>
          <h3 className="mt-3" style={{ fontSize: 21, fontWeight: 700, color: BRAND.ink.body }}>{title}</h3>
          <p className="mt-3 mb-5 flex-1" style={{ fontSize: 16, lineHeight: 1.6, color: BRAND.ink.muted }}>{body}</p>
          <LibraryLink href={href}>{label}</LibraryLink>
        </Card>
      ))}
    </div>
    <p className="mt-5" style={{ color: BRAND.ink.muted, fontSize: 16, lineHeight: 1.6 }}>Working with a creative partner? Share this library and a project brief covering the audience, primary message, proof points, CTA, specifications, and deadlines. Request editable production files from the brand team when the work requires them.</p>
  </section>
);

const PublicAssetDownloads = () => {
  const [withAudio, setWithAudio] = React.useState(false);
  const variant = withAudio ? "audio" : "silent";
  return (
    <>
      <section aria-labelledby="downloads-title">
        <SectionEyebrow number="43" label="Public downloads" />
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6">
          <div className="max-w-2xl">
            <h1 id="downloads-title" style={{ fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, color: BRAND.ink.body, letterSpacing: "-0.025em", lineHeight: 1.12 }}>Ready for your project</h1>
            <p className="mt-4" style={{ fontSize: 16, lineHeight: 1.6, color: BRAND.ink.muted }}>Download the finished logos, animations, and printable brand guide. The public pack contains these exports together with usage notes.</p>
          </div>
          <div className="flex flex-wrap gap-3 shrink-0">
            <LibraryLink href="downloads/bladestack-public-assets-v1.zip" primary download>Download public asset pack</LibraryLink>
            <LibraryLink href="design-system.html">Read the guide</LibraryLink>
          </div>
        </div>
        <p className="mt-4" style={{ fontSize: 14, lineHeight: 1.6, color: BRAND.ink.subtle }}>Release 1.1 · September 2026 · For use when referring to bladestack.io. Preserve the supplied artwork and its proportions. Contact the brand team for editable production sources or customer-specific material.</p>
      </section>

      <section aria-labelledby="logo-downloads-title">
        <SectionEyebrow number="44" label="Logo exports" />
        <h2 id="logo-downloads-title" style={{ fontSize: 28, fontWeight: 700, color: BRAND.ink.body }}>Choose the logo for your background</h2>
        <div className="grid md:grid-cols-3 gap-4 mt-5">
          {[
            {title:"Black-text logo",src:"assets/logo-black-text.png",background:BRAND.surface.card,description:"Transparent PNG · 1230 × 328 · light backgrounds"},
            {title:"White-text logo",src:"assets/logo-white-text.png",background:BRAND.dark.navy,description:"Transparent PNG · 1230 × 328 · dark backgrounds",svg:"assets/logo-white-text.svg"},
            {title:"Standalone symbol",src:"assets/logo-symbol.png",background:BRAND.dark.navy,description:"Transparent PNG · 288 × 328 · compact placements",symbol:true},
          ].map((a) => (
            <Card key={a.title} padding={0} style={{overflow:"hidden"}}>
              <div className="flex items-center justify-center p-7" style={{background:a.background,minHeight:180,borderBottom:`1px solid ${BRAND.surface.border}`}}>
                <img src={a.src} alt={`bladestack.io ${a.title.toLowerCase()}`} style={{width:a.symbol?88:"100%",maxWidth:340,height:"auto"}} />
              </div>
              <div className="p-5">
                <h3 style={{fontSize:19,fontWeight:700,color:BRAND.ink.body}}>{a.title}</h3>
                <p className="mt-2 mb-4" style={{fontSize:14,lineHeight:1.6,color:BRAND.ink.muted}}>{a.description}</p>
                <div className="flex flex-wrap gap-2"><LibraryLink href={a.src} download>Download PNG</LibraryLink>{a.svg && <LibraryLink href={a.svg} download>Download SVG</LibraryLink>}</div>
              </div>
            </Card>
          ))}
        </div>
      </section>

      <section aria-labelledby="motion-title">
        <SectionEyebrow number="45" label="Logo animation" />
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-5 mb-5">
          <div>
            <h2 id="motion-title" style={{fontSize:28,fontWeight:700,color:BRAND.ink.body}}>A bladestack.io introduction</h2>
            <p className="mt-2" style={{fontSize:16,lineHeight:1.6,color:BRAND.ink.muted}}>Blue and teal on navy. The animation finishes on the company logo.</p>
          </div>
          <div className="inline-flex gap-2" role="group" aria-label="Animation audio version">
            {[false,true].map((audio) => <button key={String(audio)} type="button" onClick={() => setWithAudio(audio)} aria-pressed={withAudio===audio} className="rounded-lg px-4 py-3" style={{fontSize:14,fontWeight:700,background:withAudio===audio?BRAND.primary[500]:BRAND.surface.card,color:withAudio===audio?"#FFFFFF":BRAND.primary[700],border:`1px solid ${BRAND.primary[500]}`}}>{audio?"With audio":"Silent"}</button>)}
          </div>
        </div>
        <div className="rounded-2xl overflow-hidden" style={{background:BRAND.dark.navy,border:`1px solid ${BRAND.surface.border}`}}>
          <video key={variant} controls playsInline preload="metadata" poster="assets/motion/bladestack-logo-poster.png" aria-label={`bladestack.io logo animation ${withAudio?"with audio":"without audio"}`} style={{display:"block",width:"100%",aspectRatio:"16 / 9"}}>
            <source src={`assets/motion/bladestack-logo-1080p60-${variant}.mp4`} type="video/mp4" />
            Your browser does not support this video. Use the download links below.
          </video>
        </div>
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
          <p style={{fontSize:14,color:BRAND.ink.muted,lineHeight:1.6}}>16:9 · 60 fps · MP4 · {withAudio?"Original sound design with a clean ending":"Silent for event loops and voiceover compositions"}</p>
          <div className="flex flex-wrap gap-2">
            <LibraryLink href={`assets/motion/bladestack-logo-4k60-${variant}.mp4`} download>Download 4K {withAudio?"with audio":"silent"}</LibraryLink>
            <LibraryLink href={`assets/motion/bladestack-logo-1080p60-${variant}.mp4`} download>Download 1080p {withAudio?"with audio":"silent"}</LibraryLink>
          </div>
        </div>
        <p className="mt-4" style={{fontSize:14,lineHeight:1.6,color:BRAND.ink.muted}}>Use 4K for large displays or editing, and 1080p for everyday playback. Choose silent when adding voiceover or a different soundtrack. Test the final composition on the event playback system.</p>
      </section>
    </>
  );
};

Object.assign(window, {PublicLibraryIntro, PublicAssetDownloads});