// Practivo — middle sections: Problem, Solution, How It Works, Who It's For
const { useState: useState2, useEffect: useEffect2 } = React;

/* ---------- Section shell ---------- */
const Section = ({ id, dark, light, children, style }) => (
  <section id={id} className={`pv-section ${dark ? 'pv-section--dark' : ''} ${light ? 'pv-section--light' : ''}`} style={style}>
    <div className="pv-container">{children}</div>
  </section>
);

const SectionHeader = ({ eyebrow, title, lead, align = 'left', dark }) => (
  <div style={{ maxWidth: 760, marginBottom: 60, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0, textAlign: align }}>
    {eyebrow && <span className="pv-eyebrow" style={align === 'center' ? { justifyContent: 'center' } : null}>{eyebrow}</span>}
    <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', lineHeight: 1.1, color: dark ? '#fff' : '#0B1220', marginBottom: lead ? 20 : 0, letterSpacing: '-0.02em' }}>{title}</h2>
    {lead && <p style={{ fontSize: 19, lineHeight: 1.6, color: dark ? 'rgba(255,255,255,.72)' : 'var(--pv-ink-600)', marginTop: 8 }}>{lead}</p>}
  </div>
);

/* ---------- Problem ---------- */
const ProblemSection = () => (
  <Section id="problem">
    <SectionHeader
      eyebrow="The honest answer"
      title="Your clients are asking if AI can replace you. Here is the honest answer."
    />
    <div className="pv-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
      {[
        {
          icon: <Icon.Repeat />,
          title: 'AI handles repetition. You handle people.',
          body: 'Practicing a scenario 10 times with a human trainer is expensive and exhausting for both sides. AI does the repetitive work. You do what AI cannot — read the room, challenge assumptions, build confidence in a real human being.',
        },
        {
          icon: <Icon.Clock />,
          title: 'Workshops end before the skill is formed',
          body: 'One or two days is not enough to build a lasting skill. Without structured practice between sessions, most of what you taught is gone within a week.',
        },
        {
          icon: <Icon.BarChart />,
          title: 'Clients want proof, not impressions',
          body: '"The session went well" is not enough anymore. Buyers want data. Who improved? By how much? What still needs work?',
        },
      ].map((c, i) => (
        <div key={i} style={{ borderTop: '2px solid var(--pv-accent)', paddingTop: 28 }}>
          <div style={{ width: 48, height: 48, color: 'var(--pv-accent)', marginBottom: 20, display: 'grid', placeItems: 'start' }}>
            {React.cloneElement(c.icon, { width: 40, height: 40 })}
          </div>
          <h3 style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.25, color: '#0B1220', marginBottom: 14 }}>{c.title}</h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--pv-ink-700)' }}>{c.body}</p>
        </div>
      ))}
    </div>
    <div style={{
      marginTop: 80,
      padding: '28px 36px',
      borderLeft: '3px solid var(--pv-accent)',
      background: 'var(--pv-surface)',
      fontFamily: 'var(--pv-font-heading)',
      fontWeight: 500,
      fontSize: 20,
      lineHeight: 1.45,
      color: '#0B1220',
      maxWidth: 820,
    }}>
      Practivo handles the practice and the measurement. You stay focused on the work only a trainer can do.
    </div>
  </Section>
);

