// Home page — three hero variants + reel + funnels + achievements + final CTA
function HeroA({ c, showStatus, cinema }) {
  const titleRef = React.useRef(null);
  const subRef = React.useRef(null);
  useSplitReveal(titleRef, [cinema.splitReveal, c.tagline_b_c], { delay: 0.3 });
  useSplitReveal(subRef, [cinema.splitReveal, c.sub], { delay: 0.9, duration: 0.8, stagger: 0.04 });

  return (
    <section className="hero hero-a fadein">
      <div className="hero-a__copy">
        <h1 className="h-display hero-a__title" ref={titleRef} style={cinema.splitReveal ? { opacity: 0 } : undefined}>
          {c.tagline_b_a}<br />
          {c.tagline_b_b}<br />
          {cinema.scramble ?
          <em><ScrambleWord text={c.tagline_b_c} enabled={cinema.scramble} delay={1.5} /></em> :
          <em>{c.tagline_b_c}</em>}
        </h1>
        <p className="hero-a__sub" ref={subRef} style={cinema.splitReveal ? { opacity: 0 } : undefined}>{c.sub}</p>
        <div className="cta-row">
          <Btn kind="primary" href="/workshops">{c.cta_primary}</Btn>
          <Btn kind="ghost" href="https://sapio.ro">{c.cta_secondary}</Btn>
        </div>
      </div>
      <Photo
        src="assets/vlad-portrait.webp"
        alt="Vlad Tudor"
        className={"hero-a__photo " + (cinema.kenburns ? "kenburns" : "")}
        position="50% 30%" />
      
    </section>);

}

function HeroB({ c, showStatus }) {
  return (
    <section className="hero hero-b fadein">
      <div className="hero-b__top">
        <Eyebrow>{c.eyebrow}</Eyebrow>
        {showStatus && <Status text={c.eyebrow.includes("București") ? "// Deschis pentru workshops & advisory" : "// Currently open to workshops & advisory"} />}
      </div>
      <h1 className="h-display hero-b__title">
        <span>{c.tagline_b_a}</span>
        <span>{c.tagline_b_b}</span>
        <span className="accent">{c.tagline_b_c}</span>
      </h1>
      <div className="hero-b__bottom">
        <div>
          <h4>{c.eyebrow.includes("București") ? "Cine" : "Who"}</h4>
          <p>{c.sub}</p>
        </div>
        <div>
          <h4>{c.eyebrow.includes("București") ? "Pentru" : "For"}</h4>
          <p>{c.eyebrow.includes("București") ? "Companii care vor să construiască AI propriu. Conferințe care vor un speaker care chiar a construit. Organizații civice care au nevoie de un partener tehnic." : "Companies building their own AI. Conferences that want a speaker who has actually shipped. Civic organisations who need a technical partner."}</p>
        </div>
        <div>
          <h4>{c.eyebrow.includes("București") ? "Acțiune" : "Action"}</h4>
          <div className="cta-row" style={{ marginTop: 4 }}>
            <Btn kind="primary" href="/workshops">{c.cta_primary}</Btn>
          </div>
          <div style={{ marginTop: 12 }}>
            <a href="https://sapio.ro" target="_blank" rel="noopener" style={{ color: "var(--text-dim)", textDecoration: "underline", textUnderlineOffset: 4 }}>
              {c.cta_secondary} →
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function HeroC({ c, showStatus }) {
  return (
    <section className="hero-c fadein">
      <Photo src="assets/vlad-portrait.webp" alt="Vlad Tudor" className="hero-c__photo" position="50% 30%" />
      <div className="hero-c__copy">
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, marginBottom: 32 }}>
            <Eyebrow>{c.eyebrow}</Eyebrow>
            {showStatus && <Status text={c.eyebrow.includes("București") ? "// Deschis" : "// Open"} />}
          </div>
          <h1 className="h-display hero-c__title">
            {c.tagline_b_a} {c.tagline_b_b} <em>{c.tagline_b_c}</em>
          </h1>
          <p className="hero-c__lead" style={{ marginTop: 24 }}>{c.sub}</p>
        </div>
        <div>
          <ul className="hero-c__list">
            <li><span>Founder</span><span>Sapio AI · ai-aflat.ro</span></li>
            <li><span>Based</span><span>{c.eyebrow.includes("București") ? "București" : "Bucharest"}, RO</span></li>
            <li><span>Forbes</span><span>30 Under 30 · 2025</span></li>
            <li><span>TEDx</span><span>The Story of AI</span></li>
          </ul>
          <div className="cta-row" style={{ marginTop: 32 }}>
            <Btn kind="primary" href="/workshops">{c.cta_primary}</Btn>
            <Btn kind="ghost" href="https://sapio.ro">{c.cta_secondary}</Btn>
          </div>
        </div>
      </div>
    </section>);

}

