/* rathmind — Data Landing
 * Studio of numbers. Editorial paper, rigorous, data-as-typography.
 */

const DataLanding = {};

DataLanding.View = function({ tweaks, onBack, onCross, onNav }) {
  const ref = React.useRef(null);
  const canvasRef = React.useRef(null);
  const [tick, setTick] = React.useState(0);
  const outcomes = [
    ['34%', 'churn reduction', 'RetailEdge · D2C retail'],
    ['$2.3M', 'revenue recovered', 'CloudPeak Solutions'],
    ['40+', 'executive dashboards', 'NovaBridge · Fortune 500 bank'],
    ['22%', 'ER wait time cut', 'Solis Health · 8 hospital networks'],
    ['98%', 'client satisfaction', '150+ engagements'],
  ];
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => (t + 1) % outcomes.length), 3200);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(es => {
      es.forEach(e => e.isIntersecting && (e.target.classList.add('in'), io.unobserve(e.target)));
    }, { threshold: 0.12, root: ref.current });
    ref.current.querySelectorAll('.rv').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!canvasRef.current) return;
    const f = new PointField(canvasRef.current, {
      mode: 'lattice', tone: 'light',
      variant: tweaks.throughline || 'A',
      motion: tweaks.motion / 100 * 0.6,
      heavy: tweaks.webgl / 100 * 0.7,
    });
    return () => f.destroy();
  }, [tweaks.throughline]);

  return (
    <div ref={ref} className="is-data" style={{
      width: '100%', height: '100%', overflow: 'auto',
      background: 'var(--paper)', color: 'var(--ink)',
      fontFamily: 'var(--sans)',
    }}>
      <Nav side="data" onBack={onBack} onCross={onCross} onNav={onNav}/>

      {/* Hero */}
      <section style={{ position: 'relative', padding: '120px 48px 140px', borderBottom: '1px solid var(--rule-faint)', overflow: 'hidden' }}>
        <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, opacity: 0.55 }}/>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv" style={{ gridColumn: '1 / span 3' }}>01 <span className="dot"/> Data & Analytics <span className="dot"/> est. 2007</div>
          <div style={{ gridColumn: '1 / span 10', marginTop: 56 }}>
            <h1 className="rv" data-d="1" style={{
              fontFamily: 'var(--serif)', fontSize: 'clamp(72px, 9vw, 164px)',
              lineHeight: 0.92, letterSpacing: '-0.035em', margin: 0, fontWeight: 400,
            }}>
              Reading what<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--ink-3)' }}>is actually there,</em><br/>
              without flinching.
            </h1>
          </div>
          <p className="rv" data-d="2" style={{
            gridColumn: '3 / span 6', marginTop: 56,
            fontFamily: 'var(--sans)', fontSize: 18, lineHeight: 1.55,
            color: 'var(--ink-2)',
          }}>
            I partner with leadership teams to build data infrastructure, craft executive
            dashboards, and deploy predictive models that drive confident, measurable action.
            Diagnosis before intervention. Evidence before opinion.
          </p>
          <div className="rv" data-d="3" style={{ gridColumn: '3 / span 9', marginTop: 48, display: 'flex', gap: 16 }}>
            <button className="btn btn-solid" onClick={() => onNav('contact')}>Start a conversation <span className="dot"/> →</button>
            <button className="btn" onClick={() => onNav('assessment')}>Take the 3-min assessment</button>
          </div>
        </div>
      </section>

      {/* Live ticker */}
      <section style={{ padding: '24px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr auto', gap: 32, alignItems: 'baseline' }}>
          <div className="num">Live <span className="dot" style={{ background: '#2a7a4f', animation: 'pulse 1.6s ease-in-out infinite' }}/> outcomes</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
            <span style={{ color: 'var(--data-accent)', fontWeight: 500 }}>{outcomes[tick][0]}</span>
            <span style={{ color: 'var(--ink-3)', fontStyle: 'italic' }}> {outcomes[tick][1]}</span>
            <span className="num" style={{ marginLeft: 20 }}>@ {outcomes[tick][2]}</span>
          </div>
          <div className="num">{String(tick + 1).padStart(2, '0')} / {String(outcomes.length).padStart(2, '0')}</div>
        </div>
        <style>{`@keyframes pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 1 } }`}</style>
      </section>

      {/* Stats */}
      <section style={{ padding: '96px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {[['12+', 'years in practice'], ['150+', 'clients served'], ['98%', 'client satisfaction'], ['500+', 'dashboards built']].map(([n, k], i) => (
            <div key={k} className="rv" data-d={i + 1} style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(64px, 7vw, 120px)', lineHeight: 0.95, letterSpacing: '-0.03em' }}>{n}</div>
              <div className="num" style={{ marginTop: 14 }}>{k}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Services */}
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 64 }}>
          <div className="num rv" style={{ gridColumn: '1 / span 3' }}>02 <span className="dot"/> Services</div>
          <h2 className="rv" data-d="1" style={{
            gridColumn: '3 / span 8', margin: 0,
            fontFamily: 'var(--serif)', fontWeight: 400,
            fontSize: 'clamp(48px, 5vw, 80px)', letterSpacing: '-0.025em', lineHeight: 1,
          }}>Three practices,<br/><em style={{ color: 'var(--ink-3)' }}>one patient eye.</em></h2>
        </div>
        {[
          { n: '01', t: 'Data Strategy & Architecture', d: 'End-to-end data strategy design — from infrastructure audits to unified data models that power confident decision-making.', k: 'BigQuery · Snowflake · dbt · Airflow' },
          { n: '02', t: 'Dashboard & Visualization', d: 'Custom-built interactive dashboards that transform complex datasets into clear, actionable visual narratives.', k: 'Tableau · Power BI · Looker · Metabase' },
          { n: '03', t: 'Advanced Analytics & ML', d: 'Predictive modeling, customer segmentation, and statistical analysis to uncover patterns hidden in your data.', k: 'Python · R · SQL · Databricks' },
        ].map((s, i) => (
          <div key={s.n} className="rv" data-d={Math.min(i + 1, 5)} style={{
            display: 'grid', gridTemplateColumns: '80px 1.4fr 1fr 1fr 160px',
            gap: 24, padding: '36px 0', alignItems: 'baseline',
            borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
          }}>
            <div className="num">{s.n}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.02em' }}>{s.t}</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>{s.d}</div>
            <div className="num" style={{ color: 'var(--ink)' }}>{s.k}</div>
            <button className="btn" style={{ justifySelf: 'end', padding: '10px 14px' }} onClick={() => onNav('contact')}>Enquire →</button>
          </div>
        ))}
      </section>

      {/* War Room teaser */}
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 40 }}>
          <div className="num rv" style={{ gridColumn: '1 / span 3' }}>03 <span className="dot"/> War Room <span className="dot"/> featured</div>
          <h2 className="rv" data-d="1" style={{
            gridColumn: '3 / span 9', margin: 0,
            fontFamily: 'var(--serif)', fontSize: 'clamp(44px, 4.6vw, 72px)', letterSpacing: '-0.025em', lineHeight: 1.02, fontWeight: 400,
          }}>
            Reducing churn by <span style={{ color: 'var(--data-accent)' }}>34%</span> with predictive scoring <span style={{ fontStyle: 'italic', color: 'var(--ink-3)' }}>— retail / D2C.</span>
          </h2>
        </div>
        <div className="rv" data-d="2" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 24 }}>
          {[['34%', 'churn reduction'], ['$2.3M', 'revenue recovered'], ['1', 'unified platform'], ['4 wks', 'to first insight']].map(([n, k]) => (
            <div key={k} style={{ borderTop: '1px solid var(--ink)', paddingTop: 16 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 4.5vw, 72px)', letterSpacing: '-0.025em' }}>{n}</div>
              <div className="num" style={{ marginTop: 8 }}>{k}</div>
            </div>
          ))}
        </div>
        <div className="rv" data-d="3" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '80px 1fr 160px', gap: 24, alignItems: 'baseline' }}>
          <div className="num">Diagnosis</div>
          <ol style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', margin: 0, paddingLeft: 0, listStyle: 'none', counterReset: 'd' }}>
            {['Customer data lived in 12 silos — CRM, POS, email, web, support tickets.', 'No single source of truth — three teams, three churn numbers.', 'Dashboards tracked vanity metrics, missed signals that predicted departure.', '72-hour reporting lag — by the time leadership saw it, the moment had passed.', '$4.2M of revenue leakage undetected.'].map((l, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', padding: '8px 0' }}>
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <span>{l}</span>
              </li>
            ))}
          </ol>
          <button className="btn" style={{ alignSelf: 'start' }} onClick={() => onNav('warroom')}>Open war room →</button>
        </div>
      </section>

      {/* Assessment teaser */}
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv" style={{ gridColumn: '1 / span 3' }}>04 <span className="dot"/> Assessment</div>
          <div style={{ gridColumn: '3 / span 9' }}>
            <h2 className="rv" data-d="1" style={{
              margin: 0, fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 'clamp(48px, 5vw, 80px)', letterSpacing: '-0.025em', lineHeight: 1,
            }}>
              Three minutes. Six dimensions.<br/>
              <em style={{ color: 'var(--ink-3)' }}>A first read of your data maturity.</em>
            </h2>
            <div className="rv" data-d="2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48 }}>
              {['Data Infrastructure', 'Analytics Capability', 'Data Governance', 'Team & Culture', 'Decision Making', 'ROI & Measurement'].map((d, i) => (
                <div key={d} style={{ borderTop: '1px solid var(--rule-faint)', paddingTop: 14, paddingBottom: 14 }}>
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em', marginTop: 6 }}>{d}</div>
                </div>
              ))}
            </div>
            <button className="btn btn-solid rv" data-d="3" style={{ marginTop: 48 }} onClick={() => onNav('assessment')}>Begin assessment <span className="dot"/> →</button>
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="rv" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num" style={{ gridColumn: '1 / span 2' }}>In practice</div>
          <blockquote style={{
            gridColumn: '3 / span 8', margin: 0,
            fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 4.2vw, 64px)',
            letterSpacing: '-0.02em', lineHeight: 1.15,
          }}>
            "Our churn rate dropped 34% within three months. The predictive model RD built paid for itself in the first quarter."
          </blockquote>
          <div style={{ gridColumn: '11 / span 2' }}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500 }}>Anika Patel</div>
            <div className="num" style={{ marginTop: 4 }}>Head of Growth <span className="dot"/> RetailEdge</div>
          </div>
        </div>
      </section>

      <Cross side="data" onCross={onCross}/>
      <Footer side="data"/>
    </div>
  );
};

