/* eslint-disable */
// HAIQ — Tech, Pricing, Blog sections

function TechSection({t}) {
  return (
    <SectionCard id="tech" screenLabel="06 Technologies">
      <div style={{textAlign:'center', maxWidth:800, margin:'0 auto'}}>
        <Eyebrow style={{justifyContent:'center'}}>{t.tech.label}</Eyebrow>
        <H2Italic parts={t.tech.title} style={{margin:'0 auto', textAlign:'center'}}/>
      </div>

      <div style={{marginTop:60, display:'flex', flexDirection:'column', gap:36}}>
        {t.tech.categories.map((cat, ci) => (
          <div key={cat.label}>
            <div style={{
              fontFamily:'var(--font-mono)', fontSize:11, fontWeight:500,
              color:'rgba(255,255,255,0.35)', letterSpacing:'0.08em', textTransform:'uppercase',
              marginBottom:16,
            }}>{cat.label}</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
              {cat.items.map((tech, i) => (
                <Reveal key={tech} delay={ci*0.05 + i*0.04}>
                  <TechPill name={tech}/>
                </Reveal>
              ))}
            </div>
          </div>
        ))}
      </div>

      {t.tech.footer && (
        <Reveal delay={0.3}>
          <div style={{
            marginTop:48, paddingTop:32,
            borderTop:'1px solid rgba(255,255,255,0.06)',
            textAlign:'center',
            fontFamily:'var(--font-sans)', fontSize:14, color:'rgba(255,255,255,0.4)',
            letterSpacing:'0.01em',
          }}>{t.tech.footer}</div>
        </Reveal>
      )}
    </SectionCard>
  );
}

const TECH_CDN = {
  'OpenAI':        'openai',
  'Claude':        'anthropic',
  'Gemini':        'googlegemini',
  'n8n':           'n8n',
  'Make':          'make',
  'Airtable':      'airtable',
  'Google Sheets': 'googlesheets',
  'Telegram API':  'telegram',
  'WhatsApp':      'whatsapp',
  'Shopify':       'shopify',
  'WooCommerce':   'woocommerce',
};

const TECH_LETTER = {
  'Prom.ua':     { t: 'P',  bg: '#FF6600' },
  'Rozetka':     { t: 'R',  bg: '#00C650' },
  'Нова Пошта':  { t: 'НП', bg: '#DA291C' },
  'Nova Poshta': { t: 'NP', bg: '#DA291C' },
  'PrivatBank':  { t: 'PB', bg: '#28A745' },
  'Monobank':    { t: 'M',  bg: '#303030' },
};

function TechIcon({name, hover}) {
  const slug = TECH_CDN[name];
  if (slug) {
    return (
      <img
        src={`https://cdn.simpleicons.org/${slug}/ffffff`}
        alt=""
        width={15} height={15}
        style={{
          display:'block', flexShrink:0,
          opacity: hover ? 0.9 : 0.5,
          transition:'opacity 0.4s ease',
        }}
      />
    );
  }
  const ltr = TECH_LETTER[name];
  if (ltr) {
    const small = ltr.t.length > 1;
    return (
      <span style={{
        display:'inline-flex', alignItems:'center', justifyContent:'center',
        width:16, height:16, borderRadius:3, flexShrink:0,
        background: ltr.bg,
        fontFamily:'var(--font-mono)', fontSize: small ? 7 : 9,
        fontWeight:700, color:'#fff', lineHeight:1,
        opacity: hover ? 0.95 : 0.7,
        transition:'opacity 0.4s ease',
      }}>{ltr.t}</span>
    );
  }
  return null;
}

function TechPill({name}) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      display:'inline-flex', alignItems:'center', gap:8,
      padding:'10px 16px', borderRadius:12,
      background: h ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.02)',
      border:`1px solid ${h ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.06)'}`,
      fontFamily:'var(--font-sans)', fontSize:14, fontWeight:500,
      color: h ? '#fff' : 'rgba(255,255,255,0.65)',
      transform: h ? 'translateY(-3px)' : 'none',
      transition:'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      cursor:'default',
    }}>
      <TechIcon name={name} hover={h}/>
      {name}
    </div>
  );
}

