/* global React, ReactDOM, useReveal, Nav, Footer, StatsStrip, TeamImage, IMAGES, JOBS, LOCATION, ArrowUpRight, MAIL, IdeaForm, ApplicationModal, ContactModal, ScrollSpinner, PageBackdrop */
const { useEffect, useRef } = React;

function openApply(role = '') {
  window.dispatchEvent(new CustomEvent('open-apply', { detail: { role } }));
}

// Careers hero: smooth pink-purple gradient orb with parallax + scroll-reactive rotation
function CareersGraphic({ size = 440 }) {
  const ref = useRef(null);
  useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        if (ref.current) {
          ref.current.style.transform = `translateY(${y * 0.18}px) rotate(${y * 0.04}deg) scale(${1 - Math.min(0.08, y * 0.0002)})`;
        }
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);
  return (
    <div ref={ref} style={{ width: size, height: size, willChange: 'transform' }}>
      <svg viewBox="0 0 440 440" width={size} height={size} aria-hidden="true">
        <defs>
          <radialGradient id="ch-rg" cx="32%" cy="30%" r="80%">
            <stop offset="0%" stopColor="#FCD1DE" stopOpacity="1"/>
            <stop offset="35%" stopColor="#E04B7C" stopOpacity="1"/>
            <stop offset="100%" stopColor="#5C3B9E" stopOpacity="1"/>
          </radialGradient>
          <radialGradient id="ch-shine" cx="30%" cy="22%" r="55%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.65"/>
            <stop offset="60%" stopColor="#fff" stopOpacity="0.06"/>
            <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="ch-core" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.85"/>
            <stop offset="55%" stopColor="#fff" stopOpacity="0.25"/>
            <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <g>
          <circle cx="220" cy="220" r="200" fill="url(#ch-rg)"/>
          <circle cx="220" cy="220" r="200" fill="url(#ch-shine)"/>
          <circle cx="220" cy="220" r="64" fill="url(#ch-core)"/>
          {/* Geometric orbiting dashes */}
          <circle cx="220" cy="220" r="208" fill="none" stroke="rgba(255,255,255,0.25)" strokeWidth="0.6" strokeDasharray="2 7"/>
        </g>
      </svg>
    </div>
  );
}

