/* ============================================================
   About Us — evolving vision + values
   ============================================================ */
const ABOUT_VALUES = [
  { icon: 'Shield', title: 'Trust first', body: 'Your online presence shapes customer confidence. We build clean, reliable systems that make your business look serious and dependable.' },
  { icon: 'Layers', title: 'Built around your work', body: 'From websites to CRM flows, every solution is designed around how your team actually handles enquiries, follow-ups and customers.' },
  { icon: 'Heart', title: 'Genuinely hands-on', body: 'A small team that understands Indian SMBs. You get practical guidance, clear communication and systems your team can actually use.' },
  { icon: 'Rocket', title: 'Always improving', body: 'We keep optimizing after launch — better copy, smoother flows, smarter automation and clearer dashboards as your business grows.' },
];

// Heart isn't in the shared set — add a local fallback path via Icon's name.
function About() {
  return (
    <Section id="about" data-screen-label="About">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,1fr)', gap: 'clamp(36px, 6vw, 88px)', alignItems: 'start' }} className="about-grid">
        <div>
          <SectionHead
            eyebrow="About us" eyebrowIcon="Sparkles"
            title="A premium technology partner for growing businesses —"
            titleAccent="from website to automation."
          />
          <Reveal delay={120}>
            <p style={{ fontSize: 'clamp(1.02rem,1.7vw,1.16rem)', lineHeight: 1.68, color: 'rgba(236,234,242,0.78)', margin: '26px 0 0' }}>
              Tayhami Labs began with a simple belief: growing businesses deserve
              technology that looks premium, works reliably and brings real enquiries.
              We build modern websites, AI chatbots, WhatsApp flows, CRM systems and
              custom dashboards that make your business easier to trust and easier to run.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 'clamp(1.02rem,1.7vw,1.16rem)', lineHeight: 1.68, color: 'rgba(236,234,242,0.78)', margin: '20px 0 0' }}>
              Our work is practical, not complicated for the sake of it. We help clinics,
              cafes, service businesses, agencies, consultants and local brands respond
              faster, follow up automatically and reduce daily manual work — with the
              same care we put into the products we are building next.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: '16px' }} className="values-grid">
          {ABOUT_VALUES.map((v, i) => (
            <Reveal key={v.title} delay={i * 90} className="value-card"
              style={{ padding: '24px 22px', borderRadius: '20px', border: '1px solid rgba(255,255,255,0.09)', background: 'rgba(255,255,255,0.035)', transition: 'transform 0.3s ease, border-color 0.3s ease, background 0.3s ease' }}>
              <div style={{ width: '44px', height: '44px', borderRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(155,232,221,0.1)', border: '1px solid rgba(155,232,221,0.2)', marginBottom: '16px' }}>
                <Icon name={v.icon} size={22} style={{ color: '#9BE8DD' }} />
              </div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.14rem', color: '#fff', margin: '0 0 9px', letterSpacing: '-0.01em' }}>{v.title}</h3>
              <p style={{ fontSize: '0.95rem', lineHeight: 1.56, color: 'rgba(236,234,242,0.66)', margin: 0 }}>{v.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { About });