/* global Split */
const motion = window.motion;

function Split({ onHover }) {
  const [hovered, setHovered] = React.useState(null);

  React.useEffect(() => { onHover && onHover(hovered); }, [hovered]);

  return (
    <section
      id="split-identity"
      className={`split ${hovered === 'films' ? 'hover-films' : ''} ${hovered === 'solutions' ? 'hover-solutions' : ''}`}
      data-screen-label="Split Identity"
    >
      <motion.div
        className="split-half films"
        data-comment-anchor="split-films"
        onMouseEnter={() => setHovered('films')}
        onMouseLeave={() => setHovered(null)}
        initial={{ opacity: 0, x: -20 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.7, ease: [0.2, 0.7, 0.1, 1] }}
      >
        <div className="bg-tint"></div>
        <div className="corner-num">
          <span className="dot"></span>
          <span>01 — OFA / FILMS</span>
        </div>
        <div className="lockup">
          <img src="assets/logo-films.png" alt="OFA Films" />
          <h2>We tell the stories <em>that move people.</em></h2>
          <p className="pitch">Brand films, commercials, documentaries. Cinematic storytelling that earns attention and turns viewers into believers.</p>
          <div className="meta-row">
            <span><strong>Direction</strong></span>
            <span><strong>Cinematography</strong></span>
            <span><strong>Edit</strong></span>
            <span><strong>Motion</strong></span>
          </div>
        </div>
        <a className="enter-cta" href="films.html">
          Enter the studio <span className="arr"></span>
        </a>
      </motion.div>

      <div className="split-divider"></div>

      <motion.div
        className="split-half solutions"
        data-comment-anchor="split-solutions"
        onMouseEnter={() => setHovered('solutions')}
        onMouseLeave={() => setHovered(null)}
        initial={{ opacity: 0, x: 20 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.7, ease: [0.2, 0.7, 0.1, 1] }}
      >
        <div className="bg-tint"></div>
        <div className="corner-num">
          <span>02 — OFA / SOLUTIONS</span>
          <span className="dot"></span>
        </div>
        <div className="lockup">
          <img src="assets/logo-solutions.png" alt="OFA Solutions" />
          <h2>We build engines <em>that never sleep.</em></h2>
          <p className="pitch">Brand systems, marketing automation, content engines, internal tools. The infrastructure that makes the story scale.</p>
          <div className="meta-row">
            <span><strong>Systems</strong></span>
            <span><strong>Automation</strong></span>
            <span><strong>Integrations</strong></span>
            <span><strong>Ops</strong></span>
          </div>
        </div>
        <a className="enter-cta" href="solutions.html">
          Enter the lab <span className="arr"></span>
        </a>
      </motion.div>
    </section>
  );
}
window.Split = Split;