// ─── Shared chrome ─────────────────────────────────────────────
function Nav({ side, onBack, onCross, onNav }) {
  const other = side === 'data' ? 'mind' : 'data';
  const links = side === 'data'
    ? [['Work', 'work'], ['War Room', 'warroom'], ['Assessment', 'assessment'], ['Insights', 'insights-d'], ['About', 'about'], ['Contact', 'contact']]
    : [['The Path', 'mind'], ['Programs', 'programs'], ['Still Room', 'stillroom'], ['Insights', 'insights-m'], ['About', 'about'], ['Contact', 'contact']];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10, background: 'var(--paper)',
      borderBottom: '1px solid var(--rule-faint)',
      padding: '18px 40px',
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <button onClick={onBack} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em',
          fontStyle: 'italic', color: 'var(--ink)', padding: 0,
        }}>rath<span className="dot" style={{ background: side === 'data' ? 'var(--data-accent)' : 'var(--mind-accent)', width: 5, height: 5 }}/>mind</button>
        <span className="num">
          <span style={{ color: side === 'data' ? 'var(--data-accent)' : 'var(--mind-accent)' }}>
            {side === 'data' ? '◆ Data' : '○ Mindfulness'}
          </span>
        </span>
      </div>
      <nav style={{ display: 'flex', gap: 22, fontFamily: 'var(--sans)', fontSize: 13 }}>
        {links.map(([l, r]) => (
          <button key={l} onClick={() => onNav && onNav(r)} style={{
            background: 'none', border: 'none', color: 'var(--ink-2)', cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 'inherit', padding: 0,
          }}>{l}</button>
        ))}
      </nav>
      <button onClick={() => onCross(other)} style={{
        justifySelf: 'end', background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: 'var(--ink-3)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        cross to {other === 'data' ? 'Data' : 'Mindfulness'} <span style={{ color: 'var(--ink)' }}>↗</span>
      </button>
    </header>
  );
}

