/* Deep-dive section components — one per feature */

const DDPoint = ({ label, text, color = 'var(--emerald)' }) =>
<div className="dd-point">
    <div className="dd-point-l" style={{ color }}>{label}</div>
    <div className="dd-point-t">{text}</div>
  </div>;


const DeepDive = ({ id, icon, eyebrow, title, sub, problem, solution, why, mockups, reverse, accent = 'var(--emerald)', children, noMockups }) =>
<section id={id} className="deep-dive" data-reverse={reverse} data-no-mockups={noMockups ? 'true' : 'false'}>
    <div className="wrap">
      <div className="dd-header reveal">
        <div className="dd-icon" style={{ color: accent, background: accent + '12' }}>
          <Icon name={icon} size={36} color={accent} />
        </div>
        <div>
          <div className="eyebrow" style={{ color: accent }}>{eyebrow}</div>
          <h2 className="display dd-title">{title}</h2>
          {sub && <p className="dd-sub">{sub}</p>}
        </div>
      </div>
      <div className="dd-grid">
        <div className="dd-copy reveal" data-delay="1">
          <DDPoint label="WHAT IT SOLVES" text={problem} color={accent} />
          <DDPoint label="HOW IT WORKS" text={solution} color={accent} />
          <DDPoint label="WHY IT MATTERS" text={why} color={accent} />
          {children}
        </div>
        {!noMockups && (
          <div className="dd-phones reveal" data-delay="2">
            {mockups}
          </div>
        )}
      </div>
    </div>
  </section>;


