// Split homepage — simple editorial split, faded sage, glass chrome on top
function SplitHome({ go }) {
  const [hover, setHover] = React.useState(null); // "left" | "right" | null

  return (
    <div
      className="split"
      data-hover={hover || ""}>
      
      {/* COMPOSER side */}
      <div
        className="side side--composer"
        onMouseEnter={() => setHover("left")}
        onMouseLeave={() => setHover(null)}
        onClick={() => go("composer")}>
        
        <div className="side-header">
          <span className="mono-sm">I ⁄ Composer</span>
          <span className="mono-sm">LONDON</span>
        </div>

        <div>
          <div className="side-wordmark">Maciej<br />Romanowski.</div>
          <p className="side-tagline">Composer for film and games.</p>
        </div>

        <div className="side-footer">
          <div className="side-links">
            <span className="side-link" onClick={(e) => { e.stopPropagation(); go("composer", "biography"); }}>Biography</span>
            <span className="side-link side-link--accent" onClick={(e) => { e.stopPropagation(); go("composer", "listen"); }}>Listen</span>
          </div>
          <div className="side-enter">
            <span>Enter</span>
            <span className="arrow" aria-hidden="true"></span>
          </div>
        </div>
      </div>

      {/* STUDIO side */}
      <div
        className="side side--studio"
        onMouseEnter={() => setHover("right")}
        onMouseLeave={() => setHover(null)}
        onClick={() => go("studio")}>
        
        <div className="side-header">
          <span className="mono-sm">II ⁄ Studio</span>
          <span className="mono-sm">Engraving · Parts · Mockups</span>
        </div>

        <div>
          <div className="side-wordmark">Studio</div>
          <p className="side-tagline">
            Score preparation for composers, ensembles and publishers.
            Engraving, parts, transcription, mockups and print.
          </p>
        </div>

        <div className="side-footer">
          <div className="side-links">
            <span className="side-link" onClick={(e) => { e.stopPropagation(); go("studio"); }}>Services</span>
            <span className="side-link" onClick={(e) => { e.stopPropagation(); go("studio", "estimator"); }}>Estimator</span>
            <span
              className="side-link side-link--accent"
              onClick={(e) => {e.stopPropagation();go("submit");}}>
              Submit a score</span>
            <span className="side-link" onClick={(e) => { e.stopPropagation(); go("faq"); }}>FAQ</span>
          </div>
          <div className="side-enter">
            <span>Enter</span>
            <span className="arrow" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>);

}

window.SplitHome = SplitHome;