const REEL_CLIPS = [
{ src: "assets/Video Hero .mp4", kind: "TEDx · The Story of AI", note: "Talk: from cybernetics to LLMs." },
{ src: "assets/Video Hero  (1).mp4", kind: "ProTV · iLikeIT", note: "Live demo of ai-aflat.ro." },
{ src: "assets/Video Hero  (2).mp4", kind: "The Business Room", note: "On entrepreneurship & applied AI." },
{ src: "assets/Video Hero  (3).mp4", kind: "RFI Romania", note: "Public radio: civic tech & AI." },
{ src: "assets/Video Hero  (5).mp4", kind: "Panel", note: "Industry conversation." }];


function VideoReel() {
  // Random shuffled order each mount
  const order = React.useMemo(() => {
    const a = REEL_CLIPS.map((_, i) => i);
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }, []);
  const [pos, setPos] = React.useState(0);
  const idx = order[pos];
  const refs = React.useRef([]);

  // Advance every 4s — clips are capped at 4s playback
  React.useEffect(() => {
    refs.current.forEach((v, i) => {
      if (!v) return;
      if (i === idx) {
        try {v.currentTime = 0;} catch (e) {}
        const p = v.play();
        if (p && p.catch) p.catch(() => {});
      } else {
        v.pause();
      }
    });
    const t = setTimeout(() => {
      setPos((p) => (p + 1) % order.length);
    }, 4000);
    return () => clearTimeout(t);
  }, [idx, order.length]);

  return (
    <section className="reel" aria-label="Video reel">
      {REEL_CLIPS.map((clip, i) =>
      <video
        key={i}
        ref={(el) => { refs.current[i] = el; if (el) el.muted = true; }}
        src={clip.src}
        muted
        playsInline
        preload={i === order[0] ? "auto" : "metadata"}
        autoPlay={i === order[0]}
        className={i === idx ? "is-active" : ""} />

      )}
    </section>);

}

function FunnelCard({ f }) {
  const cardRef = React.useRef(null);
  const iconRef = React.useRef(null);

  const handleMove = (e) => {
    const card = cardRef.current;
    const icon = iconRef.current;
    if (!card || !icon) return;
    const rect = card.getBoundingClientRect();
    const cx = (e.clientX - rect.left) / rect.width - 0.5;
    const cy = (e.clientY - rect.top) / rect.height - 0.5;
    const x = cx * 6;
    const y = cy * 6;
    icon.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  };
  const handleLeave = () => {
    if (iconRef.current) iconRef.current.style.transform = "translate3d(0,0,0)";
  };

  const icons = {
    sapio:     { dark: "assets/sapio-logo-icon-dark.webp",  light: "assets/sapio-logo-icon-light.webp" },
    workshops: { dark: "assets/workshops-icon-light.webp",  light: "assets/workshops-icon-light.webp" },
    podcast:   { dark: "assets/podcast-icon-light.webp",    light: "assets/podcast-icon-light.webp" },
  };
  const icon = icons[f.icon];
  const recolor = f.icon === "workshops" || f.icon === "podcast";
  const isExternal = typeof f.href === "string" && /^https?:\/\//.test(f.href);

  return (
    <a
      ref={cardRef}
      href={f.href}
      target={isExternal ? "_blank" : undefined}
      rel={isExternal ? "noopener" : undefined}
      className="funnel"
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}>
      <div className="funnel__icon-wrap">
        <div className="funnel__icon" ref={iconRef}>
          {icon ? (
            <React.Fragment>
              <img src={icon.dark} alt="" className={"funnel__icon-img funnel__icon-img--dark" + (recolor ? " funnel__icon-img--invert" : "")} />
              <img src={icon.light} alt="" className="funnel__icon-img funnel__icon-img--light" />
            </React.Fragment>
          ) : (
            <span className="funnel__icon-placeholder" aria-hidden="true">Icon</span>
          )}
        </div>
      </div>
      <div className="funnel__content">
        <span className="funnel__kind">{f.kind}</span>
        <h3 className="funnel__title">{f.title}</h3>
        <p className="funnel__copy">{f.body}</p>
        <p className="funnel__hover">{f.hover}</p>
        <span className="funnel__cta">
          {f.cta} <span className="funnel__cta-arrow">→</span>
        </span>
      </div>
    </a>);

}

function FunnelsSection({ c }) {
  return (
    <section className="section" id="what-i-do">
      <div className="page">
        <div className="head-editorial">
          <h2 className="head-editorial__title">{c.funnels_title}</h2>
          <p className="head-editorial__lead" data-comment-anchor="ceea9dc902-p-166-11">{c.funnels_lead}</p>
        </div>
        <div className="funnels">
          {c.funnels.map((f, i) => <FunnelCard key={i} f={f} />)}
        </div>
      </div>
    </section>);

}