function Cross({ side, onCross }) {
  const other = side === 'data' ? 'mind' : 'data';
  const otherLabel = side === 'data' ? 'Mindfulness' : 'Data & Analytics';
  const otherLine = side === 'data' ? 'Where attention happens.' : 'Where work happens.';
  return (
    <section onClick={() => onCross(other)} style={{
      padding: '160px 48px', borderBottom: '1px solid var(--rule-faint)',
      cursor: 'pointer', background: 'var(--paper-2)',
    }}>
      <div className="num rv">Same person <span className="dot"/> different surface</div>
      <h2 className="rv" data-d="1" style={{
        margin: '28px 0 0', fontFamily: 'var(--serif)', fontWeight: 400,
        fontSize: 'clamp(64px, 8vw, 140px)', lineHeight: 0.94, letterSpacing: '-0.035em',
      }}>
        Cross to <em style={{ color: 'var(--ink-3)' }}>{otherLabel.toLowerCase()}.</em>
      </h2>
      <div className="num rv" data-d="2" style={{ marginTop: 36 }}>{otherLine} <span className="dot"/> click anywhere →</div>
    </section>
  );
}

function Footer({ side }) {
  return (
    <footer style={{
      padding: '56px 40px 32px', background: 'var(--ink)', color: 'var(--paper)',
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
      display: 'flex', justifyContent: 'space-between',
    }}>
      <span>© Rathinavel D <span className="dot" style={{ background: 'currentColor' }}/> 2007–2026</span>
      <span>{side === 'data' ? 'Insight' : 'Awareness'} <span className="dot" style={{ background: 'currentColor' }}/> rath<span className="dot" style={{ background: 'currentColor' }}/>mind</span>
      <span>hello@rathmind.com</span>
    </footer>
  );
}

window.DataLanding = DataLanding;
window.__rathChrome = { Nav, Cross, Footer };