/* =============================================================
 * Champion Virtues page — The 6 Pack manifesto
 * ============================================================= */

const VIRTUES = [
  { n: "01", title: "Champion Men Use Their Strength for Good", desc: "How a man uses his strength determines what kind of man he is. A champion man uses his strength to love, to serve, to protect, and to provide. No one feels unsafe in his presence." },
  { n: "02", title: "Champion Men Nurture Their Fields", desc: "Every man has a field — his family, his community, his work, his faith. A champion man stays. He works. He plants even when he cannot see the harvest." },
  { n: "03", title: "Champion Men Define Themselves by Character", desc: "Character is not built in the spotlight — it is built in the quiet decisions that no one sees. Integrity. Honesty. Humility. Self-control." },
  { n: "04", title: "Champion Men Build a Band of Brothers", desc: "Isolation is the enemy of every man. A champion man surrounds himself with brothers who will challenge him, support him, and hold him accountable." },
  { n: "05", title: "Champion Men Mentor the Next Generation", desc: "A life lived only for yourself dies with you. But a life poured into others multiplies beyond anything you can imagine." },
  { n: "06", title: "Champion Men Make the World a Better Place", desc: "A champion man looks beyond his own fence. He gives more than he takes. He does not wait for someone else to fix what is broken. He is the someone else." },
];

function ChampionVirtuesPage() {
  const [shareOpen, setShareOpen] = useState(false);
  // Phase 3.7: editable site content
  const [cms, setCms] = useState({});
  useEffect(() => {
    if (window.cms && typeof window.cms.getSiteContent === "function") {
      window.cms.getSiteContent("virtues").then(setCms);
    }
  }, []);
  const hero = cms.hero || {};

  const shareCard = async () => {
    const url = window.location.origin + window.location.pathname + "#/champion-virtues";
    const text = "Champion Virtues — the 6-pack code for Fathers Arise men. Six commitments. One man.";
    if (navigator.share) {
      try {
        await navigator.share({ title: "Champion Virtues — Fathers Arise", text, url });
        return;
      } catch (e) { /* user cancelled or error — fall through to menu */ }
    }
    setShareOpen(true);
  };

  return (
    <div data-screen-label="06 Champion Virtues">
      <PageHero
        breadcrumb={[{ label: "Home", to: "home" }, { label: "Champion Virtues" }]}
        eyebrow="The 6 Pack"
        title={hero.headline || "The Champion Virtues"}
        lede={hero.subhead || "The moral code of every man in the Fathers Arise movement. These six virtues are the non-negotiable character traits that define a man of honour. They are not suggestions. They are commitments."}
        bgImage={hero.image || "uploads/FATHERS ARISE MEETING-66.jpg"}
      />

      <section className="py-20 bg-paper">
        <div className="max-w-[1100px] mx-auto px-4 sm:px-6 space-y-6">
          {VIRTUES.map((v) => (
            <article key={v.n} className="rounded-3xl bg-navy text-white p-8 md:p-12 relative overflow-hidden">
              <div className="absolute inset-0 grid-bg opacity-10" />
              <div className="relative grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
                <div className="md:col-span-3">
                  <div className="font-display font-black text-7xl md:text-8xl text-gold leading-none tabular-nums">{v.n}</div>
                </div>
                <div className="md:col-span-9">
                  <h3 className="font-display font-black text-2xl md:text-3xl leading-tight">{v.title}</h3>
                  <p className="mt-4 text-white/85 text-lg leading-relaxed">{v.desc}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <div className="rounded-3xl border-4 border-gold bg-navy text-white p-10 md:p-14 text-center relative overflow-hidden">
            <div className="absolute inset-0 grid-bg opacity-10" />
            <div className="relative">
              <div className="text-xs font-display font-bold uppercase tracking-[0.3em] text-gold">The Pledge</div>
              <h2 className="mt-4 font-display font-black text-3xl md:text-4xl leading-tight">Take the Champion Pledge</h2>
              <p className="mt-4 text-white/85 leading-relaxed">Download the Champion Virtues card or share it on social media.</p>
              <div className="mt-8 flex flex-wrap gap-3 justify-center">
                <a
                  href="uploads/champion-virtues-card.pdf"
                  download="Fathers-Arise-Champion-Virtues.pdf"
                  className="inline-flex items-center justify-center gap-2 font-display font-bold rounded-full uppercase tracking-wide btn-gold px-8 py-4 text-base"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0l-5-5m5 5l5-5M5 21h14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  Download the Card
                </a>
                <button
                  onClick={shareCard}
                  className="inline-flex items-center justify-center gap-2 font-display font-bold rounded-full uppercase tracking-wide bg-white/10 text-white border-2 border-white/30 hover:bg-white/20 px-8 py-4 text-base"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  Share Online
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Fallback share menu (shown if Web Share API isn't available) */}
      {shareOpen && (
        <div
          className="fixed inset-0 z-[200] bg-black/65 backdrop-blur-sm flex items-center justify-center p-4"
          onClick={() => setShareOpen(false)}
        >
          <div onClick={(e) => e.stopPropagation()} className="w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden">
            <div className="bg-navy text-white p-6 relative">
              <button onClick={() => setShareOpen(false)} aria-label="Close" className="absolute top-3 right-3 w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg>
              </button>
              <div className="text-xs font-display font-bold uppercase tracking-[0.25em] text-gold">Share</div>
              <h3 className="mt-2 font-display font-black text-xl">Champion Virtues</h3>
              <p className="mt-1 text-sm text-white/70">Share with a brother. Pass the Code on.</p>
            </div>
            <div className="p-4 space-y-2">
              {(() => {
                const url = encodeURIComponent(window.location.origin + window.location.pathname + "#/champion-virtues");
                const text = encodeURIComponent("Champion Virtues — six commitments, one Code. From Fathers Arise.");
                return [
                  { label: "WhatsApp", color: "#25D366", href: `https://wa.me/?text=${text}%20${url}` },
                  { label: "Facebook", color: "#1877F2", href: `https://www.facebook.com/sharer/sharer.php?u=${url}` },
                  { label: "X / Twitter", color: "#000000", href: `https://twitter.com/intent/tweet?text=${text}&url=${url}` },
                  { label: "LinkedIn", color: "#0A66C2", href: `https://www.linkedin.com/sharing/share-offsite/?url=${url}` }
                ].map((p) => (
                  <a
                    key={p.label}
                    href={p.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    onClick={() => setShareOpen(false)}
                    className="flex items-center gap-3 p-3 rounded-xl border border-navy/10 hover:bg-paper transition-colors"
                  >
                    <span className="w-9 h-9 rounded-full flex items-center justify-center text-white font-display font-bold text-sm" style={{ background: p.color }}>{p.label[0]}</span>
                    <span className="font-display font-bold text-navy">Share via {p.label}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="ml-auto text-ink/40"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </a>
                ));
              })()}
              <button
                onClick={() => {
                  const url = window.location.origin + window.location.pathname + "#/champion-virtues";
                  navigator.clipboard.writeText(url);
                  alert("Link copied to clipboard");
                  setShareOpen(false);
                }}
                className="w-full flex items-center gap-3 p-3 rounded-xl border border-navy/10 hover:bg-paper transition-colors"
              >
                <span className="w-9 h-9 rounded-full bg-navy text-gold flex items-center justify-center">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" strokeWidth="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" strokeWidth="2"/></svg>
                </span>
                <span className="font-display font-bold text-navy">Copy link</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.ChampionVirtuesPage = ChampionVirtuesPage;