/* ============ FEATURES OVERVIEW (replaces old Pillars) ============ */
const FeaturesOverview = ({ t }) => {
  const items = [
  { n: '01', k: 'compete', name: 'Compete', icon: 'trophy', desc: 'Global leaderboard. Filter, compare, drill into any athlete.', color: '#F59E0B', href: '#compete' },
  { n: '02', k: 'map', name: 'Map', icon: 'map', desc: 'Every bar in your city. Validated, rated, live check-ins.', color: '#10B981', href: '#map' },
  { n: '03', k: 'workout', name: 'Workout', icon: 'barbell', desc: 'Log every set, rep, weight, rest. The whole calisthenics tree.', color: '#3B82F6', href: '#workout' },
  { n: '04', k: 'gtw', name: 'Get to Work', icon: 'play', desc: 'Pick a routine. Run it live with auto rest timer and live stats.', color: '#EC4899', href: '#gtw' },
  { n: '05', k: 'analyze', name: 'Analyze', icon: 'chart', desc: '14-day deep read on your strengths, gaps, and what to fix next.', color: '#8B5CF6', href: '#analyze' },
  { n: '06', k: 'profile', name: 'Profile', icon: 'person', desc: 'Score, tier, certifications, badges — your athlete identity.', color: '#10B981', href: '#profile-public' }];

  return (
    <section id="features">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">Six tabs · one app</div>
          <h2 className="display">Everything a calisthenics athlete actually needs.</h2>
          <p>No bloat. No social-media tropes. Six tabs that work the way you train on bars.</p>
        </div>
        <div className="feat-grid">
          {items.map((it, i) =>
          <a key={it.k} href={it.href} className="feat-card reveal" data-delay={i % 3 + 1} style={{ '--c': it.color }}>
              <div className="feat-top">
                <div className="feat-icon" style={{ color: it.color, background: it.color + '15' }}>
                  <Icon name={it.icon} size={20} />
                </div>
                <div className="feat-num">{it.n} / 06</div>
              </div>
              <h3>{it.name}</h3>
              <p>{it.desc}</p>
              <div className="feat-link">
                Deep-dive
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

};

/* ============ COMPETE ============ */
const CompeteDeepDive = () =>
<DeepDive
  id="compete"
  icon="trophy"
  eyebrow="Compete tab"
  title={<>The leaderboard <span className="dd-accent" style={{ color: '#F59E0B' }}>that actually helps you train.</span></>}
  sub="Global ranking by Onbars Score, sliced down to athletes who actually look like you."
  problem="Global leaderboards are generic. You don't know who to compare yourself to — and seeing #1 with 800 pts says nothing about the people training at your level."
  solution="Filter by tier and by exercise. Search anyone by name. Toggle 'certified only' to hide unverified scores. Tap a profile to see their exact stats, exercise levels, badges, and certification videos."
  why="Fair competition. You train smarter, not just harder — and you find the athletes 50 points above you to chase."
  accent="#F59E0B"
  mockups={<>
    <FloatingMockup src="uploads/01_compete_leaderboard.png" tilt={-3} label="LEADERBOARD — FILTERED" />
    <FloatingMockup src="uploads/20_profile_stats_sofia_garcia.png" tilt={3} label="PROFILE DRILL-DOWN" />
  </>}>
    <div className="dd-section-sub">REAL FILTERS</div>
    <div className="dd-tags">
      <span className="dd-tag">Tier · All / Beginner / Intermediate / Advanced / Elite</span>
      <span className="dd-tag">Exercise · Global / Pull-ups / Dips / Push-ups</span>
      <span className="dd-tag">Certified only</span>
      <span className="dd-tag">Search by name</span>
    </div>
  </DeepDive>;


/* ============ MAP ============ */
const MapDeepDive = () =>
<DeepDive
  id="map"
  icon="map"
  eyebrow="Map tab"
  title={<>Find the bar. <span className="dd-accent">See who's already on it.</span></>}
  sub="Every street workout park in your city, color-coded by status, with live check-ins from the community."
  problem="Calisthenics happens outdoors. Most fitness apps assume you're indoors. You don't know which park has a dip bar, who's training there now, or if the rings are still up."
  solution="Map view shows every park as a status pin. Open the filters panel to narrow by equipment — pull-up bar, dips, parallel bars, rings — by rating, or by distance. Add a new park by tapping the map and dropping a pin."
  why="The community owns the map. If your neighbourhood's spot doesn't exist, add it. If the rings disappeared, report it. The app is only as good as the athletes who feed it."
  accent="#10B981"
  mockups={
    <MockupCarousel
      tilt={-2}
      interval={3000}
      label="MAP · ADD PARK · FILTERS"
      images={[
        { src: 'uploads/02_map_04_map_add_park.png', wide: true },
        'uploads/03_map_filters_panel.png',
      ]}
    />
  }>
    <div className="dd-legend-row">
      <div className="dd-legend-item"><span className="dot" style={{ background: '#10B981' }}></span><div><div className="l">Green</div><div className="s">Validated by 3+ users</div></div></div>
      <div className="dd-legend-item"><span className="dot" style={{ background: '#3B82F6' }}></span><div><div className="l">Blue</div><div className="s">New · awaiting validation</div></div></div>
      <div className="dd-legend-item"><span className="dot" style={{ background: '#F59E0B' }}></span><div><div className="l">Yellow</div><div className="s">Active community report</div></div></div>
    </div>
  </DeepDive>;


/* ============ WORKOUT ============ */
const WorkoutDeepDive = () =>
<DeepDive
  id="workout"
  icon="barbell"
  eyebrow="Workout tab"
  title={<>Log it. <span className="dd-accent" style={{ color: '#3B82F6' }}>All of it.</span> Every set.</>}
  sub="Built around the actual calisthenics movement tree."
  problem="Generic fitness apps don't know what a tuck front lever is. They certainly don't track L-sit holds, archer pull-ups, or muscle-up progressions. You end up with a notes app."
  solution="Create a routine, pick exercises from the calisthenics library, set sets / reps / weight / rest. Save it, reuse it, edit it. Every routine is yours."
  why="Progression is the whole point. When you see your pull-up max go from 8 to 12 over 8 weeks, in actual numbers, you stop chasing dopamine and start chasing strength."
  accent="#3B82F6"
  mockups={
    <MockupCarousel
      tilt={-2}
      interval={3000}
      label="WORKOUT CREATION FLOW"
      images={[
        { src: 'uploads/07_workout_08_workout_filled.png', wide: true },
        'uploads/08_workout_create_form_filled.png',
      ]}
    />
  }>
    <div className="dd-section-sub">EXERCISES IN THE APP — ORGANIZED BY MOVEMENT FAMILY</div>
    <div className="dd-tags">
      <span className="dd-tag">Push · Push-ups · Dips · Handstand Push-ups</span>
      <span className="dd-tag">Pull · Pull-ups · Muscle-ups · Australian Pull-ups</span>
      <span className="dd-tag">Leg · Squats · Pistol Squats</span>
      <span className="dd-tag">Core · L-Sit · Leg Raise</span>
      <span className="dd-tag">Static · Handstand · Plank · Planche (Full / Tuck / One-leg) · Front Lever (Full / Tuck / One-leg) · Human Flag</span>
      <span className="dd-tag">Cardio · Running · Jump Rope</span>
    </div>
  </DeepDive>;


/* ============ GET TO WORK ============ */
const GTWDeepDive = () =>
<DeepDive
  id="gtw"
  icon="play"
  eyebrow="Get to Work tab"
  title={<>Hit play. <span className="dd-accent" style={{ color: '#EC4899' }}>Train.</span> Log nothing manually.</>}
  sub="Pick one of your saved routines. The app runs the session for you — sets, rest timer, location, stats."
  problem="During a session you don't want to type. Reps, weight, rest — every tap breaks the rhythm. And tracking it after the fact means half of it gets lost."
  solution="Pick a routine. Choose Home or Park. Hit Start. The app counts sets, fires the rest timer between them, lets you skip rest, pause, or end early. At the end you get duration, total sets, total rest time — saved automatically."
  why="Less friction during the workout. More signal after. The data shows up on Analyze and Profile without you ever opening a notes app."
  accent="#EC4899"
  mockups={
    <MockupCarousel
      tilt={2}
      interval={3000}
      label="LIVE WORKOUT · REST · IN PROGRESS"
      images={[
        { src: 'uploads/10_11_12_workout_flow.png', wide: true },
        'uploads/11_workout_rest_timer_active.png',
        'uploads/12_workout_in_progress.png',
      ]}
    />
  }>
    <div className="dd-section-sub">WHAT IT TRACKS LIVE</div>
    <div className="dd-tags">
      <span className="dd-tag">Set counter</span>
      <span className="dd-tag">Auto rest timer</span>
      <span className="dd-tag">Skip / Pause / End</span>
      <span className="dd-tag">Location · Home / Park</span>
      <span className="dd-tag">Total duration</span>
      <span className="dd-tag">Total rest time</span>
    </div>
  </DeepDive>;


/* ============ ANALYZE ============ */
const AnalyzeDeepDive = () =>
<DeepDive
  id="analyze"
  icon="chart"
  eyebrow="Analyze tab"
  title={<>The honest mirror. <span className="dd-accent" style={{ color: '#8B5CF6' }}>14 days. No flattery.</span></>}
  sub="An AI read of your last two weeks — strengths, gaps, and the next move."
  problem="Logging is just data until something reads it. You can train hard for two weeks and never notice you haven't done a push movement, or that your volume dropped 30%."
  solution="The AI scans your last 14 days of logged workouts. Surfaces 2-3 strengths (volume up, consistency), 2-3 weaknesses (push:pull imbalance, missing legs, plateaued movement), and one recommended focus block for the next 14 days."
  why="Progress isn't linear. The patterns that quietly kill it — imbalance, skipped sessions, lazy progression — only show up when something else is paying attention."
  accent="#8B5CF6"
  noMockups />;


/* ============ PROFILE — PUBLIC ============ */
const ProfilePublicDeepDive = ({ t }) =>
<DeepDive
  id="profile-public"
  icon="person"
  eyebrow="Profile · Public view"
  title={<>Your athlete identity. <span className="dd-accent">Earned, not edited.</span></>}
  sub="What other athletes see when they open your profile. Score, tier, badges, followers — all evidence-based."
  problem="Most fitness profiles are vanity surfaces — a photo, a bio, a fake streak. Yours should be evidence. Numbers other athletes can interpret in 2 seconds."
  solution="A public page showing your Onbars score, tier, verified stats, skill badges, certifications, and followers. Anyone can tap to compare themselves to you, or follow to track your progress."
  why="When another athlete opens your profile, they should see exactly what you can do — and what you've proven. No filters, no padding, no shortcuts."
  accent="#10B981"
  mockups={
    <MockupCarousel
      tilt={-2}
      interval={3000}
      label="PUBLIC PROFILE · FOLLOWERS"
      images={[
        'uploads/20_profile_stats_sofia_garcia.png',
        'uploads/22_profile_followers_sofia_garcia.png',
      ]}
    />
  } />;

/* ============ PROFILE — DASHBOARD / SCORE ANALYSIS ============ */
const ProfileDashboardDeepDive = ({ t }) =>
<DeepDive
  id="profile-dashboard"
  icon="chart"
  eyebrow="Profile · Your dashboard"
  title={<>Inside your profile. <span className="dd-accent">The full score read-out.</span></>}
  sub="What you see when it's your own profile — score breakdown, evolution, history. The numbers behind the number."
  problem="A single score on a card tells you where you stand, but not why. You need to see what's driving it, what's stalling, and what's moved in the last weeks."
  solution="Tap your score to open the full breakdown: 60% Physical, 20% Exploration, 20% Skills — with the exact points coming from each. See your score evolution over time and the full history of every event that moved it."
  why="Progress only sticks when you can read it. The dashboard turns a score into a story — and tells you the next move."
  accent="#10B981"
  mockups={
    <MockupCarousel
      tilt={2}
      interval={3000}
      label="MY STATS · BREAKDOWN · EVOLUTION · HISTORY"
      images={[
        'uploads/14_profile_score_breakdown.png',
        'uploads/15_profile_score_evolution.png',
        'uploads/18_score_evolution_history.png',
        'uploads/14_18_profile_score_combined.png'
      ]}
    />
  }>
    <div className="dd-formula">
      <span className="f-label">Score formula</span>
      <code>S = (0.6 × Physical) + (0.2 × Exploration) + (0.2 × Skills)</code>
    </div>
  </DeepDive>;


/* ============ CERT vs BADGE — SIDE BY SIDE ============ */
const CertVsBadge = () =>
<section id="cert-vs-badge">
    <div className="wrap">
      <div className="section-head reveal">
        <div className="eyebrow">The two systems</div>
        <h2 className="display">Certifications <span style={{ color: 'var(--text-5)' }}>≠</span> Badges.</h2>
        <p>Two different ways to prove what you can do. People mix them up. Here's the difference, once and for all.</p>
      </div>
      <div className="cvb-grid">
        <div className="cvb-col reveal" data-comment-anchor="265cb8a374-div-249-9">
          <div className="cvb-tag" style={{ color: '#10B981', background: '#10B98115' }}>● CERTIFICATIONS</div>
          <h3>Prove your stats.</h3>
          <p className="cvb-lead">Upload one video per exercise. The community sees proof your numbers are real.</p>
          <ul className="cvb-list">
            <li><span className="l">PURPOSE</span> Validate the stats on your profile (pull-ups, dips, push-ups)</li>
            <li><span className="l">FORMAT</span> One video per exercise · publicly viewable</li>
            <li><span className="l">VALIDATION</span> AI counts reps + scores amplitude and confidence</li>
            <li><span className="l">TIERS</span> <span style={{ color: '#10B981' }}>● Green</span> (amplitude ≥60%, confidence ≥70%) · <span style={{ color: '#F59E0B' }}>● Gold</span> (≥80% / ≥85%)</li>
            <li><span className="l">RESULT</span> Trust badge next to your number. Anyone can re-watch.</li>
          </ul>
          <div className="cvb-example">
            <span className="ex-l">EXAMPLE</span>
            You claim 23 pull-ups. Upload video. AI scores it Green. Number on profile shows ● 23.
          </div>
        </div>
        <div className="cvb-col reveal" data-delay="1">
          <div className="cvb-tag" style={{ color: '#F59E0B', background: '#F59E0B15' }}>● BADGES</div>
          <h3>Prove the skill.</h3>
          <p className="cvb-lead">Submit a video of a hard skill. Advanced & Elite athletes watch and vote.</p>
          <ul className="cvb-list">
            <li><span className="l">PURPOSE</span> Reward mastery of specific skills</li>
            <li><span className="l">SKILLS</span> Planche · Front Lever · Back Lever · Human Flag · Handstand · Muscle-up</li>
            <li><span className="l">VALIDATION</span> Community vote — only Advanced & Elite tier athletes can vote</li>
            <li><span className="l">THRESHOLD</span> 60% approval minimum · 10+ votes required</li>
            <li><span className="l">REWARD</span> +50 pts to Skills score · badge on profile + leaderboard</li>
          </ul>
          <div className="cvb-example">
            <span className="ex-l">EXAMPLE</span>
            Film a 5-second front lever hold. Submit. 15 Elite athletes watch. 10 approve → badge awarded.
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ============ CERT DEEP-DIVE ============ */
const CertDeepDive = () =>
<DeepDive
  id="certification"
  icon="shield"
  eyebrow="Certifications"
  title={<>Your stats, <span className="dd-accent">on tape.</span></>}
  sub="Upload one video per main exercise. The community sees the proof. The AI scores the form."
  problem="Anyone can write '20 pull-ups' on a profile. There's a reason most fitness leaderboards are noise — nothing is verified."
  solution="Upload one video for each main lift (pull-ups, dips, push-ups). The AI counts reps, measures amplitude, scores confidence. Hits Green tier → your number is verified. Hits Gold → it's locked in elite territory."
  why="The leaderboard means something. So does your profile. Everyone above you posted the same proof."
  accent="#10B981"
  mockups={
    <MockupCarousel
      tilt={2}
      interval={3000}
      label="SCORE · BREAKDOWN · EVOLUTION"
      images={[
        { src: 'uploads/14_18_profile_score_combined.png', wide: true },
        'uploads/14_profile_score_breakdown.png',
        'uploads/15_profile_score_evolution.png',
        'uploads/18_score_evolution_history.png',
      ]}
    />
  }>
    <div className="dd-tier-row">
      <div className="dd-tier" style={{ borderColor: '#10B98155' }}>
        <div className="t-tag" style={{ color: '#10B981' }}>● GREEN TIER</div>
        <div className="t-cond">Amplitude ≥ 60% · Confidence ≥ 70%</div>
        <div className="t-out">Stat verified · public proof</div>
      </div>
      <div className="dd-tier" style={{ borderColor: '#F59E0B55' }}>
        <div className="t-tag" style={{ color: '#F59E0B' }}>● GOLD TIER</div>
        <div className="t-cond">Amplitude ≥ 80% · Confidence ≥ 85%</div>
        <div className="t-out">Elite-form · top-tier visual</div>
      </div>
    </div>
  </DeepDive>;


/* ============ BADGE DEEP-DIVE ============ */
const BadgeDeepDive = () =>
<DeepDive
  id="badges"
  icon="star"
  eyebrow="Skill Badges"
  title={<>Voted by the <span className="dd-accent" style={{ color: '#F59E0B' }}>athletes above you.</span></>}
  sub="Film a skill. Submit. Advanced and Elite athletes watch — and decide whether you earned it."
  problem="Skills are subjective. AI can count a pull-up, but it can't tell you if your front lever was actually horizontal. Trust has to come from athletes who can already do it."
  solution="Submit your skill video. Only Advanced and Elite-tier athletes can vote. Minimum 10 votes. 60% approval threshold. If your form holds up under peer review, the badge is yours — and it's worth +50 pts to your Skills score."
  why="A peer-validated badge is the only credential that matters in this sport. Anyone can mint a digital trophy. Not anyone can convince 10 Elite athletes their front lever counts."
  accent="#F59E0B"
  noMockups>
    <div className="badge-skill-row">
      {[
    { n: 'Muscle-up', c: '#10B981' },
    { n: 'Front Lever', c: '#F59E0B' },
    { n: 'Back Lever', c: '#F59E0B' },
    { n: 'Human Flag', c: '#F59E0B' },
    { n: 'Handstand', c: '#8B5CF6' },
    { n: 'Planche', c: '#EC4899' }].
    map((b, i) =>
    <div key={i} className="bsr" style={{ borderColor: b.c + '55' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: b.c }}></span>
          <span>{b.n}</span>
        </div>
    )}
    </div>
  </DeepDive>;


window.FeaturesOverview = FeaturesOverview;
window.CompeteDeepDive = CompeteDeepDive;
window.MapDeepDive = MapDeepDive;
window.WorkoutDeepDive = WorkoutDeepDive;
window.GTWDeepDive = GTWDeepDive;
window.AnalyzeDeepDive = AnalyzeDeepDive;
window.ProfilePublicDeepDive = ProfilePublicDeepDive;
window.ProfileDashboardDeepDive = ProfileDashboardDeepDive;
window.CertVsBadge = CertVsBadge;
window.CertDeepDive = CertDeepDive;
window.BadgeDeepDive = BadgeDeepDive;