// Canda Landing — sub-components
const { useState, useEffect, useRef } = React;

// Lucide refresh on mount
function useLucide() {
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();});
}

// Reveal-on-scroll
function Reveal({ children, delay = 0, as: As = "div", className = "", style }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setSeen(true);io.disconnect();}});
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${seen ? "in" : ""} ${className}`} style={{ transitionDelay: delay + "ms", ...style }}>
      {children}
    </As>);

}

// Animated counter
function Counter({ to, suffix = "", duration = 1400 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;if (!el) return;
    let raf;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(to * eased));
          if (p < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.5 });
    io.observe(el);
    return () => {io.disconnect();cancelAnimationFrame(raf);};
  }, [to, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

// Nav
function Nav({ onContact }) {
  useLucide();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <img src={window.__resources.wordmarkBlue} alt="Canda" className="nav-wordmark" />
        </a>
        <div className="nav-links">
          <a href="#pintone">Pintone.ai</a>
          <a href="#why">Why Canda</a>
          <a href="#impact">Impact</a>
        </div>
        <button className="nav-cta" onClick={onContact}>
          Get in touch
          <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
    </nav>);

}

// Hero
function Hero({ variant, headline, onContact }) {
  useLucide();
  // Split headline at " " for "accent" word — last 1-2 words italicized
  const renderHeadline = () => {
    const words = headline.trim().split(" ");
    if (words.length < 3) return headline;
    const accent = words.slice(-2).join(" ");
    const rest = words.slice(0, -2).join(" ");
    return (
      <>
        {rest} <span className="accent">{accent}</span>
      </>);

  };
  return (
    <section className="hero" data-variant={variant}>
      <img src={window.__resources.archBlue} alt="" className="hero-bg-arch" aria-hidden="true" />
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <Reveal>
              <div className="hero-eyebrow">Digital products for the development sector</div>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="hero-title">{renderHeadline()}</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero-sub">From migration communications to humanitarian response, the organisations doing the hardest work deserve tools that match the complexity of what they do. That's what we build.
              </p>
            </Reveal>
            <Reveal delay={240}>
              <div className="hero-actions">
                <button className="btn-primary" onClick={onContact}>
                  Request a demo
                  <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
                <a href="#pintone" className="btn-ghost">
                  Explore Pintone.ai
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
              </div>
            </Reveal>
          </div>
          <div className="hero-cluster" aria-hidden="true">
            <Reveal delay={120} className="hero-card hc-stat float-1">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--c-blue-100)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path d="M3 12L7 8L10 11L15 6" stroke="var(--c-blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M11 6H15V10" stroke="var(--c-blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
                <span style={{ fontSize: 11, color: "var(--c-gray-500)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em" }}>Pilot</span>
              </div>
              <div className="stat-value" style={{ fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em", color: "var(--c-blue)", lineHeight: 1, marginBottom: 6 }}>
                <Counter to={92} suffix="%" />
              </div>
              <div className="stat-label" style={{ fontSize: 13, color: "var(--c-gray-600)", lineHeight: 1.4 }}>Faster turnaround on content creation, publication and insights

              </div>
              <div style={{ display: "flex", gap: 4, marginTop: 16 }}>
                <span style={{ height: 3, flex: 1, background: "var(--c-teal)", borderRadius: 2 }} />
                <span style={{ height: 3, width: 24, background: "var(--c-gray-200)", borderRadius: 2 }} />
                <span style={{ height: 3, width: 24, background: "var(--c-gray-200)", borderRadius: 2 }} />
              </div>
            </Reveal>
            <Reveal delay={220} className="hero-card hc-pintone float-2">
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <img src={window.__resources.pintoneMarkWhite} alt="" style={{ width: 32, height: 32, objectFit: "contain" }} />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: "var(--c-white)", lineHeight: 1.1, letterSpacing: "-0.01em" }}>pintone</div>
                  <div style={{ fontSize: 11, color: "var(--c-teal)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 3 }}>Flagship product</div>
                </div>
              </div>
              <div style={{ fontSize: 13.5, color: "rgba(255,255,255,0.82)", lineHeight: 1.5, marginBottom: 14 }}>
                Sector-aware AI for tone safety, smuggler detection, misinformation flagging and dialect localisation.
              </div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {["Tone safety", "Localisation", "Donor-ready"].map((t) =>
                <span key={t} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, background: "rgba(255,255,255,0.12)", color: "var(--c-white)", fontWeight: 500 }}>{t}</span>
                )}
              </div>
            </Reveal>
            <Reveal delay={320} className="hero-card hc-trust float-3">
              <div className="trust-label" style={{ fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--c-gray-500)", marginBottom: 10 }}>Built for</div>
              <div className="trust-name" style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--c-blue)", lineHeight: 1.25 }}>Ministries, consultancies and NGOs</div>
              <div style={{ fontSize: 12, color: "var(--c-gray-500)", marginTop: 6 }}>With dedicated support and social media expertise</div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

// Partners marquee — using government-style placeholder names
function Partners() {
  return (
    <div className="container">
      <div className="partners">
        <div className="partners-label">Trusted by partners across the sector</div>
        <div className="partners-grid">
          <div className="partner-name">Ministry of Migration</div>
          <div className="partner-name">UN Field Office</div>
          <div className="partner-name">Open Society</div>
          <div className="partner-name">DG-INTPA</div>
          <div className="partner-name">Save the Children</div>
          <div className="partner-name">Mercy Corps</div>
        </div>
      </div>
    </div>);

}

window.LandingNav = Nav;
window.LandingHero = Hero;
window.LandingPartners = Partners;
window.Reveal = Reveal;
window.Counter = Counter;
window.useLucide = useLucide;