function PricingSection({t}) {
  const p = t.pricing;
  return (
    <SectionCard id="pricing" screenLabel="07 Pricing">
      <Eyebrow>{p.label}</Eyebrow>
      <H2Italic parts={p.title}/>
      <div style={{
        marginTop:60, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
        alignItems:'stretch',
      }} className="haiq-grid-3">
        {p.tiers.map((tier, i) => (
          <Reveal key={i} delay={i*0.12}>
            <PricingCard tier={tier} p={p}/>
          </Reveal>
        ))}
      </div>

      {/* Consultation CTA */}
      <Reveal delay={0.4}>
        <div style={{
          marginTop:40, padding:'32px 40px', borderRadius:16,
          background:'rgba(255,255,255,0.02)',
          border:'1px solid rgba(255,255,255,0.07)',
          display:'flex', alignItems:'center', justifyContent:'space-between',
          gap:32, flexWrap:'wrap',
        }}>
          <p style={{
            fontFamily:'var(--font-sans)', fontSize:15, lineHeight:1.65,
            color:'rgba(255,255,255,0.55)', margin:0, maxWidth:600,
          }}>{p.consultNote}</p>
          <button onClick={() => window.openContactModal('pricing-consult')}
            className="btn-pill btn-pill--filled" style={{
              whiteSpace:'nowrap', flexShrink:0,
            }}>{p.consultCta}</button>
        </div>
      </Reveal>
    </SectionCard>
  );
}

