// About.jsx — About page (refined/premium redesign)

const { useState } = React;
const { Link } = window.ReactRouterDOM;

const GREEN = '#264A31', LAVA = '#F27D16', INK = '#1A1A1A', MUTE = '#6b7280', CREAM = '#F7F5F0';

function AboutPage() {
  return (
    <div style={{ background: CREAM, minHeight: '100vh' }}>
      <AboutHero />
      <StorySection />
      <ValuesSection />
      <CertificationsSection />
      <window.CTABand />
    </div>);
}

/* ── HERO — split, light, editorial ── */
function AboutHero() {
  return (
    <div style={{ padding: '120px 2rem 0', background: '#FFFFFF' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 28 }}>
          <Link to="/" style={{ color: 'rgba(26,26,26,0.35)', fontFamily: 'Inter, sans-serif', fontSize: 13, textDecoration: 'none' }}>Home</Link>
          <span style={{ color: 'rgba(26,26,26,0.25)' }}>›</span>
          <span style={{ color: 'rgba(26,26,26,0.6)', fontFamily: 'Inter, sans-serif', fontSize: 13 }}>About</span>
        </div>
        <div className="cv-split-story" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 72, alignItems: 'center' }}>
          <div>
            <div style={{ color: GREEN, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.3em', marginBottom: 22 }}>OUR STORY</div>
            <h1 style={{ color: INK, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(2.6rem,5.4vw,4.4rem)', margin: '0 0 28px', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
              Science that<br />serves the<br /><span style={{ color: GREEN }}>farmer.</span>
            </h1>
            <p style={{ color: MUTE, fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.75, maxWidth: 460, margin: 0 }}>
              CROVISTA was built on a simple belief: Indian farmers deserve world-class chemistry at accessible prices. We bridge the gap between cutting-edge science and the field.
            </p>
          </div>
          <div style={{ borderRadius: 24, overflow: 'hidden', boxShadow: '0 30px 70px rgba(26,26,26,0.12)' }}>
            <img src={window.__resources ? window.__resources.heroField : 'hero-field.png'} alt="Crovista Fields" style={{ width: '100%', height: 480, objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </div>
      <div style={{ height: 96 }} />
    </div>);
}

/* ── STORY — single-column narrative, generous whitespace ── */
function StorySection() {
  const [ref, visible] = window.useScrollReveal();
  return (
    <section ref={ref} style={{ padding: '20px 2rem 100px', background: '#EEF5F1' }}>
      <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center', opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: 'all 0.6s ease' }}>
        <div style={{ width: 32, height: 2, background: LAVA, margin: '0 auto 28px' }} />
        <p style={{ color: INK, fontFamily: 'Montserrat, sans-serif', fontWeight: 500, fontSize: 'clamp(1.3rem,2.2vw,1.7rem)', lineHeight: 1.6, margin: 0 }}>
          What started as a small formulation lab has grown into a trusted name across Indian agriculture — built one honest product, one repeat customer, at a time.
        </p>
      </div>
    </section>);
}

/* ── VALUES ── */
function ValuesSection() {
  const [ref, visible] = window.useScrollReveal();
  const values = [
    { icon: 'hex', title: 'Scientific Precision', desc: 'Every formulation is developed with exacting standards — rigorous testing, validated efficacy, and consistent quality batch after batch.' },
    { icon: 'wheat', title: 'Farmer First', desc: 'We design every product with the Indian farmer at the centre. Affordable pricing, accessible formats, and real-world performance are non-negotiable.' },
    { icon: 'cycle', title: 'Sustainable Future', desc: 'Responsible chemistry that protects crops today without compromising the soil, water, and environment for future generations.' }
  ];

  function ValIcon({ type }) {
    const s = { width: 34, height: 34 };
    if (type === 'hex') return <svg style={s} viewBox="0 0 36 36" fill="none"><path d="M18 3 L31 10.5 L31 25.5 L18 33 L5 25.5 L5 10.5 Z" stroke="#F0EDE8" strokeWidth="1.6" fill="none" /><circle cx="18" cy="18" r="5" stroke="#F0EDE8" strokeWidth="1.4" fill="none" /></svg>;
    if (type === 'wheat') return <svg style={s} viewBox="0 0 36 36" fill="none"><path d="M18 32 L18 8" stroke="#F0EDE8" strokeWidth="1.8" strokeLinecap="round" /><path d="M18 24 Q12 20 12 14" stroke="#F0EDE8" strokeWidth="1.4" fill="none" strokeLinecap="round" /><path d="M18 24 Q24 20 24 14" stroke="#F0EDE8" strokeWidth="1.4" fill="none" strokeLinecap="round" /></svg>;
    return <svg style={s} viewBox="0 0 36 36" fill="none"><path d="M18 6 C10 6 6 12 6 18 C6 24 10 30 18 30 C26 30 30 24 30 18" stroke="#F0EDE8" strokeWidth="1.6" fill="none" strokeLinecap="round" /><path d="M26 6 L30 10 L26 14" stroke="#F0EDE8" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;
  }

  return (
    <section style={{ background: GREEN, padding: '110px 2rem' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div ref={ref} style={{ textAlign: 'center', marginBottom: 64, opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(20px)', transition: 'all 0.6s ease' }}>
          <div style={{ color: '#F0E6D2', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.3em', marginBottom: 16 }}>OUR VALUES</div>
          <h2 style={{ color: '#fff', fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.9rem,3.6vw,2.8rem)', margin: 0 }}>What Drives Us</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 48 }}>
          {values.map((v, i) => (
            <div key={i} style={{
              opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(16px)',
              transition: `all 0.5s ease ${i * 0.1}s`, textAlign: 'center'
            }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', border: '1px solid rgba(240,237,232,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
                <ValIcon type={v.icon} />
              </div>
              <h3 style={{ color: '#fff', fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 18, margin: '0 0 12px' }}>{v.title}</h3>
              <p style={{ color: 'rgba(240,237,232,0.7)', fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.75, margin: '0 auto', maxWidth: 300 }}>{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

/* ── CERTIFICATIONS ── */
function CertificationsSection() {
  const [ref, visible] = window.useScrollReveal();
  const certs = [
    { code: 'ISO 9001:2015', name: 'Quality Management Systems', desc: 'Certified for consistent quality in manufacturing, testing, and delivery processes.' },
    { code: 'ISO 14001:2015', name: 'Environmental Management', desc: 'Committed to environmentally responsible manufacturing and sustainable practices.' }
  ];
  return (
    <section ref={ref} style={{ padding: '110px 2rem', background: '#FFFFFF' }}>
      <div style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ color: GREEN, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.3em', marginBottom: 16, opacity: visible ? 1 : 0, transition: 'all 0.5s ease' }}>CERTIFICATIONS</div>
        <h2 style={{ color: INK, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(1.9rem,3.6vw,2.6rem)', margin: '0 0 56px', opacity: visible ? 1 : 0, transition: 'all 0.5s ease 0.1s' }}>Quality You Can Trust</h2>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 40, justifyContent: 'center' }}>
          {certs.map((cert, i) => (
            <div key={i} style={{
              flex: '1 1 300px', maxWidth: 360,
              opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(16px)',
              transition: `all 0.5s ease ${0.2 + i * 0.1}s`
            }}>
              <div style={{ width: 68, height: 68, borderRadius: '50%', border: `1.5px solid ${LAVA}`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px' }}>
                <span style={{ color: LAVA, fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 10.5, textAlign: 'center', lineHeight: 1.2 }}>{cert.code}</span>
              </div>
              <h4 style={{ color: INK, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 16, margin: '0 0 10px' }}>{cert.name}</h4>
              <p style={{ color: MUTE, fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.7, margin: 0 }}>{cert.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

Object.assign(window, { AboutPage });