/* Features page. */

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function FeaturesHero({ bg = '#FFFFFF', accent = '#2563EB' }) {
  return (
    <section className="relative pt-32 lg:pt-40 pb-14 lg:pb-20 overflow-hidden" style={{ backgroundColor: bg }}>
      <div className="absolute inset-0 z-0" aria-hidden="true">
        <img
          src="assets/featureimage.webp"
          alt=""
          className="w-full h-full object-cover object-top select-none"
          draggable="false"
        />
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(90deg, rgba(241,245,249,0.92) 0%, rgba(241,245,249,0.72) 55%, rgba(241,245,249,0.50) 100%)`,
          }}
        />
      </div>

      <div className="relative z-10 max-w-container mx-auto px-5 sm:px-8">
        <div className="max-w-[760px]">
          <p className="eyebrow reveal mb-5" style={{ color: accent }}>Features in detail</p>
          <h1 className="h1 reveal" style={{ transitionDelay: '60ms' }}>
            Features purpose-built for UK housing associations, end to end.
          </h1>
          <p className="mt-7 body-lg text-[#05080f] max-w-[680px] reveal" style={{ transitionDelay: '120ms' }}>
            AI Critical Concern detection, surveys staff trust, four-channel targeted messaging, board-ready Word packs, exit survey triggers, a full question-type builder, HR platform integration, automated onboarding and exit journeys, and housing-only sector benchmarks. Every capability is shaped around how UK housing associations actually run, and the staff who actually use them.
          </p>
          <div className="mt-9 flex flex-col sm:flex-row gap-3 sm:gap-4 reveal" style={{ transitionDelay: '180ms' }}>
            <BtnPrimary href="Book a demo.html" accent>Let's Talk</BtnPrimary>
            <BtnSecondary href="index.html">Back to home</BtnSecondary>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // SPA hash-scroll: the browser tries to jump to #anchor before React has
  // mounted the FeaturePrimary blocks, so do it ourselves once they exist.
  React.useEffect(() => {
    const hash = window.location.hash.replace('#', '');
    if (!hash) return;
    let cancelled = false;
    const tryScroll = (attempt = 0) => {
      if (cancelled) return;
      const el = document.getElementById(hash);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else if (attempt < 30) {
        setTimeout(() => tryScroll(attempt + 1), 80);
      }
    };
    tryScroll();
    return () => { cancelled = true; };
  }, []);

  return (
    <>
      <Header />
      <main id="main">
        <FeaturesHero bg={t.heroBg} accent={t.heroAccent} />
        <FeatureShowcase />
        <HomeFinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakColor
          label="Hero background"
          value={t.heroBg}
          options={['#FFFFFF', '#F8FAFC', '#EFF6FF', '#F1F5F9']}
          onChange={(v) => setTweak('heroBg', v)}
        />
        <TweakColor
          label="Eyebrow accent"
          value={t.heroAccent}
          options={['#2563EB', '#1D4ED8', '#0B3D91', '#0F172A']}
          onChange={(v) => setTweak('heroAccent', v)}
        />
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);