function PricingCard({tier, p}) {
  const [h, setH] = React.useState(false);
  const featured = tier.featured;
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      position:'relative', height:'100%',
      padding:'36px 28px', borderRadius:20,
      background: featured ? '#1C1C20' : '#18181B',
      border: featured
        ? `1px solid ${h ? '#52525B' : '#3F3F46'}`
        : `1px solid ${h ? '#3F3F46' : '#27272A'}`,
      transform: featured ? (h ? 'translateY(-4px) scale(1.02)' : 'scale(1.02)') : (h ? 'translateY(-4px)' : 'none'),
      transition:'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      display:'flex', flexDirection:'column',
    }}>
      {featured && (
        <div style={{
          position:'absolute', top:-12, left:'50%', transform:'translateX(-50%)',
          padding:'5px 14px', borderRadius:100,
          background:'#818CF8', color:'#fff',
          fontFamily:'var(--font-mono)', fontSize:10, fontWeight:500,
          letterSpacing:'0.08em', textTransform:'uppercase',
        }}>{p.featuredBadge}</div>
      )}

      {/* Tier name */}
      <div style={{
        fontFamily:'var(--font-mono)', fontSize:11, fontWeight:500,
        color: featured ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.4)',
        letterSpacing:'0.08em', textTransform:'uppercase',
        marginBottom:20,
      }}>{tier.name}</div>

      {/* Includes label */}
      <div style={{
        fontFamily:'var(--font-sans)', fontSize:11, fontWeight:600,
        color:'rgba(255,255,255,0.35)', letterSpacing:'0.04em', textTransform:'uppercase',
        marginBottom:12,
      }}>{p.includesLabel}</div>

      {/* Features */}
      <ul style={{listStyle:'none', padding:0, margin:0, flex:1, display:'flex', flexDirection:'column', gap:10}}>
        {tier.features.map((f, i) => (
          <li key={i} style={{
            display:'flex', alignItems:'flex-start', gap:10,
            fontFamily:'var(--font-sans)', fontSize:13.5, color:'#D4D4D8', lineHeight:1.5,
          }}>
            <span style={{
              flex:'0 0 14px', marginTop:3,
              color: featured ? '#818CF8' : 'rgba(255,255,255,0.4)',
              fontSize:11,
            }}>✓</span>
            {f}
          </li>
        ))}
      </ul>

      {/* Divider */}
      <div style={{height:1, background:'rgba(255,255,255,0.06)', margin:'24px 0'}}/>

      {/* Duration + For whom */}
      <div style={{display:'flex', flexDirection:'column', gap:8, marginBottom:24}}>
        <div style={{fontFamily:'var(--font-sans)', fontSize:13, lineHeight:1.5}}>
          <span style={{color:'rgba(255,255,255,0.35)', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.04em', textTransform:'uppercase'}}>{p.durationLabel} </span>
          <span style={{color:'rgba(255,255,255,0.7)'}}>{tier.duration}</span>
        </div>
        <div style={{fontFamily:'var(--font-sans)', fontSize:13, lineHeight:1.5}}>
          <span style={{color:'rgba(255,255,255,0.35)', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.04em', textTransform:'uppercase'}}>{p.forWhomLabel} </span>
          <span style={{color:'rgba(255,255,255,0.55)'}}>{tier.forWhom}</span>
        </div>
      </div>

      {/* CTA */}
      <button onClick={() => window.openContactModal('pricing-' + tier.name.toLowerCase())}
        className="btn-pill" style={{
          justifyContent:'center',
          background: featured ? '#FAFAFA' : 'transparent',
          color: featured ? '#09090B' : '#FAFAFA',
          borderColor: featured ? '#FAFAFA' : '#52525B',
          width:'100%', fontSize:13,
        }}>{tier.cta}</button>
    </div>
  );
}

function BlogSection({t}) {
  const [tab, setTab] = React.useState(0);
  const filtered = t.blog.items.filter((it) => {
    if (tab === 0) return true;
    if (tab === 1) return it.tag === 'Кейс' || it.tag === 'Case';
    return it.tag === 'AI новини' || it.tag === 'AI News';
  });
  return (
    <SectionCard id="blog" screenLabel="08 Blog">
      <Eyebrow>{t.blog.label}</Eyebrow>
      <H2Italic parts={t.blog.title}/>
      <Reveal delay={0.15} as="p" style={{
        fontFamily:'var(--font-sans)', fontSize:16, color:'rgba(255,255,255,0.55)',
        marginTop:8, maxWidth:600,
      }}>{t.blog.sub}</Reveal>

      <div style={{display:'flex', gap:8, marginTop:36, flexWrap:'wrap'}}>
        {t.blog.tabs.map((label, i) => (
          <button key={i} onClick={()=>setTab(i)} style={{
            padding:'9px 18px', borderRadius:100, cursor:'pointer',
            background: tab===i ? '#fff' : 'transparent',
            color: tab===i ? '#000' : 'rgba(255,255,255,0.6)',
            border:`1px solid ${tab===i ? '#fff' : 'rgba(255,255,255,0.15)'}`,
            fontFamily:'var(--font-sans)', fontSize:13, fontWeight:500,
            transition:'all 0.3s ease',
          }}>{label}</button>
        ))}
      </div>

      <div style={{
        marginTop:40, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
      }} className="haiq-grid-3">
        {filtered.map((p, i) => (
          <Reveal key={`${tab}-${i}`} delay={i*0.1}>
            <BlogCard post={p}/>
          </Reveal>
        ))}
      </div>
    </SectionCard>
  );
}

function BlogCard({post}) {
  const [h, setH] = React.useState(false);
  return (
    <article onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      borderRadius:16, overflow:'hidden',
      background:'#18181B',
      border:`1px solid ${h ? '#3F3F46' : '#27272A'}`,
      transform: h ? 'translateY(-6px)' : 'none',
      transition:'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      cursor:'pointer', height:'100%',
      display:'flex', flexDirection:'column',
    }}>
      <div style={{
        height:200, position:'relative', overflow:'hidden', flexShrink:0,
        background:'#0A0A0A',
      }}>
        {post.image && (
          <img
            src={post.image}
            alt=""
            style={{
              position:'absolute', inset:0, width:'100%', height:'100%',
              objectFit:'cover', objectPosition:'center', display:'block',
              transform: h ? 'scale(1.05)' : 'scale(1)',
              transition:'transform 0.7s cubic-bezier(0.16,1,0.3,1)',
            }}
          />
        )}
        <div style={{
          position:'absolute', inset:0,
          background:'radial-gradient(transparent 30%, rgba(0,0,0,0.7) 100%)',
        }}/>
      </div>
      <div style={{padding:'24px 22px', display:'flex', flexDirection:'column', flex:1}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
          <span style={{
            padding:'4px 10px', borderRadius:100,
            background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.1)',
            fontFamily:'var(--font-mono)', fontSize:10, color:'#fff',
            letterSpacing:'0.05em', textTransform:'uppercase',
          }}>{post.tag}</span>
          <span style={{
            fontFamily:'var(--font-mono)', fontSize:11, color:'rgba(255,255,255,0.4)',
            letterSpacing:'0.02em',
          }}>{post.date}</span>
        </div>
        <h3 style={{
          fontFamily:'var(--font-sans)', fontWeight:700, fontSize:20, lineHeight:1.25,
          color:'#fff', margin:'0 0 12px',
        }}>{post.t}</h3>
        <p style={{
          fontFamily:'var(--font-sans)', fontSize:13, lineHeight:1.6,
          color:'#A1A1AA', margin:0, flex:1,
        }}>{post.d}</p>
        <div style={{
          marginTop:18, fontFamily:'var(--font-sans)', fontSize:12, color:'#fff',
          letterSpacing:'0.05em',
          opacity: h ? 1 : 0.6, transition:'opacity 0.3s ease',
        }}>Read article ›</div>
      </div>
    </article>
  );
}

Object.assign(window, {TechSection, PricingSection, BlogSection, TechPill, TechIcon, PricingCard, BlogCard});