/* ============================================================
   Digital Odyssey, Homepage
   ============================================================ */

function HomeHero() {
  return (
    <section style={{ background: 'var(--navy-deep)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: .55 }}></div>
      <div className="hero-glow" style={{ position: 'absolute', width: 680, height: 680, borderRadius: '50%', top: '-280px', right: '-180px', background: 'radial-gradient(circle, rgba(26,224,230,.18), transparent 62%)' }}></div>
      <div className="hero-glow" style={{ position: 'absolute', width: 620, height: 620, borderRadius: '50%', bottom: '-340px', left: '-200px', background: 'radial-gradient(circle, rgba(0,82,255,.26), transparent 62%)' }}></div>
      {/* faint orbit rings behind hero, rings stay fixed, a body glides along each path (true orbit) */}
      <svg viewBox="0 0 1200 600" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: .35 }} preserveAspectRatio="xMidYMid slice">
        <g transform="rotate(-14 600 300)">
          <ellipse cx="600" cy="300" rx="520" ry="220" fill="none" stroke="rgba(26,224,230,.4)" strokeWidth="1" />
          <circle r="4" fill="rgba(26,224,230,.95)">
            <animateMotion dur="32s" repeatCount="indefinite" rotate="auto"
              path="M 80 300 a 520 220 0 1 0 1040 0 a 520 220 0 1 0 -1040 0" />
          </circle>
        </g>
        <g transform="rotate(-14 600 300)">
          <ellipse cx="600" cy="300" rx="380" ry="150" fill="none" stroke="rgba(47,107,255,.4)" strokeWidth="1" />
          <circle r="3.5" fill="rgba(47,107,255,.95)">
            <animateMotion dur="24s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear"
              path="M 220 300 a 380 150 0 1 0 760 0 a 380 150 0 1 0 -760 0" />
          </circle>
        </g>
      </svg>

      <Container style={{ position: 'relative', padding: 'clamp(56px,8vw,104px) 24px clamp(72px,9vw,120px)' }}>
        <div className="split hero-split" style={{ gridTemplateColumns: '1.08fr .92fr' }}>
          <div>
            <div className="reveal is-in" style={{ marginBottom: 26 }}><Badge style={{ whiteSpace: 'nowrap', fontSize: 11 }}>Performance-led growth agency</Badge></div>
            <h1 className="reveal is-in do-display-mega" style={{ color: '#fff', margin: 0 }}>
              Navigate growth.<br /><span className="grad-text">Own your space.</span>
            </h1>
            <p className="reveal is-in do-body-lg" style={{ color: 'rgba(255,255,255,.72)', margin: '26px 0 38px', maxWidth: 480, fontSize: 19 }}>Digital Odyssey is a full-service marketing agency engineering paid, social, content and search into one measurable growth engine, for brands that want results, not reports.

            </p>
            <div className="reveal is-in hero-cta-row" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button href="contact.html" size="lg" variant="cyan" icon="arrow-right">Book a discovery call</Button>
              <Button href="work.html" size="lg" variant="outline" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.5)' }}>See the results</Button>
            </div>
            <div className="reveal is-in" style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 46, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex' }}>
                {['#1ae0e6', '#0052ff', '#2f6bff', '#19c98a'].map((c, i) =>
                <div key={i} style={{ width: 38, height: 38, borderRadius: 9999, background: c, border: '2px solid var(--navy-deep)', marginLeft: i ? -12 : 0 }}></div>
                )}
              </div>
              <div>
                <div style={{ display: 'flex', gap: 2 }}>{Array.from({ length: 5 }).map((_, i) => <Icon key={i} name="star" size={14} color="var(--accent-yellow)" fill="var(--accent-yellow)" stroke={0} />)}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'rgba(255,255,255,.65)', marginTop: 4 }}>Trusted by <span style={{ fontFamily: 'var(--font-mono)' }}>120+</span> growing brands</div>
              </div>
            </div>
          </div>

          {/* floating dashboard mockups */}
          <div className="hero-aside" style={{ position: 'relative', minHeight: 440 }}>
            <div className="reveal is-in" style={{ position: 'absolute', top: 10, right: 0, animation: 'do-float 7s ease-in-out infinite' }}>
              <AnalyticsCard />
            </div>
            <div className="reveal is-in" style={{ position: 'absolute', bottom: 0, left: 0, animation: 'do-float 6s ease-in-out infinite .8s' }}>
              <MiniStatCard icon="users" label="Reach · 30d" value="2.1M" delta="+64%" up />
            </div>
            <div className="reveal is-in" style={{ position: 'absolute', top: 0, left: 24, animation: 'do-float 8s ease-in-out infinite .4s' }}>
              <MiniStatCard icon="target" label="Cost / lead" value="$11.40" delta="-38%" up={false} />
            </div>
          </div>
        </div>
      </Container>
    </section>);

}

function HomeLogos() {
  return (
    <section style={{ background: 'var(--navy-deep)', color: '#fff', borderTop: '1px solid rgba(255,255,255,.07)' }}>
      <Container style={{ padding: '40px 24px' }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 30, fontFamily: 'var(--font-sans)', fontSize: 13, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.45)' }}>
          Brands navigating growth with us
        </div>
        <div className="reveal"><LogoStrip dark /></div>
      </Container>
    </section>);

}

