/* ============================================================
   Digital Odyssey, About page
   ============================================================ */

/* Designed "journey" visual, a winding route with milestone waypoints,
   an animated travelling marker, and the orbit mark. Echoes the
   "named for the journey" copy without a stock photo. */
function JourneyMap() {
  const ref = React.useRef(null);
  const [len, setLen] = React.useState(0);
  React.useEffect(() => {if (ref.current) setLen(ref.current.getTotalLength());}, []);
  const W = 480,H = 440;
  const path = `M 70 ${H - 50} C 70 ${H - 150}, 200 ${H - 150}, 210 ${H - 220} S 150 ${H - 300}, 250 ${H - 330} S 400 ${H - 340}, 410 60`;
  const stops = [
  { x: 70, y: H - 50, label: '2015', sub: 'Chart the course' },
  { x: 208, y: H - 218, label: 'Build', sub: 'The growth engine' },
  { x: 252, y: H - 330, label: 'Launch', sub: 'Read data daily' },
  { x: 410, y: 60, label: 'Scale', sub: 'Compound results' }];

  return (
    <div className="journey-map-wrap" style={{ position: 'relative', width: '100%', height: H, borderRadius: 24, overflow: 'hidden',
      background: 'linear-gradient(160deg, var(--navy-elevated), var(--navy-deep))', border: '1px solid rgba(255,255,255,.08)', boxShadow: '0 30px 70px rgba(0,0,0,.4)' }}>
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: .5 }}></div>
      <div style={{ position: 'absolute', width: 340, height: 340, borderRadius: '50%', top: -120, right: -120, background: 'radial-gradient(circle, rgba(26,224,230,.16), transparent 65%)' }}></div>
      <div style={{ position: 'absolute', top: 22, left: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
        <Orbit size={30} spin />
        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.6)' }}>The route to growth</span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="jm-stroke" x1="0" y1={H} x2={W} y2="0">
            <stop stopColor="#0052ff" /><stop offset="1" stopColor="#1ae0e6" />
          </linearGradient>
        </defs>
        {/* faint full route */}
        <path d={path} fill="none" stroke="rgba(255,255,255,.10)" strokeWidth="3" strokeDasharray="2 9" strokeLinecap="round" />
        {/* animated drawn route */}
        <path ref={ref} d={path} fill="none" stroke="url(#jm-stroke)" strokeWidth="3.5" strokeLinecap="round"
        style={{ strokeDasharray: len, strokeDashoffset: len, animation: len ? 'jm-draw 2.6s cubic-bezier(.16,1,.3,1) forwards .25s' : 'none' }} />
        {/* travelling marker */}
        {len > 0 &&
        <circle r="6" fill="#fff" style={{ filter: 'drop-shadow(0 0 6px #1ae0e6)' }}>
            <animateMotion dur="6s" repeatCount="indefinite" begin="2.6s" path={path} />
          </circle>
        }
        {/* waypoints */}
        {stops.map((s, i) =>
        <g key={i}>
            <circle cx={s.x} cy={s.y} r="11" fill="var(--navy-deep)" stroke="url(#jm-stroke)" strokeWidth="2.5" />
            <circle cx={s.x} cy={s.y} r="4" fill="#1ae0e6" />
          </g>
        )}
      </svg>
      {/* waypoint labels (HTML so type matches the system) */}
      {stops.map((s, i) => {
        const right = s.x > W * 0.6;
        return (
          <div key={i} style={{ position: 'absolute', left: `${s.x / W * 100}%`, top: `${s.y / H * 100}%`,
            transform: `translate(${right ? 'calc(-100% - 20px)' : '20px'}, -50%)`, textAlign: right ? 'right' : 'left', whiteSpace: 'nowrap' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 15, color: '#fff', letterSpacing: '-0.3px' }}>{s.label}</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, color: 'rgba(255,255,255,.55)' }}>{s.sub}</div>
          </div>);

      })}
      <style>{`@keyframes jm-draw { to { stroke-dashoffset: 0; } }`}</style>
    </div>);

}

const VALUES = [
['target', 'Results over reports', 'A pretty slide deck never grew a business. We are accountable to revenue, leads and ROAS, and we say so out loud.'],
['heart', 'Own it like owners', 'We treat your budget like our own money and your brand like our own name. No passengers on the account.'],
['eye', 'Clarity, always', 'Live dashboards, plain-English reviews, honest calls. You always know what is working, what is not, and why.'],
['trending-up', 'Compounding beats spikes', 'We build engines, not one-off wins. The goal is growth that keeps growing after we have left the room.']];


const MILESTONES = [
['2015', 'The spark.', 'Took a digital marketing course out of curiosity. Didn\u2019t expect it to change everything.'],
['2016', 'First steps in.', 'Landed a first internship on the client side, managing social media channels, publishing content, and pulling reports. Learning the craft from the ground up.'],
['2017', 'Into the agency world.', 'Crossed over to the agency side. Campaigns, communication, strategy, execution, the pace was different and it felt right. This was the world.'],
['2019', 'Three years deep.', 'Three years of agency life across clients and industries. Built a sharp, honest understanding of what actually moves the needle, and what doesn\u2019t.'],
['2020', 'Digital Odyssey begins.', 'Started as a side gig with one simple belief: do great work for clients who trust you. The first few clients came in. The results spoke. It grew from there.'],
['2022', 'A real agency now.', 'What started as a one-person gig became a proper team. Clients across healthcare, retail, B2B, and beyond. Campaigns running across borders.'],
['2024', 'Five years in business.', 'Half a decade. A diverse portfolio of clients, healthcare clinics, photographers, robotics companies, childcare providers, all built on one thing: results you can point to.'],
['2026', 'Still growing.', 'The clients stayed. The trust kept growing. And the journey is far from over.']];


