/* eslint-disable */
// HAIQ — About, CTA, Footer

function AboutSection({t}) {
  return (
    <SectionCard id="about" screenLabel="09 About">
      <div style={{
        display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap:60, alignItems:'center',
      }} className="haiq-about-grid">
        <Reveal>
          <div style={{
            position:'relative', aspectRatio:'4/5',
            borderRadius:20, overflow:'hidden',
            background:'#000',
            border:'1px solid rgba(255,255,255,0.08)',
          }}>
            {/* Big spiral as portrait */}
            <div style={{
              position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <Spiral size={420}/>
            </div>
            <div style={{
              position:'absolute', inset:0,
              background:'radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%)',
            }}/>
            <div style={{
              position:'absolute', left:24, bottom:24,
              fontFamily:'var(--font-sans)', fontSize:10, color:'rgba(255,255,255,0.5)',
              letterSpacing:'0.4em', textTransform:'uppercase',
            }}>HAIQ · UA</div>
          </div>
        </Reveal>
        <div>
          <Eyebrow>{t.about.label}</Eyebrow>
          <H2Italic parts={t.about.title}/>
          <Reveal delay={0.2} as="p" style={{
            marginTop:24, fontFamily:'var(--font-sans)', fontSize:16,
            lineHeight:1.75, color:'#D4D4D8',
          }}>{t.about.p1}</Reveal>
          <Reveal delay={0.3} as="p" style={{
            marginTop:18, fontFamily:'var(--font-sans)', fontSize:16,
            lineHeight:1.75, color:'#D4D4D8',
          }}>{t.about.p2}</Reveal>
          <div style={{
            marginTop:36, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18,
          }} className="haiq-grid-3">
            {t.about.highlights.map((h, i) => (
              <Reveal key={i} delay={0.4 + i*0.1}>
                <div style={{
                  padding:'20px 18px', borderRadius:12,
                  background:'#18181B',
                  border:'1px solid #27272A',
                  height:'100%',
                }}>
                  <div style={{
                    fontFamily:'var(--font-sans)', fontWeight:600, fontSize:14,
                    color:'#FAFAFA', marginBottom:6,
                  }}>{h.t}</div>
                  <div style={{
                    fontFamily:'var(--font-sans)', fontSize:12, lineHeight:1.6,
                    color:'#A1A1AA',
                  }}>{h.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </SectionCard>
  );
}

function CTASection({t}) {
  return (
    <section id="contact" data-screen-label="10 Contact" style={{
      position:'relative', zIndex:2, padding:'140px 60px',
      overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
        opacity:0.45, pointerEvents:'none',
      }}>
        <Spiral size={Math.min(800, typeof window!=='undefined'? window.innerWidth*0.6 : 600)}/>
      </div>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.9) 80%)',
      }}/>
      <div style={{
        position:'relative', zIndex:2, maxWidth:900, margin:'0 auto', textAlign:'center',
      }}>
        <Eyebrow style={{justifyContent:'center'}}>contact · let's talk</Eyebrow>
        <H2Italic parts={t.cta.title} style={{
          margin:'0 auto', textAlign:'center',
          fontSize:'clamp(40px, 5.5vw, 76px)',
        }}/>
        <Reveal delay={0.2} as="p" style={{
          marginTop:24, fontFamily:'var(--font-sans)', fontSize:17,
          lineHeight:1.7, color:'#D4D4D8',
          maxWidth:560, marginInline:'auto',
        }}>{t.cta.sub}</Reveal>
        <Reveal delay={0.35} as="div" style={{marginTop:40, display:'flex', justifyContent:'center', gap:14, flexWrap:'wrap'}}>
          <button onClick={() => window.openContactModal('cta-section')}
            className="btn-pill" style={{
              background:'#FAFAFA', color:'#09090B', borderColor:'#FAFAFA',
              padding:'16px 32px', fontSize:15,
            }}>{t.cta.button} <span>›</span></button>
          <a href="mailto:hello@haiq.agency" className="btn-pill btn-pill--ghost" style={{
            padding:'16px 32px', fontSize:15,
            borderColor:'#52525B', color:'#FAFAFA',
          }}>hello@haiq.agency</a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({t, lang, setLang, scrollTo}) {
  return (
    <footer data-screen-label="11 Footer" style={{
      position:'relative', zIndex:2,
      padding:'48px 60px 40px',
      borderTop:'1px solid rgba(255,255,255,0.05)',
      background:'#000',
    }}>
      <div style={{
        maxWidth:1300, margin:'0 auto',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        gap:24, flexWrap:'wrap',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <span style={{
            width:14, height:14, borderRadius:'50%',
            background:'radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,255,255,0.4) 50%, transparent 80%)',
            opacity:0.7,
          }}/>
          <span style={{
            fontFamily:'var(--font-sans)', fontWeight:700, fontSize:18, letterSpacing:'-0.03em',
          }}>HAIQ.</span>
          <span style={{
            fontFamily:'var(--font-sans)', fontSize:12, color:'#A1A1AA',
            marginLeft:14,
          }}>{t.footer.copy}</span>
        </div>

        <div style={{display:'flex', alignItems:'center', gap:18}}>
          <a href="#" aria-label="YouTube" style={{
            width:22, height:22, color:'#A1A1AA',
            transition:'color 0.3s ease', display:'inline-flex',
          }} onMouseEnter={e=>e.currentTarget.style.color='#818CF8'} onMouseLeave={e=>e.currentTarget.style.color='#A1A1AA'}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
            </svg>
          </a>
          <a href="#" aria-label="LinkedIn" style={{
            width:22, height:22, color:'#A1A1AA',
            transition:'color 0.3s ease', display:'inline-flex',
          }} onMouseEnter={e=>e.currentTarget.style.color='#818CF8'} onMouseLeave={e=>e.currentTarget.style.color='#A1A1AA'}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
          </a>
          <a href="#top" onClick={(e)=>{e.preventDefault(); scrollTo(0);}} style={{
            marginLeft:14,
            fontFamily:'var(--font-sans)', fontSize:11, letterSpacing:'0.3em', textTransform:'uppercase',
            color:'#A1A1AA', textDecoration:'none',
            transition:'color 0.3s ease',
          }} onMouseEnter={e=>e.currentTarget.style.color='#FAFAFA'} onMouseLeave={e=>e.currentTarget.style.color='#A1A1AA'}>
            ↑ Back to top
          </a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {AboutSection, CTASection, Footer});