function HomeServices() {
  return (
    <section className="section">
      <Container>
        <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>What we do</div>
            <h2 className="do-display-lg" style={{ margin: 0, maxWidth: 560 }}>One team for every channel that drives revenue.</h2>
          </div>
          <Button href="services.html" variant="outline" icon="arrow-right">View more services</Button>
        </div>
        <div className="grid-3">
          {['perf','aivideo','aidash','web','smm','content']
            .map(k => SERVICES.find(s => s.key === k))
            .filter(Boolean)
            .map((s, i) => <ServiceCard key={s.key} s={s} index={i} />)}
        </div>
      </Container>
    </section>);

}

function HomeStats() {
  return (
    <section className="section" style={{ background: 'var(--page-soft)' }}>
      <Container>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>The numbers</div>
          <h2 className="do-display-lg" style={{ margin: '0 auto', maxWidth: 640 }}>We are measured by what we move.</h2>
        </div>
        <div className="grid-4">
          {STATS.map((s, i) =>
          <div key={i} className="reveal" style={{ textAlign: 'center', padding: '8px 12px', transitionDelay: `${i * 80}ms` }}>
              <Stat {...s} />
            </div>
          )}
        </div>
      </Container>
    </section>);

}

function HomeProcess() {
  return (
    <section className="section">
      <Container>
        <SectionHead eyebrow="How we work" title="A clear route from where you are to where you want to be." body="No black boxes. Every engagement runs on the same four-stage system, so you always know what is happening and why." align="center" maxBody={620} />
        <ProcessSteps steps={PROCESS} />
      </Container>
    </section>);

}

function HomeCases() {
  const featured = CASES.filter((c) => c.featured);
  return (
    <section className="section" style={{ background: 'var(--page-soft)' }}>
      <Container>
        <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Selected work</div>
            <h2 className="do-display-lg" style={{ margin: 0, maxWidth: 560 }}>Results we can point to.</h2>
          </div>
          <Button href="work.html" variant="outline" icon="arrow-right">View all case studies</Button>
        </div>
        <div className="grid-3">
          {featured.map((c, i) => <CaseCard key={c.id} c={c} index={i} />)}
        </div>
      </Container>
    </section>);

}

function HomeTestimonials() {
  return (
    <section className="section">
      <Container>
        <SectionHead eyebrow="Client voices" title="The work speaks. So do our clients." align="center" />
        <TestimonialCarousel items={TESTIMONIALS} />
      </Container>
    </section>);

}

function HomeIndustries() {
  const [narrow, setNarrow] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)');
    const fn = (e) => setNarrow(e.matches); fn(mq);
    mq.addEventListener('change', fn);
    return () => mq.removeEventListener('change', fn);
  }, []);
  return (
    <section className="section" style={{ background: 'var(--page-soft)' }}>
      <Container>
        {narrow ? (
          <div>
            <div className="reveal" style={{ marginBottom: 36 }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Industries</div>
              <h2 className="do-display-lg" style={{ margin: '0 0 20px' }}>Built for businesses that live or die by local demand.</h2>
              <p className="do-body-lg" style={{ margin: '0 0 28px' }}>We go deep in a handful of verticals so our playbooks start ahead, not from scratch.</p>
              <Button href="contact.html" variant="primary" icon="arrow-right">Talk about your industry</Button>
            </div>
            <IndustriesGrid items={INDUSTRIES} />
          </div>
        ) : (
          <div className="split" style={{ alignItems: 'flex-start', gridTemplateColumns: '.8fr 1.2fr' }}>
            <div className="reveal" style={{ position: 'sticky', top: 100 }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Industries</div>
              <h2 className="do-display-lg" style={{ margin: '0 0 20px' }}>Built for businesses that live or die by local demand.</h2>
              <p className="do-body-lg" style={{ margin: '0 0 28px' }}>We go deep in a handful of verticals so our
playbooks start ahead, not from scratch.</p>
              <Button href="contact.html" variant="primary" icon="arrow-right">Talk about your industry</Button>
            </div>
            <IndustriesGrid items={INDUSTRIES} />
          </div>
        )}
      </Container>
    </section>);
}

function HomeFaq() {
  return (
    <section className="section">
      <Container style={{ maxWidth: 840 }}>
        <SectionHead eyebrow="FAQ" title="The questions we hear most." align="center" />
        <FaqAccordion items={FAQS} />
      </Container>
    </section>);

}

function HomeApp() {
  useReveal();
  React.useEffect(() => {
    // Hide the pre-render placeholder as soon as React is ready
    var el = document.getElementById('pre-hero');
    if (el) el.style.display = 'none';
  }, []);
  return (
    <>
      <TopNav active="home" />
      <main>
        <HomeHero />
        <HomeLogos />
        <HomeServices />
        <HomeStats />
        <HomeProcess />
        <HomeCases />
        <HomeTestimonials />
        <HomeIndustries />
        <HomeFaq />
        <CtaBand />
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp />);