// Hero.jsx — oversized display type, animated sparkle mark
function Hero({ headline, subline, layout }) {
  const headlineDefault = headline || "The admin eats your week. Let's fix that.";
  const subDefault = subline || "Ozworks is a small London- & Kent-based studio building bespoke AI, websites, and training for small businesses and sole traders. We sit with you, learn how you actually work, and hand back your evenings.";

  // Split headline by words for a char-rise animation
  const words = headlineDefault.split(' ');

  return (
    <section className="hero" id="top">
      <div className="hero__glow" />
      <div className="hero__grid" />
      <div className="orbit-hero"><OrbitBig /></div>

      <div className="container-xl">
        <div className="hero__eyebrow" data-hover>
          <span className="dot" />
          <span>AI · Web · Training — London & Kent</span>
        </div>

        <h1 className={`hero__headline hero__headline--${layout || 'left'}`}>
          {words.map((w, i) => {
            // Render the last sentence's "fix that" with gold strike for emphasis
            const isFix = w.toLowerCase().startsWith('fix');
            const isThat = w.toLowerCase().startsWith('that');
            return (
              <span key={i} className="word" style={{ marginRight: '0.22em' }}>
                {w.split('').map((c, j) => (
                  <span key={j} className="char" style={{ animationDelay: `${(i * 60) + (j * 18)}ms` }}>{c}</span>
                ))}
                {(isFix || isThat) && <span style={{display:'none'}} />}
              </span>
            );
          })}
        </h1>

        <div className="hero__bottom">
          <div>
            <p className="hero__sub reveal" data-delay="2">{subDefault}</p>
            <div className="hero__ctas reveal" data-delay="3">
              <Magnetic strength={0.25}>
                <a href="#contact" className="btn-primary cta" data-hover onClick={(e)=>{e.preventDefault(); const el=document.getElementById('contact'); if(el) window.scrollTo({top:el.offsetTop-60, behavior:'smooth'});}}>
                  Book a chat
                  <span className="arrow-wrap"><ArrowUpRight size={16} /></span>
                </a>
              </Magnetic>
              <a href="#services" className="btn-ghost-dark" data-hover onClick={(e)=>{e.preventDefault(); const el=document.getElementById('services'); if(el) window.scrollTo({top:el.offsetTop-60, behavior:'smooth'});}}>
                See what we do
              </a>
            </div>
          </div>
          <div className="hero__meta reveal" data-delay="4">
            <div>Currently building</div>
            <strong>03 projects</strong>
            <div style={{marginTop:'12px'}}>Taking on for Q3 2026</div>
            <strong>02 slots open</strong>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;