/* ---------- Solution ---------- */
const SolutionSection = () => (
  <Section id="solution" light>
    <SectionHeader
      eyebrow="The solution"
      title="Your training, extended — with AI practice and hard evidence of results"
    />
    <div className="pv-grid-solution" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {[
          {
            n: '01',
            icon: <Icon.MessageSquare />,
            title: 'AI takes over the repetitive part',
            body: 'Between your sessions, participants practice real conversations with an AI avatar. Same quality every time, available whenever they need it, no extra cost per session.',
          },
          {
            n: '02',
            icon: <Icon.Sparkle />,
            title: 'Skills get formed, not just introduced',
            body: 'Learners repeat scenarios until they stick. You set up the practice environment once — around your content, isolated per client. They keep practicing on their own.',
          },
          {
            n: '03',
            icon: <Icon.FileText />,
            title: 'You walk into every client meeting with data',
            body: 'Practivo generates structured evaluation reports after each practice phase. Progress over time, skill gaps, what improved. Evidence your client can read and trust.',
          },
        ].map((c, i) => (
          <div key={i} className="pv-sol-card" style={{
            display: 'grid', gridTemplateColumns: '72px 1fr', gap: 24,
            padding: '28px 0',
            borderBottom: i < 2 ? '1px solid var(--pv-line)' : 'none',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 13, fontWeight: 600, letterSpacing: '.14em', color: 'var(--pv-accent)', marginBottom: 10 }}>{c.n}</div>
              <div style={{ width: 40, height: 40, color: '#0B1220' }}>{React.cloneElement(c.icon, { width: 40, height: 40 })}</div>
            </div>
            <div style={{ minWidth: 0 }}>
              <h3 style={{ fontSize: 22, fontWeight: 700, color: '#0B1220', marginBottom: 10, textWrap: 'pretty' }}>{c.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--pv-ink-700)' }}>{c.body}</p>
            </div>
          </div>
        ))}
      </div>

      {/* Report mock */}
      <ReportMock />
    </div>

    {/* Pull-quote — full width, outside the grid so it stays prominent on mobile */}
    <p style={{
      marginTop: 64, fontFamily: 'var(--pv-font-heading)',
      fontWeight: 500, fontSize: 22, lineHeight: 1.4, color: '#0B1220', maxWidth: 720,
      paddingLeft: 24, borderLeft: '3px solid var(--pv-accent-2)',
    }}>
      You bring the human expertise. Practivo brings the scale and the proof.
    </p>
  </Section>
);