const WHY = [
'One team for strategy, media, creative and analytics, no agency hand-offs.',
'You own every account, asset and data point from day one.',
'A named strategist who actually knows your business.',
'Transparent spend and live reporting, never a black box.',
'Month-to-month engagements, we earn the next month every month.'];


function AboutApp() {
  useReveal();
  return (
    <>
      <TopNav active="about" />
      <main>
        <PageHero eyebrow="About us" title="We built Digital Odyssey to do marketing that earns its keep."
        body="A senior team of marketers, creatives and analysts who got tired of agencies that confused activity with results. So we built the one we wished existed." />

        {/* Story */}
        <section className="section">
          <Container>
            <div className="split">
              <div className="reveal">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Our story</div>
                <h2 className="do-display-md" style={{ margin: '0 0 20px' }}>Named for the journey, built for the destination.</h2>
                <p className="do-body-lg" style={{ margin: '0 0 18px' }}>Growth is rarely a straight line. It is a route, full of tests, turns and course-corrections. Most agencies sell you the map and disappear. We stay in the cockpit.</p>
                <p className="do-body-md" style={{ margin: '0 0 28px' }}>Since 2020 we have helped growth-stage startups, SMBs and multi-location brands navigate that route, turning ad spend into customers, content into community, and search into pipeline. No jargon, no vanity metrics, no 360° nonsense. Just a senior team that owns the outcome.</p>
                <Button href="work.html" variant="primary" icon="arrow-right">See where it led</Button>
              </div>
              <div className="reveal" style={{ transitionDelay: '100ms' }}>
                <JourneyMap />
              </div>
            </div>
          </Container>
        </section>

        {/* Mission & vision */}
        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container>
            <div className="grid-2">
              {[['compass', 'Our mission', 'To be the growth partner our clients can point to, the reason their numbers went up and stayed up.'], ['rocket', 'Our vision', 'A world where "marketing agency" means accountable, transparent and genuinely good at the craft. We are building proof, one brand at a time.']].map(([icon, t, b], i) =>
              <div key={t} className="do-card reveal" style={{ padding: 40, transitionDelay: `${i * 90}ms` }}>
                  <div style={{ width: 54, height: 54, borderRadius: 16, background: 'var(--grad-energy)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
                    <Icon name={icon} size={24} color="#04122b" />
                  </div>
                  <h3 className="do-title-lg" style={{ margin: '0 0 12px' }}>{t}</h3>
                  <p className="do-body-lg" style={{ margin: 0 }}>{b}</p>
                </div>
              )}
            </div>
          </Container>
        </section>

        {/* Values */}
        <section className="section">
          <Container>
            <SectionHead eyebrow="What we believe" title="Four values we actually operate by." align="center" />
            <div className="grid-4">
              {VALUES.map(([icon, t, b], i) =>
              <div key={t} className="reveal" style={{ transitionDelay: `${i % 4 * 70}ms` }}>
                  <div style={{ width: 48, height: 48, borderRadius: 14, background: 'var(--chip-bg)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                    <Icon name={icon} size={22} color="var(--cyan-deep)" />
                  </div>
                  <h3 className="do-title-md" style={{ margin: '0 0 10px' }}>{t}</h3>
                  <p className="do-body-sm" style={{ margin: 0 }}>{b}</p>
                </div>
              )}
            </div>
          </Container>
        </section>

        {/* Milestones */}
        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container>
            <SectionHead eyebrow="The journey so far" title="The journey so far." body="From a digital marketing course to a full-service agency, here's how we got here." />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {MILESTONES.map(([yr, t, b], i) =>
              <div key={yr} className="reveal" style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 32, padding: '28px 0', borderTop: '1px solid var(--border)', transitionDelay: `${i * 70}ms` }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 30, color: 'var(--cyan-deep)', letterSpacing: '-1px' }}>{yr}</div>
                  <div>
                    <h3 className="do-title-md" style={{ margin: '4px 0 8px' }}>{t}</h3>
                    <p className="do-body-md" style={{ margin: 0, maxWidth: 560 }}>{b}</p>
                  </div>
                </div>
              )}
            </div>
          </Container>
        </section>

        {/* Why choose us */}
        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container>
            <div className="split">
              <div className="reveal">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Why Digital Odyssey</div>
                <h2 className="do-display-md" style={{ margin: '0 0 20px' }}>The difference is who is in the room.</h2>
                <p className="do-body-lg" style={{ margin: 0 }}>Plenty of agencies can run an ad. Fewer will tell you the truth, own the result, and still be here next year. That is the bar we hold.</p>
              </div>
              <div className="reveal" style={{ transitionDelay: '100ms' }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {WHY.map((w, i) =>
                  <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '18px 0', borderBottom: '1px solid var(--border)' }}>
                      <Icon name="check-circle" size={22} color="var(--cyan-deep)" style={{ flexShrink: 0, marginTop: 1 }} />
                      <span className="do-body-md" style={{ color: 'var(--text)' }}>{w}</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </Container>
        </section>

        <CtaBand title="Like how we think? Let's talk." body="If accountable, transparent and genuinely good at the craft sounds like your kind of partner, we should meet." />
      </main>
      <Footer />
    </>);

}

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