/* eslint-disable */
// HAIQ — Problems, Services, Process, Stats sections

function ProblemsSection({t}) {
  return (
    <SectionCard id="problems" screenLabel="02 Problems" dark={true}>
      <Eyebrow>{t.problems.label}</Eyebrow>
      <H2Italic parts={t.problems.title}/>
      {t.problems.sub && (
        <Reveal delay={0.15} as="p" style={{
          marginTop:16, maxWidth:620,
          fontFamily:'var(--font-sans)', fontSize:16, lineHeight:1.72,
          color:'#A1A1AA',
        }}>{t.problems.sub}</Reveal>
      )}
      <div style={{
        marginTop:52, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16,
        alignItems:'stretch',
      }} className="haiq-grid-3">
        {t.problems.items.map((it, i) => (
          <Reveal key={i} delay={i * 0.12}>
            <ProblemCard it={it} featured={i === 1}/>
          </Reveal>
        ))}
      </div>
    </SectionCard>
  );
}

function ProblemCard({it, featured}) {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        position:'relative', height:'100%',
        padding: featured ? '40px 32px' : '36px 28px',
        borderRadius:'var(--radius-card)',
        background: featured
          ? (h ? 'rgba(255,255,255,0.052)' : 'rgba(255,255,255,0.038)')
          : (h ? 'rgba(255,255,255,0.028)' : 'rgba(255,255,255,0.016)'),
        border:`1px solid ${
          featured
            ? (h ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.14)')
            : (h ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)')
        }`,
        transform: h ? 'translateY(-4px)' : 'translateY(0)',
        transition:'all 0.45s cubic-bezier(0.16,1,0.3,1)',
        overflow:'hidden',
        boxSizing:'border-box',
      }}
    >
      {/* Shimmer line — featured only, grows on hover */}
      {featured && (
        <div style={{
          position:'absolute', top:0, left:0, right:0, height:1,
          background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent)',
          transform: h ? 'scaleX(1)' : 'scaleX(0.65)',
          transformOrigin:'center',
          transition:'transform 0.5s cubic-bezier(0.16,1,0.3,1)',
        }}/>
      )}

      {/* Number */}
      <div style={{
        fontFamily:'var(--font-mono)', fontWeight:500,
        fontSize:38, lineHeight:1,
        color: featured ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)',
        marginBottom:20, letterSpacing:'-0.02em',
      }}>{it.n}</div>

      {/* Title */}
      <h3 style={{
        fontFamily:'var(--font-sans)',
        fontWeight: featured ? 600 : 500,
        fontSize: featured ? 21 : 19,
        color: featured ? '#fff' : 'rgba(255,255,255,0.88)',
        margin:'0 0 16px', lineHeight:1.28,
      }}>{it.t}</h3>

      {/* Body */}
      <p style={{
        fontFamily:'var(--font-sans)', fontSize:14, lineHeight:1.78,
        color: featured ? '#D4D4D8' : '#A1A1AA',
        margin:0, maxWidth:300,
      }}>{it.d}</p>
    </div>
  );
}

const SERVICE_ICONS = {
  bot: (
    <svg width="1em" height="1em" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4h12a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H6l-3 3V5a1 1 0 0 1 1-1z"/>
      <circle cx="6.5" cy="8" r="0.9" fill="currentColor" stroke="none"/>
      <circle cx="9" cy="8" r="0.9" fill="currentColor" stroke="none"/>
      <circle cx="11.5" cy="8" r="0.9" fill="currentColor" stroke="none"/>
    </svg>
  ),
  flow: (
    <svg width="1em" height="1em" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10.5 2 L5.5 10 H9 L7.5 16 L12.5 8 H9 Z"/>
    </svg>
  ),
  chart: (
    <svg width="1em" height="1em" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="10" width="3.5" height="6" rx="0.5"/>
      <rect x="7.25" y="6" width="3.5" height="10" rx="0.5"/>
      <rect x="12.5" y="2" width="3.5" height="14" rx="0.5"/>
    </svg>
  ),
  link: (
    <svg width="1em" height="1em" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7.5 10.5a4.24 4.24 0 0 0 6 0l2-2a4.24 4.24 0 0 0-6-6l-1 1"/>
      <path d="M10.5 7.5a4.24 4.24 0 0 0-6 0l-2 2a4.24 4.24 0 0 0 6 6l1-1"/>
    </svg>
  ),
};
const ICON_KEYS = ['bot', 'flow', 'chart', 'link'];