const ReportMock = () => (
  <div className="pv-report-sticky" style={{ position: 'sticky', top: 100 }}>
    <div className="pv-report-card" style={{
      background: '#fff',
      boxShadow: '0 25px 50px -15px rgba(0,0,0,.15), 0 0 0 1px var(--pv-line)',
      padding: 32,
    }}>
      <div className="pv-report-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 24, paddingBottom: 20, borderBottom: '1px solid var(--pv-line)' }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', color: 'var(--pv-ink-600)', textTransform: 'uppercase', marginBottom: 6 }}>Evaluation report</div>
          <div className="pv-report-title" style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 18, fontWeight: 700, color: '#0B1220', overflowWrap: 'anywhere' }}>Difficult Conversations — Cohort 7</div>
          <div style={{ fontSize: 13, color: 'var(--pv-ink-600)', marginTop: 4 }}>Weeks 1–4 · 12 participants</div>
        </div>
        <div style={{ flexShrink: 0, fontSize: 11, fontFamily: 'var(--pv-font-heading)', fontWeight: 600, letterSpacing: '.12em', color: 'var(--pv-accent-2-600)', background: 'var(--pv-accent-2-50)', padding: '6px 10px', textTransform: 'uppercase' }}>
          Ready
        </div>
      </div>

      <div className="pv-report-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 28 }}>
        {[
          ['Avg. improvement', '+28%', 'var(--pv-accent-2-600)'],
          ['Sessions logged', '147', '#0B1220'],
          ['Completion', '92%', '#0B1220'],
        ].map(([l, v, c], i) => (
          <div key={i} className="pv-report-stat" style={{ background: 'var(--pv-surface)', padding: '14px 16px', minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--pv-ink-600)', fontFamily: 'var(--pv-font-heading)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '.1em', marginBottom: 6, overflowWrap: 'anywhere' }}>{l}</div>
            <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 24, fontWeight: 700, color: c }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 12, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--pv-ink-600)', marginBottom: 14 }}>Skill progression</div>
      {[
        ['Empathic framing', 0.45, 0.82],
        ['Redirecting objections', 0.32, 0.71],
        ['Closing with clarity', 0.28, 0.58],
      ].map(([label, start, end], i) => (
        <div key={i} style={{ marginBottom: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 13 }}>
            <span style={{ color: '#0B1220', fontFamily: 'var(--pv-font-heading)', fontWeight: 500 }}>{label}</span>
            <span style={{ color: 'var(--pv-accent-2-600)', fontFamily: 'var(--pv-font-heading)', fontWeight: 600, fontSize: 12 }}>+{Math.round((end - start) * 100)}%</span>
          </div>
          <div style={{ position: 'relative', height: 8, background: 'var(--pv-line)' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${start * 100}%`, background: '#c9d2db' }} />
            <div style={{ position: 'absolute', left: `${start * 100}%`, top: 0, bottom: 0, width: `${(end - start) * 100}%`, background: 'var(--pv-accent-2)' }} />
          </div>
        </div>
      ))}

      <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid var(--pv-line)', fontSize: 12, color: 'var(--pv-ink-600)' }}>
        Generated by Practivo · <span style={{ color: '#0B1220' }}>practivo.app</span>
      </div>
    </div>
    {/* stacked paper */}
    <div aria-hidden style={{ position: 'absolute', inset: 10, zIndex: -1, background: '#fff', boxShadow: '0 10px 25px rgba(0,0,0,.08)' }} />
  </div>
);

/* ---------- How It Works — cycle ---------- */
const HowItWorksSection = ({ shape = 'cycle' }) => {
  const [active, setActive] = useState2(0);
  const phases = [
    {
      label: 'Phase 1',
      title: 'You run the workshop',
      body: 'Deliver your training as you always have. Set up the AI scenarios in Practivo that match what you covered.',
      trainer: true,
      icon: <Icon.Users />,
    },
    {
      label: 'Phase 2',
      title: 'Participants practice with AI',
      body: 'Learners get access to their practice environment. They repeat conversations with the AI avatar at their own pace — as many times as they need.',
      trainer: false,
      icon: <Icon.MessageSquare />,
    },
    {
      label: 'Phase 3',
      title: 'AI evaluation report',
      body: "Practivo generates a report on each participant's performance. You review it before your next touchpoint and know exactly where to focus.",
      trainer: false,
      accent: 'amber',
      icon: <Icon.FileText />,
    },
    {
      label: 'Phase 4',
      title: 'Coaching and more practice',
      body: 'You meet with participants — in a group or 1-on-1 — to unblock specific challenges. Another round of AI practice follows.',
      trainer: true,
      icon: <Icon.UserCheck />,
    },
  ];

  return (
    <Section id="how" dark>
      <SectionHeader
        dark
        eyebrow="The blended cycle"
        title="How a 2-day workshop becomes a 3-month program"
        lead="The trainer stays present at the moments that matter. Practivo fills the space in between."
      />

      <div className="pv-grid-how" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
        {/* Cycle diagram */}
        <CycleDiagram phases={phases} active={active} setActive={setActive} />

        {/* Active phase panel */}
        <div style={{ minHeight: 360 }}>
          <div className="pv-phase-tabs" style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
            {phases.map((p, i) => {
              const accentVar = phases[i].accent === 'amber' ? 'var(--pv-accent-2)' : 'var(--pv-accent)';
              return (
              <button key={i} onClick={() => setActive(i)} style={{
                flex: 1,
                background: 'transparent',
                border: 0,
                borderTop: `2px solid ${i === active ? accentVar : 'rgba(255,255,255,.15)'}`,
                color: i === active ? '#fff' : 'rgba(255,255,255,.45)',
                padding: '14px 0 0',
                fontFamily: 'var(--pv-font-heading)',
                fontWeight: 600,
                fontSize: 11,
                letterSpacing: '.14em',
                textTransform: 'uppercase',
                textAlign: 'left',
                cursor: 'pointer',
                transition: 'color .2s, border-color .2s',
              }}>{p.label}</button>
            );
            })}
          </div>
          <div key={active} style={{ animation: 'pv-fade .4s ease' }}>
            {(() => { const isAmber = phases[active].accent === 'amber'; const accentVar = isAmber ? 'var(--pv-accent-2)' : 'var(--pv-accent)'; const onAccentInk = isAmber ? '#0B1220' : '#0B1220'; return (
            <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
              <div style={{ width: 48, height: 48, background: phases[active].trainer ? accentVar : 'rgba(255,255,255,.08)', color: phases[active].trainer ? onAccentInk : accentVar, display: 'grid', placeItems: 'center' }}>
                {React.cloneElement(phases[active].icon, { width: 24, height: 24 })}
              </div>
              {phases[active].trainer && (
                <span style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, color: accentVar, letterSpacing: '.14em', textTransform: 'uppercase' }}>Trainer-led</span>
              )}
              {!phases[active].trainer && (
                <span style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, color: isAmber ? accentVar : 'rgba(255,255,255,.5)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Practivo-automated</span>
              )}
            </div>
            <h3 style={{ fontSize: 32, lineHeight: 1.2, color: '#fff', marginBottom: 16, letterSpacing: '-0.01em' }}>{phases[active].title}</h3>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,.72)' }}>{phases[active].body}</p>
            </>
            ); })()}
          </div>
        </div>
      </div>

      {/* Final report callout */}
      <div style={{
        marginTop: 80, padding: '32px 40px',
        border: '1px solid rgba(255,255,255,.12)',
        display: 'grid', gridTemplateColumns: '48px 1fr auto', gap: 28, alignItems: 'center',
      }}>
        <div style={{ color: 'var(--pv-accent-2)' }}><Icon.FileText width={40} height={40} /></div>
        <div>
          <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--pv-accent-2)', marginBottom: 6 }}>Closing deliverable</div>
          <h4 style={{ color: '#fff', fontSize: 22, margin: 0, marginBottom: 6 }}>Final evaluation report</h4>
          <p style={{ color: 'rgba(255,255,255,.65)', fontSize: 15, margin: 0, lineHeight: 1.55 }}>Documents skill development across the full engagement. This is the evidence you hand to your client.</p>
        </div>
      </div>

      <style>{`@keyframes pv-fade { from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: none;} }`}</style>
    </Section>
  );
};

const CycleDiagram = ({ phases, active, setActive }) => {
  const size = 480;
  const cx = size / 2, cy = size / 2;
  const r = 180;

  return (
    <div className="pv-cycle" style={{ position: 'relative', width: '100%', maxWidth: size, aspectRatio: '1', margin: '0 auto' }}>
      <svg viewBox={`0 0 ${size} ${size}`} style={{ width: '100%', height: '100%' }}>
        {/* outer ring */}
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(255,255,255,.12)" strokeWidth="1" strokeDasharray="2 6" />
        {phases.map((_, i) => {
          const a0 = (i / phases.length) * 2 * Math.PI - Math.PI / 2 + 0.1;
          const a1 = ((i + 1) / phases.length) * 2 * Math.PI - Math.PI / 2 - 0.1;
          const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
          const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
          const large = a1 - a0 > Math.PI ? 1 : 0;
          return (
            <path key={i}
              d={`M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1}`}
              fill="none"
              stroke={i === active ? (phases[i].accent === 'amber' ? 'var(--pv-accent-2)' : 'var(--pv-accent)') : 'rgba(255,255,255,.18)'}
              strokeWidth={i === active ? 3 : 1.5}
              strokeLinecap="round"
              style={{ transition: 'stroke .3s' }}
            />
          );
        })}
      </svg>

      {/* Center disc with trainer */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 140, height: 140,
        background: 'var(--pv-ink-850)',
        border: '1px solid rgba(255,255,255,.08)',
        borderRadius: '50%',
        display: 'grid', placeItems: 'center',
        textAlign: 'center',
      }}>
        <div>
          <div style={{ color: 'var(--pv-accent)', margin: '0 auto 8px', width: 28 }}>
            <Icon.UserCheck width={28} height={28} />
          </div>
          <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 10, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)' }}>Trainer</div>
          <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 13, fontWeight: 700, color: '#fff', marginTop: 2 }}>stays present</div>
        </div>
      </div>

      {/* Phase nodes */}
      {phases.map((p, i) => {
        const angle = (i / phases.length) * 2 * Math.PI - Math.PI / 2;
        const x = cx + r * Math.cos(angle);
        const y = cy + r * Math.sin(angle);
        const isActive = i === active;
        return (
          <button key={i}
            onClick={() => setActive(i)}
            style={{
              position: 'absolute',
              left: `${(x / size) * 100}%`, top: `${(y / size) * 100}%`,
              transform: 'translate(-50%, -50%)',
              width: isActive ? 84 : 68, height: isActive ? 84 : 68,
              background: isActive ? (p.accent === 'amber' ? 'var(--pv-accent-2)' : 'var(--pv-accent)') : (p.trainer ? 'var(--pv-ink-850)' : 'var(--pv-ink-850)'),
              color: isActive ? '#0B1220' : '#fff',
              border: isActive ? 'none' : '1px solid rgba(255,255,255,.15)',
              borderRadius: '50%',
              display: 'grid', placeItems: 'center',
              cursor: 'pointer',
              transition: 'all .3s cubic-bezier(.2,.8,.2,1)',
              boxShadow: isActive ? (p.accent === 'amber' ? '0 0 40px rgba(245,158,11,.55)' : '0 0 40px rgba(59,130,246,.55)') : 'none',
              padding: 0,
            }}
            title={p.title}
          >
            <div style={{ textAlign: 'center' }}>
              {React.cloneElement(p.icon, { width: isActive ? 28 : 22, height: isActive ? 28 : 22 })}
              <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 9, fontWeight: 700, letterSpacing: '.14em', marginTop: 2 }}>{p.label.split(' ')[1]}</div>
            </div>
          </button>
        );
      })}
    </div>
  );
};

/* ---------- Who It's For ---------- */
const WhoForSection = () => (
  <Section id="who">
    <SectionHeader
      eyebrow="Who it's for"
      title="Built for trainers who want to deliver more"
    />
    <div className="pv-grid-who" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--pv-line)' }}>
      {[
        {
          icon: <Icon.Briefcase />,
          tag: 'Primary',
          title: 'Freelance trainers',
          body: 'Add a practice and evaluation layer to your existing programs. Differentiate your offer, extend your engagements, and give clients something no standard workshop delivers.',
          bullets: ['Plug into your existing curriculum', 'Scenarios authored per client', 'Reports ready for your client meetings'],
        },
        {
          icon: <Icon.Building />,
          tag: 'Primary',
          title: 'Training companies',
          body: 'Deploy AI practice across multiple clients from one platform. Each client sees only their own content. Your IP stays protected.',
          bullets: ['Multi-client workspaces', 'Content isolated per tenant', 'Roll-up reporting across programs'],
        },
        {
          icon: <Icon.Users />,
          tag: 'Secondary',
          title: 'HR and L&D teams',
          body: 'If you run training in-house, Practivo works without an external trainer. Set up scenarios for your team and track progress directly.',
          bullets: ['No external trainer required', 'Self-serve scenario authoring', 'Progress dashboards per team'],
        },
      ].map((p, i) => (
        <div key={i} style={{
          padding: 40,
          borderRight: i < 2 ? '1px solid var(--pv-line)' : 'none',
          background: '#fff',
          position: 'relative',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
            <div style={{ color: 'var(--pv-accent)' }}>{React.cloneElement(p.icon, { width: 32, height: 32 })}</div>
          </div>
          <h3 style={{ fontSize: 24, fontWeight: 700, color: '#0B1220', marginBottom: 14 }}>{p.title}</h3>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--pv-ink-700)', marginBottom: 24 }}>{p.body}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--pv-line)' }}>
            {p.bullets.map((b, j) => (
              <li key={j} style={{ padding: '12px 0', borderBottom: j < p.bullets.length - 1 ? '1px solid var(--pv-line)' : 'none', display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--pv-ink-700)' }}>
                <Icon.Check width={16} height={16} style={{ color: 'var(--pv-accent)', flexShrink: 0, marginTop: 3 }} />
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </Section>
);

Object.assign(window, { Section, SectionHeader, ProblemSection, SolutionSection, HowItWorksSection, WhoForSection });
