/* global React */
const { useState, useEffect, useRef } = React;

// ---------- Problems ----------
function Problems() {
  const items = [
    { num: '01', title: 'Knowledge walks out the door', body: 'Your most experienced operators carry years of expertise in their heads. When they leave, that knowledge is gone. PackGuru captures it before it disappears' },
    { num: '02', title: 'Downtime costs thousands per hour', body: "Machines stop. Operators wait. Managers scramble. PackGuru's live monitoring and instant troubleshooting cut response time from hours to seconds" },
    { num: '03', title: "Data you have isn't being used", body: 'Your machines generate thousands of data points every minute. PackGuru turns that stream into specific, actionable improvement plans — focused on the changes that actually move the needle' },
  ];
  return (
    <section className="section" id="problem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">01 /</span> The problem</span>
          <h2 className="h2">Every shift has the same three problems — <span className="it">PackGuru solves all of them</span></h2>
        </div>
        <div className="problem-grid">
          {items.map(i => (
            <div className="problem" key={i.num}>
              <span className="num">{i.num} · Recurring</span>
              <h3>{i.title}</h3>
              <p>{i.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Feature cards ----------
function Features() {
  const items = [
    { icon: 'book',   title: 'Knowledge Platform',          body: 'Turn operator expertise into structured training. Video tutorials, multilingual courses, progress tracking — ready in minutes', href: '/platform/knowledge.html' },
    { icon: 'wa',     title: 'Live Monitoring',             body: 'Connect PackGuru to WhatsApp. Get instant alerts. Resolve faults before they become stoppages', href: '/platform/operations.html' },
    { icon: 'cog',    title: 'Condition-Based Maintenance', body: 'Monitor pump temperature, vacuum levels, and O-ring wear in real time. Act before failure happens', href: '/platform/maintenance.html' },
    { icon: 'chart',  title: 'Data & Process Analysis',     body: 'Daily AI reports following the 4M methodology. Golden recipe management. Speed loss diagnostics', href: '/platform/analytics.html' },
    { icon: 'bot',    title: 'Robotic Floor Assistant',     body: 'Roberta patrols your lines autonomously — responding to voice commands, displaying SOPs, streaming to remote experts', href: '/platform/roberta.html' },
    { icon: 'shield', title: 'Enterprise Security',         body: 'Zero-trust architecture. OT/IT segregation. TLS 1.2+. SOC 2 certified. Ready for your IT audit', href: '/company/security.html' },
  ];
  return (
    <section className="section" id="platform" style={{paddingTop: 40}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">02 /</span> What PackGuru does</span>
          <h2 className="h2">One platform, <span className="it">every layer</span> of your operation</h2>
        </div>
        <div className="feature-grid">
          {items.map(i => (
            <a className="feature" key={i.title} href={i.href}>
              <div className="icon"><Icon name={i.icon}/></div>
              <h3>{i.title}</h3>
              <p>{i.body}</p>
              <span className="btn-ghost" style={{marginTop:'auto', display:'inline-flex', gap:8, alignItems:'center', fontSize:13, color:'var(--ink-2)'}}>
                Learn more <span className="arrow">→</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Operator Video ----------
function OperatorVideo() {
  const [muted, setMuted] = useState(true);
  const [loaded, setLoaded] = useState(false);
  const videoRef = useRef(null);
  const wrapRef = useRef(null);

  useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setLoaded(true); obs.disconnect(); } },
      { threshold: 0.25 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  useEffect(() => {
    if (videoRef.current) videoRef.current.muted = muted;
  }, [muted]);

  return (
    <div ref={wrapRef} className="km-video" style={{position:'relative',padding:0,overflow:'hidden',background:'#000'}}>
      {loaded && (
        <video
          ref={videoRef}
          src="/assets/operator-recording.mp4"
          autoPlay
          muted
          loop
          playsInline
          style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}
        />
      )}
      <div className="timecode">LIVE RECORDING · MICRO-LESSON</div>
      <button
        onClick={() => setMuted(m => !m)}
        aria-label={muted ? 'Unmute video' : 'Mute video'}
        style={{
          position:'absolute', bottom:12, right:12,
          background:'rgba(0,0,0,0.6)', border:'none', borderRadius:6,
          padding:'5px 8px', cursor:'pointer', color:'#fff',
          display:'flex', alignItems:'center', gap:5, fontSize:11,
          fontFamily:'var(--mono)', letterSpacing:'0.04em',
        }}
      >
        {muted
          ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
          : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
        }
        {muted ? 'SOUND OFF' : 'SOUND ON'}
      </button>
    </div>
  );
}

// ---------- Knowledge Platform section ----------
function Knowledge() {
  return (
    <section className="section" id="knowledge">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="num">03 /</span> Knowledge platform</span>
          <h2 className="h2">The knowledge is already in your factory — <span className="it">PackGuru makes it teachable</span></h2>
          <p className="lead">Film your best operator doing the job. PackGuru turns that recording into a professional micro-learning module — dubbed in 30+ languages, with auto-generated quizzes, available to every operator on every shift</p>
        </div>

        <div className="km" style={{marginBottom: 32}}>
          <div className="km-head">
            <Icon name="play" size={14}/>
            <span style={{fontSize:13}}>Capper Changeover · Module 03 of 07</span>
            <div className="lang">
              <span>EN</span><span>PL</span><span>PT-BR</span><span>ES</span><span>DE</span><span>+26</span>
            </div>
          </div>
          <div className="km-body">
            <OperatorVideo />
            <div className="km-quiz">
              <div className="tiny" style={{marginBottom: 10}}>Quiz · Question 2/5</div>
              <div className="q">When adjusting Overpick Height on the Delta robot, which value is recommended for curved caps on KPR1?</div>
              <div className="opt"><span className="marker">A</span> 28.0 mm</div>
              <div className="opt correct"><span className="marker"><Icon name="check" size={10}/></span> 32.0 mm</div>
              <div className="opt"><span className="marker">C</span> 36.0 mm</div>
              <div className="opt"><span className="marker">D</span> Auto-detect</div>
            </div>
          </div>
        </div>

        <div className="feature-grid">
          {[
            { title: 'Video Tutorial Generation', body: 'Upload a phone recording. PackGuru segments it into 60–90s micro-lessons, generates quizzes, and publishes in your languages — within two minutes' },
            { title: 'Course Builder',            body: 'Drop in manuals, SOPs, schematics. PackGuru structures them into interactive modules with auto-translation and visual aids' },
            { title: 'Progress Tracking',         body: "A single dashboard of every operator's training status — videos watched, quizzes scored, XP earned. Filter by role, line, shift" },
            { title: 'Multilingual Dubbing',      body: 'Full voice dubbing — not subtitles — in 30+ languages. Documents translated preserving structure and images' },
            { title: 'Immersive 360° Learning',   body: 'Operators rotate the view, orient themselves inside the real environment. Works on tablets, phones, Apple Vision Pro' },
            { title: 'Safe Knowledge Sharing',    body: 'Share courses across factories without losing control of who sees what. Anti-theft mechanisms protect proprietary procedures' },
          ].map(i => (
            <div className="feature" key={i.title} style={{minHeight: 180}}>
              <h3 style={{fontSize: 17}}>{i.title}</h3>
              <p>{i.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Problems = Problems; window.Features = Features; window.Knowledge = Knowledge;