function ServicesSection({t}) {
  return (
    <SectionCard id="services" screenLabel="03 Services">
      <Eyebrow>{t.services.label}</Eyebrow>
      <H2Italic parts={t.services.title}/>
      <div style={{
        marginTop:72, display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20,
        alignItems:'stretch',
      }} className="haiq-grid-2">
        {t.services.items.map((it, i) => (
          <Reveal key={i} delay={(i%2)*0.1 + Math.floor(i/2)*0.15}>
            <ServiceCard it={it} primary={i === 1} iconKey={ICON_KEYS[i]} />
          </Reveal>
        ))}
      </div>
    </SectionCard>
  );
}

function ServiceCard({it, primary, iconKey}) {
  const [h, setH] = React.useState(false);
  return (
    <div
      onMouseEnter={()=>setH(true)}
      onMouseLeave={()=>setH(false)}
      style={{
        position:'relative', height:'100%', boxSizing:'border-box',
        padding: primary ? '44px 36px' : '36px 32px',
        borderRadius:'var(--radius-card)',
        background: primary
          ? (h ? 'rgba(255,255,255,0.072)' : 'rgba(255,255,255,0.058)')
          : (h ? 'rgba(255,255,255,0.038)' : 'rgba(255,255,255,0.022)'),
        border:`1px solid ${
          primary
            ? (h ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.14)')
            : (h ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)')
        }`,
        transform: h ? 'translateY(-4px)' : 'translateY(0)',
        transition:'all 0.45s cubic-bezier(0.16,1,0.3,1)',
        overflow:'hidden',
        display:'flex', flexDirection:'column',
      }}
    >
      {/* Shimmer line — always visible on primary, hover-only on others */}
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:1,
        background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent)',
        transform: primary
          ? (h ? 'scaleX(1)' : 'scaleX(0.65)')
          : (h ? 'scaleX(1)' : 'scaleX(0)'),
        transformOrigin: primary ? 'center' : 'left',
        transition:'transform 0.5s cubic-bezier(0.16,1,0.3,1)',
      }}/>

      {/* Icon + Title */}
      <div style={{display:'flex', alignItems:'center', gap: primary ? 12 : 10, marginBottom:18}}>
        <span style={{
          display:'flex', alignItems:'center', justifyContent:'center',
          flexShrink:0,
          fontSize: primary ? 20 : 17,
          lineHeight:1,
          color: h
            ? (primary ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.65)')
            : (primary ? 'rgba(255,255,255,0.8)'  : 'rgba(255,255,255,0.38)'),
          transition:'color 0.35s ease',
        }}>
          {SERVICE_ICONS[iconKey]}
        </span>
        <h3 style={{
          fontFamily:'var(--font-sans)', fontWeight:600,
          fontSize:'clamp(1.125rem, 2vw, 1.5rem)',
          letterSpacing:'-0.01em',
          color: primary ? '#fff' : '#F5F5F5',
          margin:0, lineHeight:1.3,
        }}>{it.t}</h3>
      </div>

      {/* Description */}
      <p style={{
        fontFamily:'var(--font-sans)', fontSize:13.5, lineHeight:1.78,
        color: primary ? '#D4D4D8' : '#A1A1AA',
        margin:0, maxWidth:320,
      }}>{it.d}</p>

      {/* Outcome tag — floats to bottom via marginTop:auto */}
      <span style={{marginTop:'auto', paddingTop:24, display:'block'}}>
        <span style={{
          display:'inline-block',
          padding:'5px 13px', borderRadius:100,
          background:'rgba(255,255,255,0.04)',
          border:`1px solid ${primary ? 'rgba(255,255,255,0.13)' : 'rgba(255,255,255,0.07)'}`,
          fontFamily:'var(--font-sans)', fontSize:11.5, fontWeight:500,
          color: primary ? 'rgba(255,255,255,0.72)' : 'rgba(255,255,255,0.44)',
          letterSpacing:'0.02em',
        }}>{it.m}</span>
      </span>
    </div>
  );
}