function AchievementsSection({ c }) {
  return (
    <section className="section hl-section">
      <div className="page">
        <div className="head-editorial head-editorial--solo">
          <h2 className="head-editorial__title">
            {c.achv_title.replace(/\.$/, "").split(" ").slice(0, -1).join(" ")}{" "}
            <em>{c.achv_title.replace(/\.$/, "").split(" ").slice(-1)[0]}</em>.
          </h2>
        </div>
        <div className="hl-list">
          {c.achv.map((a, i) => {
            const isExternal = a.href && a.href.startsWith("http");
            const Tag = a.href ? "a" : "article";
            const linkProps = a.href ? {
              href: a.href,
              target: isExternal ? "_blank" : undefined,
              rel: isExternal ? "noopener" : undefined,
            } : {};
            return (
              <Tag
                key={i}
                className={"hl-row" + (i % 2 === 1 ? " is-reverse" : "") + (a.href ? " hl-row--link" : "")}
                {...linkProps}>
                <div className="hl-row__img">
                  <img src={a.img} alt={a.alt || a.h || ""} loading="lazy" />
                </div>
                <div className="hl-row__txt">
                  <h3 className="hl-row__h">{a.h}</h3>
                  {a.body && <p className="hl-row__body">{a.body}</p>}
                  {a.href && (
                    <span className="hl-row__cta">
                      {isExternal ? "Visit" : "See more"} <span className="hl-row__cta-arrow">{isExternal ? "↗" : "→"}</span>
                    </span>
                  )}
                </div>
              </Tag>
            );
          })}
        </div>
      </div>
    </section>);

}

function CtaIcon({ name }) {
  // small 18px line icons, mono color via currentColor
  const common = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "build":
      return (
        <svg {...common}><path d="M3 9l9-5 9 5-9 5-9-5z" /><path d="M3 15l9 5 9-5" /><path d="M3 12l9 5 9-5" /></svg>);

    case "teach":
      return (
        <svg {...common}><circle cx="12" cy="7" r="3" /><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" /></svg>);

    case "code":
      return (
        <svg {...common}><polyline points="8 7 3 12 8 17" /><polyline points="16 7 21 12 16 17" /><line x1="14" y1="5" x2="10" y2="19" /></svg>);

    case "signal":
      return (
        <svg {...common}><path d="M4 12a8 8 0 0 1 16 0" /><path d="M7 12a5 5 0 0 1 10 0" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></svg>);

    case "spark":
      return (
        <svg {...common}><path d="M12 2v6" /><path d="M12 16v6" /><path d="M2 12h6" /><path d="M16 12h6" /><path d="M5 5l4 4" /><path d="M15 15l4 4" /><path d="M19 5l-4 4" /><path d="M9 15l-4 4" /></svg>);

    case "team":
      return (
        <svg {...common}><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.2" /><path d="M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1" /><path d="M15 20v-0.5a3.5 3.5 0 0 1 3.5-3.5h.5a2.5 2.5 0 0 1 2.5 2.5V20" /></svg>);

    default:
      return null;
  }
}

function FinalCta({ c }) {
  // Accent-color the last word of the title (mirrors AchievementsSection).
  const titleClean = c.cta_final_title.replace(/\.$/, "");
  const words = titleClean.split(" ");
  const head = words.slice(0, -1).join(" ");
  const tail = words[words.length - 1];

  return (
    <section className="section cta-final-section">
      <div className="page">
        <div className="cta-final">
          <div className="cta-final__intro">
            <h2 className="cta-final__title">
              {head && <React.Fragment>{head}{" "}</React.Fragment>}<em>{tail}</em>.
            </h2>
            {c.cta_final_lead_a && <p className="cta-final__lead">{c.cta_final_lead_a}</p>}
            {c.cta_final_lead_b && <p className="cta-final__lead cta-final__lead--soft">{c.cta_final_lead_b}</p>}
            <div className="cta-row" style={{ marginTop: 28 }}>
              <Btn kind="primary" href={c.cta_final_href}>{c.cta_final_button}</Btn>
            </div>
          </div>
          <ul className="cta-flip-list">
            {c.cta_points.map((p, i) =>
            <li key={i} className="cta-flip">
                <div className="cta-flip__inner">
                  <div className="cta-flip__face cta-flip__face--front">
                    <span className="cta-flip__quote" aria-hidden="true">“</span>
                    <span className="cta-flip__q">{p.q}</span>
                    <span className="cta-flip__topic" aria-hidden="true"><CtaIcon name={p.icon} /></span>
                  </div>
                  <a
                    className="cta-flip__face cta-flip__face--back"
                    href={p.href}
                    target={p.href.startsWith("http") ? "_blank" : undefined}
                    rel={p.href.startsWith("http") ? "noopener" : undefined}>

                    <span className="cta-flip__a">{p.a} <span className="cta-flip__cta">{p.cta} →</span></span>
                    <span className="cta-flip__arrow" aria-hidden="true">→</span>
                  </a>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

function HomePage({ copy, lang, tweaks }) {
  const c = copy.home;
  const showStatus = tweaks.statusPill;
  const cinema = {
    splitReveal: !!tweaks.splitReveal,
    kenburns: !!tweaks.kenburns,
    scramble: !!tweaks.scramble
  };
  useMagnetic(".hero .btn, .cta-final-section .btn", !!tweaks.magnetic, 0.28);

  return (
    <div>
      <div className="page">
        <HeroA c={c} showStatus={showStatus} cinema={cinema} />
      </div>

      <VideoReel />

      <FunnelsSection c={c} />

      <AchievementsSection c={c} />

      <FinalCta c={c} />
    </div>);

}

Object.assign(window, { HomePage });