/* Keen Flows website, hero. Static layout; animations are decorative layers. */

/* Headline pairs. White line + orange line fade in/out together as one unit,
   cycle in order, then repeat. */
const KF_HERO_PAIRS = [
  ['Move faster.', 'Do more with less.'],
  ['Work smarter.', 'Ship in days, not months.'],
  ['Grow faster.', 'Without growing your team.'],
  ['Less effort.', 'More output, every day.'],
];

/* Total time one pair is on screen: fade-in + ~10s hold + fade-out + ~0.75s
   hidden pause before the next pair fades in. */
const KF_HERO_CYCLE = 12270;   // ms per pair
const KF_HERO_STAGGER = 90;    // tiny offset so bottom line trails the top one

/* Stateless: renders one pair. Both lines fade via the kf-hero-line @keyframes;
   the orange line trails the white one by --kf-delay. The whole unit (this plus
   the orbit) is remounted each cycle by keying its HandWrittenTitle wrapper, so
   the text size is set BEFORE the animation begins and the orbit can fit it. */
function KFHeroHeadline({ white, orange }) {
  return (
    <span className="kf-hero-rotator">
      <span
        className="kf-hero-rotator__line"
        style={{ '--kf-cycle': KF_HERO_CYCLE + 'ms', '--kf-delay': '0ms' }}
      >
        {white}
      </span>
      <span
        className="kf-gradient-text kf-hero-rotator__line"
        style={{ '--kf-cycle': KF_HERO_CYCLE + 'ms', '--kf-delay': KF_HERO_STAGGER + 'ms' }}
      >
        {orange}
      </span>
    </span>
  );
}

/* Closed elliptical orbit drawn behind the headline. Forms a COMPLETE ring (no
   hand-drawn tails/gap). After layout it measures its own box and draws a real
   <ellipse> in a 1:1 pixel coordinate space (viewBox = box size, uniform scale),
   then sets --orbit-len to the true perimeter via getTotalLength(). Because the
   dash equals the actual perimeter in the SAME coordinate space the stroke is
   rendered in, the ring ALWAYS closes — no seam — no matter how wide the text
   stretches it. Capped to the viewport so the whole ellipse stays visible, and it
   sits UNDER all hero text. Remounted per cycle (keyed) so it re-measures the
   freshly-sized text and its draw stays in sync with the words. */
function KFHeroOrbit({ children }) {
  const svgRef = React.useRef(null);
  const ellRef = React.useRef(null);

  React.useLayoutEffect(() => {
    const svg = svgRef.current;
    const ell = ellRef.current;
    if (!svg || !ell) return;
    const measure = () => {
      const w = svg.clientWidth;
      const h = svg.clientHeight;
      if (!w || !h) return;
      const sw = 2.5;                 // stroke width; inset so the ring isn't clipped
      // No viewBox: 1 user unit = 1px, so scaling is impossible and the stroke +
      // dash live in the same space the ellipse is drawn in -> the ring always closes.
      ell.setAttribute('cx', w / 2);
      ell.setAttribute('cy', h / 2);
      ell.setAttribute('rx', Math.max(1, w / 2 - sw));
      ell.setAttribute('ry', Math.max(1, h / 2 - sw));
      const len = ell.getTotalLength();
      ell.style.setProperty('--orbit-len', len);
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(svg);
    // Re-measure once webfonts settle (they change the text width, hence box size).
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure);
    return () => ro.disconnect();
  }, []);

  return (
    <div className="kf-orbit">
      <svg ref={svgRef} className="kf-orbit__svg" aria-hidden="true">
        <ellipse ref={ellRef} className="kf-orbit__path" cx="50" cy="50" rx="48" ry="48" />
      </svg>
      <div className="kf-orbit__content">{children}</div>
    </div>
  );
}

function KFHero({ onContact }) {
  const { Button } = window.KeenFlowsDesignSystem_019e96;

  // Cycle lives here so the orbit + text remount together, perfectly in sync.
  const [index, setIndex] = React.useState(0);
  React.useEffect(() => {
    const id = setTimeout(
      () => setIndex((i) => (i + 1) % KF_HERO_PAIRS.length),
      KF_HERO_CYCLE
    );
    return () => clearTimeout(id);
  }, [index]);
  const [white, orange] = KF_HERO_PAIRS[index];

  return (
    <section className="kfsite-hero" id="top">
      <div className="kfsite-hero__glow" aria-hidden="true"></div>

      <div className="kf-container kfsite-hero__inner">
        <KFHeroOrbit key={index}>
          <h1 className="kfsite-hero__title">
            <KFHeroHeadline white={white} orange={orange} />
          </h1>
        </KFHeroOrbit>

        <p className="kfsite-hero__sub">
          We design, build, and deploy custom AI-powered workflows that run the
          parts of your business you shouldn't have to. Live in weeks, not quarters.
        </p>

        <p className="kfsite-hero__aside">
          We also work directly with clients of a few trusted partner businesses.
        </p>

        <div className="kfsite-hero__cta">
          <Button variant="primary" size="lg" onClick={onContact}>
            Get in touch&nbsp;&nbsp;<span aria-hidden="true">&rarr;</span>
          </Button>
          <Button variant="secondary" size="lg" as="a" href="#how">See how it works</Button>
        </div>

        <div className="kfsite-hero__trust">
          <span className="kfsite-hero__trust-label">Trusted by operators at</span>
          <div className="kfsite-hero__logos">
            {['Northwind', 'Lumen', 'Cedar', 'Aperture', 'Halcyon'].map((n) => (
              <span key={n} className="kfsite-hero__logo">{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.KFHero = KFHero;