/* Main sections: Hero, Pillars, Score, Cert, Community, Footer */
const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ============ HERO ============ */
const Hero = ({ t }) => {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow reveal">{t.hero.eyebrow}</div>
          <h1 className="display reveal" data-delay="1">
            {t.hero.title1}<br/>
            <span className="accent">{t.hero.title2}</span><br/>
            <span className="stroke">{t.hero.title3}</span>
          </h1>
          <p className="hero-sub reveal" data-delay="2">{t.hero.sub}</p>
          <div className="hero-ctas reveal" data-delay="3">
            <span className="store-btn coming-soon" aria-disabled="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 12.5c0-2.7 2.2-4 2.3-4-1.3-1.8-3.2-2.1-3.9-2.1-1.7-.2-3.2 1-4.1 1-.9 0-2.2-1-3.6-.9-1.8 0-3.5 1.1-4.5 2.7-1.9 3.3-.5 8.2 1.4 10.9.9 1.3 2 2.8 3.5 2.8 1.4-.1 1.9-.9 3.6-.9 1.7 0 2.2.9 3.6.9 1.5 0 2.5-1.3 3.4-2.7 1.1-1.5 1.5-3 1.5-3.1-.1 0-2.9-1.1-2.9-4.4zm-2.7-8.1c.8-.9 1.3-2.2 1.1-3.4-1.1.1-2.4.7-3.2 1.6-.7.8-1.4 2.1-1.2 3.3 1.2.1 2.4-.6 3.3-1.5z"/></svg>
              <div><span className="store-label">App Store</span><span className="store-name">Coming soon</span></div>
            </span>
            <span className="store-btn coming-soon" aria-disabled="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.4c-.4.4-.6 1-.6 1.7v15.8c0 .7.2 1.3.6 1.7l11.5-11.6L3.6 2.4zm12.6 8.3 3.2-1.9c1-.6 1-2 0-2.6L16.1 4.4l-3.6 3.6 3.7 2.7zm-2.1 1.2L4.8 21.3c.3.1.7.1 1 0l11-6.3-3.7-3.1zm-9.3 9.8 8.7-8.7L4.8 4.4v17.3z"/></svg>
              <div><span className="store-label">Google Play</span><span className="store-name">Coming soon</span></div>
            </span>
          </div>
        </div>
        <div className="phone-stage reveal" data-delay="2">
          <div className="phone-glow"></div>
          <Phone />
          <div className="float-card top-l">
            <div className="ic"><Icon name="trophy" size={20} /></div>
            <div><div className="t">{t.hero.floats.score}</div><div className="v"><span className="em">500</span> · #2 global</div></div>
          </div>
          <div className="float-card mid-l">
            <div className="ic amber"><Icon name="star" size={20} /></div>
            <div><div className="t">{t.hero.floats.tier}</div><div className="v">+128 pts this month</div></div>
          </div>
          <div className="float-card bottom-r">
            <div className="ic"><Icon name="shield" size={20} /></div>
            <div><div className="t">Badge unlocked</div><div className="v">{t.hero.floats.skill}</div></div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CountUp = ({ end, dur = 1600 }) => {
  const [n, setN] = uS(0);
  const ref = uR(null);
  uE(() => {
    let started = false;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const t0 = performance.now();
        const tick = (now) => {
          const p = Math.min(1, (now - t0) / dur);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(end * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [end]);
  return <span ref={ref}>{n.toLocaleString()}</span>;
};

/* ============ PILLARS ============ */
const PillarArt = ({ kind }) => {
  // SVG silhouettes — stylized, monochrome, on dark
  if (kind === 'log') {
    return (
      <svg viewBox="0 0 200 130" style={{width:'100%', height:'100%'}}>
        <defs>
          <linearGradient id="lg1" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stopColor="#10B981" stopOpacity="0.3"/><stop offset="1" stopColor="#10B981" stopOpacity="0"/></linearGradient>
        </defs>
        {[8,16,12,24,18,32,28,40,36,46].map((h,i) => (
          <rect key={i} x={i*18 + 12} y={110 - h*2} width="10" height={h*2} rx="2" fill="url(#lg1)" stroke="#10B981" strokeWidth="1"/>
        ))}
        <path d="M12 50 Q60 30 100 40 T188 22" stroke="#10B981" strokeWidth="1.5" fill="none" strokeDasharray="3 3"/>
        <circle cx="188" cy="22" r="4" fill="#10B981"/>
      </svg>
    );
  }
  if (kind === 'map') {
    return (
      <svg viewBox="0 0 200 130" style={{width:'100%', height:'100%'}}>
        {[...Array(7)].map((_,r) => (
          <line key={'h'+r} x1="0" y1={r*20} x2="200" y2={r*20} stroke="#1F2937" strokeWidth="1"/>
        ))}
        {[...Array(11)].map((_,c) => (
          <line key={'v'+c} x1={c*20} y1="0" x2={c*20} y2="130" stroke="#1F2937" strokeWidth="1"/>
        ))}
        <path d="M0 70 Q40 50 80 65 T160 60 L200 75" stroke="#10B981" strokeWidth="1.5" fill="none" strokeDasharray="4 4" opacity="0.5"/>
        {[[40,40],[110,60],[60,90],[150,30],[170,90]].map(([x,y],i)=>(
          <g key={i}>
            <circle cx={x} cy={y} r="10" fill="#10B981" opacity="0.15"/>
            <circle cx={x} cy={y} r="4" fill="#10B981"/>
          </g>
        ))}
        <circle cx="110" cy="60" r="14" fill="none" stroke="#10B981" strokeWidth="1.5"/>
      </svg>
    );
  }
  if (kind === 'cert') {
    return (
      <svg viewBox="0 0 200 130" style={{width:'100%', height:'100%'}}>
        <circle cx="100" cy="65" r="48" fill="none" stroke="#374151" strokeWidth="1.5" strokeDasharray="3 5"/>
        <circle cx="100" cy="65" r="48" fill="none" stroke="#10B981" strokeWidth="2.5" strokeDasharray={`${2*Math.PI*48*0.62} ${2*Math.PI*48}`} transform="rotate(-90 100 65)" strokeLinecap="round"/>
        <path d="M88 65 l8 8 16-18" stroke="#10B981" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="100" cy="65" r="22" fill="none" stroke="#10B981" strokeWidth="1" opacity="0.4"/>
      </svg>
    );
  }
  if (kind === 'board') {
    return (
      <svg viewBox="0 0 200 130" style={{width:'100%', height:'100%'}}>
        {[
          {y:30, w:160, c:'#F59E0B', n:1},
          {y:55, w:140, c:'#10B981', n:2},
          {y:80, w:115, c:'#9CA3AF', n:3},
          {y:105, w:90, c:'#6B7280', n:4},
        ].map((b,i)=>(
          <g key={i}>
            <text x="0" y={b.y+5} fill={b.c} fontSize="10" fontWeight="700" fontFamily="monospace">#{b.n}</text>
            <rect x="22" y={b.y-7} width={b.w} height="14" rx="3" fill="#1F2937"/>
            <rect x="22" y={b.y-7} width={b.w*0.7} height="14" rx="3" fill={b.c} opacity="0.4"/>
            <circle cx="32" cy={b.y} r="4" fill={b.c}/>
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'coach') {
    return (
      <svg viewBox="0 0 200 130" style={{width:'100%', height:'100%'}}>
        <circle cx="100" cy="65" r="38" fill="none" stroke="#10B981" strokeWidth="1.5" opacity="0.3"/>
        <circle cx="100" cy="65" r="22" fill="none" stroke="#10B981" strokeWidth="1.5" opacity="0.5"/>
        <circle cx="100" cy="65" r="10" fill="#10B981" opacity="0.2"/>
        <circle cx="100" cy="65" r="4" fill="#10B981"/>
        {[0,72,144,216,288].map((a,i)=>{
          const rad = a * Math.PI / 180;
          const x = 100 + Math.cos(rad)*52;
          const y = 65 + Math.sin(rad)*52;
          return <g key={i}>
            <line x1="100" y1="65" x2={x} y2={y} stroke="#10B981" strokeWidth="0.6" opacity="0.4"/>
            <circle cx={x} cy={y} r="3" fill="#10B981"/>
          </g>;
        })}
        <text x="100" y="125" textAnchor="middle" fill="#9CA3AF" fontSize="8" fontFamily="monospace" letterSpacing="2">14·DAY·ANALYSIS</text>
      </svg>
    );
  }
};

const Pillars = ({ t }) => {
  const items = [
    { kind:'log',   k:'logging', span:3, num:'01' },
    { kind:'map',   k:'map',     span:3, num:'02' },
    { kind:'cert',  k:'cert',    span:2, num:'03' },
    { kind:'board', k:'board',   span:2, num:'04' },
    { kind:'coach', k:'coach',   span:2, num:'05' },
  ];
  return (
    <section id="features">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">{t.pillars.eyebrow}</div>
          <h2 className="display">{t.pillars.title}</h2>
          <p>{t.pillars.sub}</p>
        </div>
        <div className="pillars-grid">
          {items.map((it, i) => (
            <div key={it.k} className={`pillar span-${it.span} reveal`} data-delay={i+1}>
              <div>
                <span className="pillar-num">{it.num} / 05</span>
                <h3>{t.pillars[it.k].name}</h3>
                <p>{t.pillars[it.k].desc}</p>
              </div>
              <div className="pillar-art"><PillarArt kind={it.kind} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ SCORE ============ */
const Score = ({ t }) => {
  const ref = uR(null);
  const [animate, setAnimate] = uS(false);
  uE(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setAnimate(true);
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const R = 130;
  const C = 2 * Math.PI * R;
  const segs = [
    { p: 0.60, color: 'var(--emerald)' },
    { p: 0.20, color: 'var(--blue)' },
    { p: 0.20, color: 'var(--violet)' },
  ];
  let offset = 0;
  return (
    <section id="score" className="score-section" ref={ref}>
      <div className="wrap">
        <div className="score-grid">
          <div className="reveal">
            <div className="eyebrow">{t.score.eyebrow}</div>
            <h2 className="display" style={{fontSize:'clamp(36px,5vw,56px)', margin:'16px 0'}}>{t.score.title}</h2>
            <p style={{color:'var(--text-4)', fontSize:17, marginBottom:32, maxWidth:520}}>{t.score.sub}</p>
            <div className="score-breakdown">
              {[
                { name: t.score.physical, pct: 60, color:'var(--emerald)', desc: t.score.phys_desc },
                { name: t.score.explor, pct: 20, color:'var(--blue)', desc: t.score.expl_desc },
                { name: t.score.skills, pct: 20, color:'var(--violet)', desc: t.score.skill_desc },
              ].map((b,i) => (
                <div key={i} className="bd-row">
                  <div className="bd-head">
                    <div className="bd-name">
                      <span className="bd-dot" style={{background:b.color}}></span>{b.name}
                    </div>
                    <div className="bd-pct" style={{color:b.color}}>{b.pct}%</div>
                  </div>
                  <div className="bd-bar">
                    <div className="bd-fill" style={{width: animate ? `${b.pct}%` : '0%', background:b.color, transitionDelay: `${i*0.15}s`}}></div>
                  </div>
                  <div className="bd-desc">{b.desc}</div>
                </div>
              ))}
            </div>
            <div className="mono" style={{marginTop:32, padding:'14px 18px', background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:10, fontSize:13, color:'var(--text-3)'}}>
              {t.score.formula}
            </div>
          </div>
          <div className="reveal" data-delay="2">
            <div className="score-visual">
              <svg viewBox="0 0 360 360" style={{width:'100%', height:'100%'}}>
                <circle cx="180" cy="180" r={R} fill="none" stroke="var(--bg-2)" strokeWidth="32"/>
                {segs.map((s, i) => {
                  const len = C * s.p;
                  const dashoffset = -offset;
                  offset += len;
                  return (
                    <circle key={i} cx="180" cy="180" r={R} fill="none"
                      stroke={s.color} strokeWidth="32" strokeLinecap="round"
                      strokeDasharray={`${animate ? len-4 : 0} ${C}`}
                      strokeDashoffset={dashoffset}
                      transform="rotate(-90 180 180)"
                      style={{transition: `stroke-dasharray 1.6s cubic-bezier(.34,1.5,.5,1) ${i*0.2}s`}}
                    />
                  );
                })}
              </svg>
              <div className="score-center">
                <div>
                  <div className="big"><CountUp end={500} dur={2000} /></div>
                  <div className="label">Score Onbars</div>
                  <div className="tier">★ Advanced</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="tier-ladder reveal">
          {[
            {k:'beg', range:'0–119', color:'#6B7280', fill:0.15},
            {k:'int', range:'120–299', color:'#10B981', fill:0.45},
            {k:'adv', range:'300–519', color:'#F59E0B', fill:0.85},
            {k:'elite', range:'520+', color:'#EF4444', fill:1.0},
          ].map((s,i) => (
            <div key={s.k} className="tier-step">
              <div className="name" style={{color: s.color}}>{t.score.tiers[s.k]}</div>
              <div className="range">{s.range} PTS</div>
              <div className="bar"><i style={{width: animate ? `${s.fill*100}%` : '0%', background: s.color, transition:`width 1.5s ease ${0.4+i*0.1}s`}}></i></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.Pillars = Pillars;
/* ============ APP INTRO ============ */
const AppIntro = ({ t }) => (
  <section className="app-intro">
    <div className="wrap app-intro-wrap">
      <p className="app-intro-l1 reveal">{t.appIntro.line1}</p>
      <p className="app-intro-l2 reveal" data-delay="1">{t.appIntro.line2}</p>
      <p className="app-intro-l3 reveal" data-delay="2">{t.appIntro.line3}</p>
    </div>
  </section>
);

window.AppIntro = AppIntro;
window.Score = Score;
window.CountUp = CountUp;