/* global React */

const Hero = ({ headline, subline, eyebrow }) => {
  // headline supports a {em} marker like "Where culture meets {craft}"
  const renderHeadline = () => {
    const parts = headline.split(/(\{[^}]+\})/g);
    return parts.map((p, i) => {
      const m = p.match(/^\{(.+)\}$/);
      if (m) return <em key={i}>{m[1]}</em>;
      // preserve <br/> as line break marker
      return p.split('|').reduce((acc, seg, idx, arr) => {
        acc.push(<React.Fragment key={`${i}-${idx}`}>{seg}</React.Fragment>);
        if (idx < arr.length - 1) acc.push(<br key={`br-${i}-${idx}`} />);
        return acc;
      }, []);
    });
  };

  return (
    <section className="hero">
      <img className="hero-img" src="assets/hero-theater.jpg" alt="" />
      <div className="vignette" />
      <nav className="nav">
        <div className="nav-wordmark">Clay Entertainment</div>
      </nav>
      <div className="hero-content">
        <div className="hero-eyebrow">{eyebrow}</div>
        <h1 className="headline">{renderHeadline()}</h1>
        <div className="rule-thread"></div>
        <p className="subline" dangerouslySetInnerHTML={{
          __html: subline.replace(/\n/g, '<br/>')
        }} />
      </div>
      <div className="scroll-cue">
        <span className="stem"></span>
      </div>
      <div className="bottom-bar"></div>
    </section>);

};

const Companies = () => {
  const row3 = [
  { href: "https://jwbf.org", logo: "assets/logo-jwbf.png", tag: "Foundation" },
  { href: "https://www.joywomack.com/jwbc", logo: "assets/logo-jwbc.png", tag: "Ballet Company" },
  { href: "#", logo: "assets/logo-placeholder.png", tag: "In Development" }];

  const row2 = [
  { href: "https://cedigital.co", logo: "assets/logo-cedigital.png", tag: "Performance Media" },
  { href: "https://adsignl.io", logo: "assets/logo-adsignl.png", tag: "Adtech" }];


  return (
    <section className="companies" id="house">
      <div className="section-label">The House</div>
      <h2 className="section-title">
        A small <em>house</em> of disciplined work.
      </h2>
      <p className="section-blurb">Clay Entertainment is a private holding company. We operate companies in performance media and produce cultural work under our own imprint.



      </p>

      <div className="row row-3">
        {row3.map((e, i) =>
        <a className="entity-card" href={e.href} target="_blank" rel="noreferrer" key={i}>
            <img className="entity-logo" src={e.logo} alt="" />
            <span className="entity-tag">{e.tag}</span>
          </a>
        )}
      </div>
      <div className="row row-2">
        {row2.map((e, i) =>
        <a className="entity-card" href={e.href} target="_blank" rel="noreferrer" key={i}>
            <img className="entity-logo" src={e.logo} alt="" />
            <span className="entity-tag">{e.tag}</span>
          </a>
        )}
      </div>
    </section>);

};

const Statement = ({ quote }) =>
<section className="statement">
    <div className="statement-inner">
      <p className="statement-quote">{quote}</p>
      <div className="statement-attribution">Clay Entertainment, LLC</div>
    </div>
  </section>;


const Footer = () =>
<footer className="footer">
    <span className="footer-mark">Clay Entertainment</span>
    <div className="footer-links">
      <a href="#house">The House</a>
      <a href="mailto:office@clayentertainment.com">Inquiries</a>
      <a href="mailto:press@clayentertainment.com">Press</a>
    </div>
    <span className="footer-copy">© MMXXVI · Nashville · Paris</span>
  </footer>;


window.Hero = Hero;
window.Companies = Companies;
window.Statement = Statement;
window.Footer = Footer;