function CareersHero() {
  return (
    <section className="section-lavender relative overflow-hidden">
      <div className="geo-corner top-right"/>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 pt-[140px] md:pt-[180px] pb-14 md:pb-20 relative">
        <div className="grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-7">
            <h1 className="reveal h-display text-[48px] sm:text-[72px] md:text-[100px] lg:text-[120px]" style={{ lineHeight: 0.98 }}>
              <span className="block" style={{ fontWeight: 500 }}>Shape the Future</span>
              <span className="block" style={{ fontWeight: 700 }}>of Digital Health</span>
              <span className="block" style={{ fontWeight: 500 }}>with us</span>
            </h1>
            <p className="reveal mt-10 md:mt-12 text-[18px] md:text-[20px] leading-[1.55] max-w-[560px]" style={{ color: 'var(--ink-2)' }}>
              Our team values expertise and experience, and these are things we gladly share. Others might offer you a challenge, but we offer you a vision and the tools to make it happen.
            </p>
            <div className="reveal mt-10 flex flex-wrap items-center gap-4">
              <a href="#positions" className="btn-pill btn-pill-dark">
                See positions
                <span className="icon-mark"><ArrowUpRight size={11}/></span>
              </a>
              <a href="#ideas" className="btn-pill" style={{ border: '1px solid var(--line)' }}>
                Share an idea
                <span className="icon-mark"><ArrowUpRight size={11}/></span>
              </a>
            </div>
          </div>
          <div className="md:col-span-5 hidden md:flex md:justify-end reveal">
            <CareersGraphic size={420}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ImageTextBlock({ titleRegular, titleBold, body, img, alt, reverse = false }) {
  return (
    <section className="max-w-[1280px] mx-auto px-6 md:px-10 py-20 md:py-32">
      <div className="reveal grid md:grid-cols-12 gap-10 md:gap-16 items-center">
        <div className={`md:col-span-6 ${reverse ? 'md:order-2' : ''}`}>
          <TeamImage src={img} alt={alt} ratio="4/5" parallax={0.06}/>
        </div>
        <div className={`md:col-span-6 ${reverse ? 'md:order-1' : ''}`}>
          <h2 className="h-display text-[44px] md:text-[80px] lg:text-[96px]" style={{ lineHeight: 0.96 }}>
            <span className="block" style={{ fontWeight: 500 }}>{titleRegular}</span>
            <span className="block" style={{ fontWeight: 700 }}>{titleBold}</span>
          </h2>
          <p className="mt-10 text-[16.5px] md:text-[17px] leading-[1.6] max-w-[480px]" style={{ color: 'var(--ink-2)' }}>
            {body}
          </p>
        </div>
      </div>
    </section>
  );
}

// Habit / health idea submission section
function IdeasSection() {
  return (
    <section id="ideas" className="bg-white relative overflow-hidden">
      <div className="tech-grid"/>
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 py-16 md:py-24 relative">
        <div className="reveal grid md:grid-cols-12 gap-12 md:gap-16">
          <div className="md:col-span-5">
            <div className="flex items-center gap-3 mb-6">
              <ScrollSpinner size={48}/>
              <span className="eyebrow">Share with us</span>
            </div>
            <h2 className="h-display text-[44px] md:text-[80px]" style={{ lineHeight: 0.96 }}>
              <span className="block" style={{ fontWeight: 500 }}>Got a habit or</span>
              <span className="block" style={{ fontWeight: 700 }}>health idea?</span>
            </h2>
            <p className="mt-8 text-[16.5px] md:text-[17px] leading-[1.6] max-w-[420px]" style={{ color: 'var(--ink-2)' }}>
              We're always listening. Drop us your idea — a feature, a product concept, a wellness routine that should exist. It lands directly in our inbox and we read every one.
            </p>
            <ul className="mt-10 space-y-3 text-[15px]" style={{ color: 'var(--ink-2)' }}>
              <li className="flex items-center gap-3"><span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }}/>No NDA, no friction — just send.</li>
              <li className="flex items-center gap-3"><span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }}/>We reply within a week.</li>
              <li className="flex items-center gap-3"><span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }}/>If it ships, you'll be credited.</li>
            </ul>
          </div>
          <div className="md:col-span-7">
            <IdeaForm/>
          </div>
        </div>
      </div>
    </section>
  );
}

function JobRow({ title, location, team }) {
  return (
    <button type="button" onClick={() => openApply(title)} className="job-row" aria-label={`Apply: ${title}`}>
      <div className="min-w-0">
        <div className="job-title truncate">{title}</div>
        <div className="job-meta">{location}</div>
      </div>
      <div className="job-team">{team}</div>
      <span className="job-arrow" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      </span>
    </button>
  );
}

function Positions() {
  return (
    <section id="positions" className="bg-white relative">
      <div className="max-w-[1280px] mx-auto px-6 md:px-10 pt-16 md:pt-20 pb-16">
        <div className="reveal mb-16 flex items-center gap-5">
          <h2 className="h-display text-[56px] md:text-[112px]" style={{ lineHeight: 0.98, fontWeight: 700 }}>
            Positions
          </h2>
          <span className="inline-flex items-center justify-center rounded-full bg-[var(--ink)] text-white" style={{ width: 56, height: 56, fontSize: 18, fontWeight: 600 }}>
            {JOBS.length}
          </span>
        </div>

        <div className="border-t" style={{ borderColor: 'var(--line)' }}>
          {JOBS.map((j, i) => (
            <JobRow key={i} title={j.title} team={j.team} location={LOCATION} />
          ))}
        </div>

        <div className="mt-16 pt-10 border-t flex flex-col md:flex-row md:items-center md:justify-between gap-6" style={{ borderColor: 'var(--line)' }}>
          <p className="text-[15px] max-w-[480px]" style={{ color: 'var(--ink-2)' }}>
            Don't see your role? We're always glad to meet thoughtful people.
          </p>
          <button onClick={() => openApply('')} className="btn-pill btn-pill-dark">
            Send open application
            <span className="icon-mark"><ArrowUpRight size={11}/></span>
          </button>
        </div>
      </div>
    </section>
  );
}

function CareersPage() {
  useReveal();
  return (
    <div>
      <Nav activePage="careers" openCount={JOBS.length} theme="light" />
      <main>
        <CareersHero />
        <IdeasSection/>
        <Positions/>
      </main>
      <Footer />
      <ApplicationModal/>
      <ContactModal/>
    </div>
  );
}

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