const HeroRotator = () => {
  const words = ['time', 'wealth', 'scale', 'freedom'];
  const [i, setI] = React.useState(0);
  // Ref tracks the latest index so the timer restart reads fresh state when
  // the user clicks to advance manually.
  const idxRef = React.useRef(0);
  const timerRef = React.useRef(0);
  idxRef.current = i;

  const startTimer = React.useCallback(() => {
    window.clearInterval(timerRef.current);
    timerRef.current = window.setInterval(() => {
      idxRef.current = (idxRef.current + 1) % words.length;
      setI(idxRef.current);
    }, 3680);
  }, []);

  React.useEffect(() => {
    startTimer();
    return () => window.clearInterval(timerRef.current);
  }, [startTimer]);

  const advance = () => {
    const next = (idxRef.current + 1) % words.length;
    idxRef.current = next;
    setI(next);
    startTimer(); // restart the 4.6s window from the click.
  };

  return (
    <span
      onClick={advance}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); advance(); } }}
      style={{
      display: 'inline-grid',
      position: 'relative',
      verticalAlign: 'baseline',
      cursor: 'pointer',
      userSelect: 'none',
      // Italic serif letterforms (f, l, t, w) have tails that swing into the
      // left bearing. Pad left+right + negative margin so the first letter
      // doesn't clip against the preceding word.
      paddingLeft: '0.34em',
      paddingRight: '0.08em',
      marginLeft: '-0.26em',
      paddingBottom: '0.18em',
      marginBottom: '-0.18em',
      overflow: 'visible',
    }}>
      {words.map((w, idx) => (
        <span key={w} style={{
          gridArea: '1 / 1',
          fontFamily: "'Instrument Serif', serif",
          fontStyle: 'italic',
          fontWeight: 400,
          lineHeight: 1,
          background: 'linear-gradient(180deg, #FFE3CC 0%, #FF8533 100%)',
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent',
          opacity: i === idx ? 1 : 0,
          transform: i === idx ? 'translateY(0)' : 'translateY(14px)',
          filter: i === idx ? 'blur(0)' : 'blur(6px)',
          transition: 'all 600ms cubic-bezier(0.22, 1, 0.36, 1)',
          whiteSpace: 'nowrap',
          paddingBottom: '0.14em',
        }}>{w}.</span>
      ))}
    </span>
  );
};

