/* global React, Constellation, Eyebrow, Button, Badge */
function Hero() {
  return (
    <section id="top" className="hero sec-deep">
      <Constellation className="hero-canvas" />
      <div className="hero-glow" />
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="kicker-row reveal" data-reveal>
            <Badge tone="cyan">Data · AI · Infrastructure · Technology Consultancy</Badge>
            <Eyebrow color="#49EEF4">// What we do</Eyebrow>
          </div>
          <h1 className="h-display reveal" data-reveal style={{ marginTop: 22 }}>
            Senior technology leadership for businesses that <span className="aura-text">can't afford to get it wrong</span>.
          </h1>
          <p className="lead reveal" data-reveal style={{ marginTop: 22, maxWidth: 540 }}>
            All the technology leadership. None of the full-time overhead. From fractional
            CTO and managed IT to AI-powered platforms that wire your business end to end —
            Fracto makes the right answer always one query away.
          </p>
          <div className="hero-cta reveal" data-reveal>
            <Button variant="cyan" size="lg" icon="arrow" as="a" href="mailto:info@fractoservices.com?subject=Booking%20a%20working%20session">Book a working session</Button>
            <Button variant="outline" size="lg" as="a" href="#why">Why Fracto Services</Button>
          </div>
          <div className="hero-meta reveal" data-reveal>
            {['Senior-only delivery', 'NDA as standard', 'Response < 24 hours', 'No long-term lock-in'].map(t => (
              <span className="hero-trust" key={t}><Icon name="check" size={15} color="#49EEF4" />{t}</span>
            ))}
          </div>
        </div>
        <div className="hero-mark reveal" data-reveal>
          <img src="assets/fracto-mark.png" alt="Fracto constellation mark" />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;