function ProcessSection({t}) {
  return (
    <SectionCard id="how" screenLabel="04 Process">
      <Eyebrow>{t.process.label}</Eyebrow>
      <H2Italic parts={t.process.title}/>
      <div style={{
        marginTop:80, position:'relative',
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:60,
      }} className="haiq-grid-3">
        {/* connector line */}
        <div style={{
          position:'absolute', top:40, left:'16%', right:'16%', height:1,
          background:'linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.25), rgba(255,255,255,0.05))',
          zIndex:0,
        }} className="haiq-process-line"/>
        {t.process.steps.map((s, i) => (
          <Reveal key={i} delay={i*0.18}>
            <ProcessStep step={s}/>
          </Reveal>
        ))}
      </div>
    </SectionCard>
  );
}

function ProcessStep({step}) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      position:'relative', zIndex:1, textAlign:'center',
    }}>
      <div style={{
        width:80, height:80, borderRadius:'50%',
        margin:'0 auto 28px',
        display:'flex', alignItems:'center', justifyContent:'center',
        background: h ? '#fff' : 'transparent',
        border:'1px solid rgba(255,255,255,0.25)',
        color: h ? '#000' : '#fff',
        fontFamily:'var(--font-mono)', fontWeight:500, fontSize:28,
        letterSpacing:'-0.01em',
        transform: h ? 'scale(1.08)' : 'scale(1)',
        transition:'all 0.5s cubic-bezier(0.16,1,0.3,1)',
      }}>{step.n}</div>
      <h3 style={{
        fontFamily:'var(--font-sans)', fontWeight:600,
        fontSize:'clamp(1.125rem, 2vw, 1.5rem)',
        letterSpacing:'-0.01em',
        color:'#F5F5F5', margin:'0 0 12px',
      }}>{step.t}</h3>
      <p style={{
        fontFamily:'var(--font-sans)', fontSize:14, lineHeight:1.7,
        color:'#A3A3A3', margin:0,
        maxWidth: 320, marginInline:'auto',
      }}>{step.d}</p>
    </div>
  );
}

function StatsSection({t}) {
  return (
    <section id="stats" data-screen-label="05 Stats" style={{
      position:'relative', zIndex:2, padding:'120px 60px',
    }}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        <div style={{textAlign:'center', marginBottom:80}}>
          <Eyebrow style={{justifyContent:'center'}}>{t.stats.label}</Eyebrow>
          <H2Italic parts={t.stats.title} style={{margin:'0 auto', textAlign:'center'}}/>
        </div>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:40,
        }} className="haiq-grid-3">
          {t.stats.items.map((s, i) => (
            <Reveal key={i} delay={i*0.15}>
              <div style={{textAlign:'center', borderLeft: i>0 ? '1px solid rgba(255,255,255,0.06)' : 'none', padding:'0 24px'}} className="haiq-stat">
                <div style={{
                  fontFamily:'var(--font-mono)', fontWeight:700,
                  fontSize:'clamp(3rem, 8vw, 5rem)', lineHeight:1,
                  letterSpacing:'-0.03em', color:'#fff', marginBottom:18,
                }}>
                  <Counter to={s.n} suffix={s.suffix}/>
                </div>
                <div style={{
                  fontFamily:'var(--font-sans)', fontSize:'0.875rem', fontWeight:400,
                  color:'#A3A3A3', lineHeight:1.4,
                }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {ProblemsSection, ProblemCard, ServicesSection, ProcessSection, StatsSection, ServiceCard, ProcessStep});