const Hero = ({ onContact }) => {
  const learnMoreRef = React.useRef(null);
  // Mobile can't trigger :hover, so nudge the Learn more aura on by
  // itself ~7s after the hero load sequence finishes (500ms delay +
  // 1500ms reveal = 2000ms; add 7000ms = fire at 9s from mount). The
  // class simulates hover for a single pulse cycle via .is-auto-pulse.
  React.useEffect(() => {
    if (!window.matchMedia('(hover: none)').matches) return;
    const t = window.setTimeout(() => {
      if (learnMoreRef.current) learnMoreRef.current.classList.add('is-auto-pulse');
    }, 9000);
    return () => window.clearTimeout(t);
  }, []);

  return (
  <section className="orx-hero" style={{
    position: 'relative',
    minHeight: 680,
    padding: '120px 48px 96px',
    display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
    background: '#0A0705',
    overflow: 'hidden',
  }}>
    {/* Unified load sequence:
          0     → 500ms : pure black hold (everything at opacity 0)
          500   → 2000ms: radial rises and ALL content fades in through a
                          blur+translate together, as one cohesive moment.
        Content animates on the wrapper so every child shares the same
        curve, instead of staggered per-element reveals. */}
    <style>{`
      .orx-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 80% at 50% 100%, #FF6A0A 0%, #8A2A00 25%, #1F0800 50%, #0A0705 82%);
        transform: translateY(38%);
        opacity: 0;
        animation: orx-hero-rise 1500ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards;
        pointer-events: none;
        z-index: 0;
      }
      @keyframes orx-hero-rise {
        from { transform: translateY(38%); opacity: 0; }
        to   { transform: translateY(0);  opacity: 1; }
      }
      .orx-hero > * { position: relative; z-index: 1; }

      .orx-hero-content {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(12px);
        animation: orx-hero-reveal 1500ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards;
      }
      @keyframes orx-hero-reveal {
        0%   { opacity: 0; filter: blur(10px); transform: translateY(12px); }
        100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
      }
    `}</style>
    <div className="orx-hero-content" style={{position:'relative', width: '100%'}}>
      <h1 className="orx-hero-h1" style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 'clamp(40px, 6.4vw, 96px)',
        fontWeight: 400,
        lineHeight: 0.98,
        letterSpacing: '-0.04em',
        color: '#FFFAF5',
        margin: 0,
        whiteSpace: 'nowrap',
      }}>
        We sell you <HeroRotator/>
      </h1>
      <style>{`
        @media (max-width: 720px) {
          /* Force the headline to stay on a single line — the rotating
             italic word tail would otherwise break to a second line at
             most mobile widths. Font slightly bumped from the previous
             pass so the hero still feels like a headline. */
          .orx-hero-h1 {
            white-space: nowrap !important;
            font-size: clamp(26px, 7.8vw, 40px) !important;
          }
          /* Release the 680px min-height and compress the hero's own
             padding so the section sits closer to the nav and the
             Marquee. */
          .orx-hero {
            min-height: 0 !important;
            padding: 40px 20px 32px !important;
          }
          /* Gap between H1 and the paragraph block. */
          .orx-hero-h1 { margin-bottom: 4px !important; }
        }
      `}</style>
      <p style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 20,
        lineHeight: 1.5,
        color: 'rgba(230, 220, 204, 0.82)',
        maxWidth: 820,
        marginTop: 24,
        textWrap: 'pretty',
      }}>
        <span
          className="orx-tagline"
          style={{
            display: 'block',
            color: '#FFFAF5',
            fontWeight: 500,
            marginBottom: 18,
          }}
        >
          We sell you what matters. <span className="orx-results-word" data-text="Results." style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic'}}>Results.</span>
        </span>
        <span
          className="orx-hero-subline"
          style={{
            display: 'block',
            fontSize: 16,
            lineHeight: 1.55,
          }}
        >
          The brands, systems, and software are just some of the vehicles we use to get you there.
        </span>
      </p>
      <style>{`
        /* Base color moved off the inline style so the :hover rule can
           win specificity (inline beats pseudo-class otherwise). 1680ms
           is ~2x the original 840ms Results baseline — slow enough to read
           as a smooth translation in both directions: dim beige lifts to
           solid near-white on hover, eases back on mouse-out. */
        .orx-hero-subline {
          color: rgba(230, 220, 204, 0.82);
          transition: color 1680ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .orx-hero-subline:hover {
          color: #FFFAF5;
        }
        @media (max-width: 720px) {
          /* Tagline "We sell you what matters. Results." → one line.
             Bumped back up from 15px so the brand line reads at the
             right weight. */
          .orx-tagline {
            font-size: 17px !important;
            white-space: nowrap !important;
            letter-spacing: -0.005em !important;
            margin-bottom: 10px !important;
          }
          /* Subtitle → two lines max on a 390px viewport. */
          .orx-hero-subline {
            font-size: 13px !important;
            line-height: 1.45 !important;
          }
          /* Hero <p> top margin (defaults to 24px) pulled in. */
          section.orx-hero p[style*="font-size: 20"] {
            margin-top: 16px !important;
          }
        }
      `}</style>
      <div style={{display:'flex', gap: 12, marginTop: 40, alignItems: 'stretch'}}>
        <button
          onClick={onContact}
          className="orx-btn orx-btn--primary orx-btn-aura orx-btn-aura--primary"
          style={{
            background: 'linear-gradient(180deg, #FFFFFF 0%, #F5EEE4 100%)',
            color: '#0A0705', border: 'none',
            padding: '14px 22px', borderRadius: 12,
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 15, fontWeight: 500,
            cursor: 'pointer',
            height: 48, width: 148, boxSizing: 'border-box',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 0 0 0 1px rgba(255,250,245,0.22), 0 14px 48px rgba(0,0,0,0.5)',
          }}>
            <span className="orx-btn-label">Contact</span>
        </button>
        <button
          ref={learnMoreRef}
          onClick={() => {
            const el = document.getElementById('philosophy');
            if (!el) return;
            const y = el.getBoundingClientRect().top + window.scrollY + 28;
            window.scrollTo({top: y, behavior: 'smooth'});
          }}
          className="orx-btn orx-btn--ghost orx-btn-aura orx-btn-aura--ghost"
          style={{
            background: 'rgba(10,7,5,0.35)',
            backdropFilter: 'blur(16px)',
            color: '#FFFAF5', border: 'none',
            padding: '14px 22px', borderRadius: 12,
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 15, fontWeight: 500,
            cursor: 'pointer',
            height: 48, width: 148, boxSizing: 'border-box',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 0 0 0 1px rgba(255,250,245,0.22)',
          }}>Learn more</button>
      </div>
    </div>
  </section>
  );
};

window.Hero = Hero;
window.HeroRotator = HeroRotator;