// ============================================
// PIXELPULSE — Sections part 2
// ============================================

const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

// ===== About / Stats =====
function About() {
  return (
    <section className="about section" id="about">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num">[ 04 / ABOUT ]</div>
            <h2 className="h-xl">
              A boutique studio<br />for <span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>mobile-first</span> teams.
            </h2>
          </div>
          <div>
            <p className="lead">
              Pixelpulse Infosolution is a 15-person mobile app studio based in Surat, India. For three years we've partnered with founders, growth teams and enterprises to ship apps that customers actually open.
            </p>
            <p className="lead" style={{ marginTop: 16 }}>
              Small enough to care, deep enough to deliver — every project runs through the same senior team end-to-end.
            </p>
          </div>
        </Reveal>

        <div className="about-grid">
          <Reveal>
            <div className="stats-grid">
              <div className="stat">
                <Counter to={100} suffix="+" />
                <div className="stat-label">[ Apps Shipped ]</div>
              </div>
              <div className="stat">
                <Counter to={3} suffix="+" />
                <div className="stat-label">[ Years In Business ]</div>
              </div>
              <div className="stat">
                <Counter to={15} suffix="+" />
                <div className="stat-label">[ Team Members ]</div>
              </div>
              <div className="stat">
                <Counter to={100} suffix="K+" />
                <div className="stat-label">[ Total Downloads ]</div>
              </div>
            </div>

            <div style={{ marginTop: 60 }}>
              <h3 className="h-md" style={{ marginBottom: 24 }}>How we work</h3>
              <div style={{ display: 'grid', gap: 16 }}>
                {[
                  { t: 'Discover', d: 'Workshops, audits and rapid prototyping to lock the right product.' },
                  { t: 'Design', d: 'Research-backed flows and a design system your team can build on.' },
                  { t: 'Develop', d: 'Two-week sprints, weekly demos, code reviews on every commit.' },
                  { t: 'Deploy', d: 'Store submissions, performance monitoring, and post-launch support.' },
                ].map((step, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr',
                    gap: 20,
                    padding: '20px 0',
                    borderTop: '1px solid var(--line)'
                  }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--orange)', letterSpacing: '0.15em' }}>0{i + 1}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--navy)', marginBottom: 6 }}>{step.t}</div>
                      <div style={{ color: 'var(--ink-soft)', fontSize: 15 }}>{step.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <div className="about-image">
              <div className="about-image-label">[ TEAM_2026 / 15+ HUMANS ]</div>
              <svg className="about-image-glyph" viewBox="0 0 200 200">
                <circle cx="100" cy="100" r="90" fill="none" stroke="#F78F1E" strokeOpacity="0.4" strokeDasharray="2 4" />
                <circle cx="100" cy="100" r="60" fill="none" stroke="#F78F1E" strokeOpacity="0.6" />
                <circle cx="100" cy="100" r="30" fill="none" stroke="#F78F1E" />
                <circle cx="100" cy="100" r="6" fill="#F78F1E" />
                <g fill="#F78F1E">
                  <rect x="160" y="40" width="6" height="6" />
                  <rect x="170" y="50" width="8" height="8" />
                  <rect x="160" y="58" width="5" height="5" />
                </g>
                {Array.from({ length: 12 }).map((_, i) => {
                  const a = (i / 12) * Math.PI * 2;
                  const x = 100 + Math.cos(a) * 90;
                  const y = 100 + Math.sin(a) * 90;
                  return <circle key={i} cx={x} cy={y} r="2" fill="#F78F1E" opacity={0.6} />;
                })}
              </svg>
              <div style={{
                position: 'absolute',
                bottom: 24, left: 24, right: 24,
                fontFamily: 'var(--font-mono)',
                fontSize: 11,
                color: 'rgba(247,143,30,0.7)',
                letterSpacing: '0.15em',
                display: 'flex',
                justifyContent: 'space-between'
              }}>
                <span>LAT 21.1702° N</span>
                <span>LNG 72.8311° E</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ===== Testimonials =====
const TESTIMONIALS = [
  {
    text: 'Pixelpulse Infosolution built our mobile app from scratch, and the results exceeded our expectations. The app is fast, user-friendly, and scalable. Their attention to detail and understanding of user experience is outstanding.',
    name: 'Rahul Mehta',
    role: 'Founder, RetailHive',
    initials: 'RM',
    tag: 'PRODUCT BUILD',
    headline: 'Exceeded expectations.',
    meta: 'iOS + Android · Retail · 2025',
  },
  {
    text: 'Working with Pixelpulse Infosolution was a game-changer for our business. Their team delivered a high-quality mobile application that perfectly matched our vision. Their professionalism, communication, and technical expertise truly set them apart.',
    name: 'Priya Sharma',
    role: 'CEO, OrbitFin',
    initials: 'PS',
    tag: 'PARTNERSHIP',
    headline: 'A real game-changer.',
    meta: 'Fintech · Cross-platform · 2024',
  },
  {
    text: 'As a startup, we needed a reliable tech partner, and Pixelpulse Infosolution delivered exactly that. From idea validation to final deployment, they guided us at every step and helped us launch successfully.',
    name: 'Arjun Patel',
    role: 'Co-founder, Shiftly',
    initials: 'AP',
    tag: 'STARTUP MVP',
    headline: 'Shipped from idea to launch.',
    meta: 'Logistics · MVP · 2024',
  },
  {
    text: 'The design team at Pixelpulse Infosolution created a stunning and intuitive UI/UX for our app. Our customers love the smooth experience, and it has significantly improved our engagement rates.',
    name: 'Neha Kapoor',
    role: 'Head of Product, BrightCart',
    initials: 'NK',
    tag: 'UI / UX',
    headline: 'Engagement +47%.',
    meta: 'E-commerce · Design · 2025',
  },
];

function Testimonials() {
  return (
    <section className="testimonials section" id="testimonials">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num">[ 05 / VOICES ]</div>
            <h2 className="h-xl">
              Words from the<br />people who <span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>shipped with us.</span>
            </h2>
          </div>
          <div>
            <p className="lead">
              Hover any card to flip it — every quote has a story behind it.
            </p>
          </div>
        </Reveal>

        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="t-card">
                <div className="t-face t-front">
                  <div className="t-quote-mark">"</div>
                  <div className="t-text">{t.text}</div>
                  <div className="t-author">
                    <div className="t-avatar">{t.initials}</div>
                    <div>
                      <div className="t-name">{t.name}</div>
                      <div className="t-role">{t.role}</div>
                    </div>
                  </div>
                </div>
                <div className="t-face t-back">
                  <div className="t-rating">★★★★★</div>
                  <div className="t-tag">[ {t.tag} ]</div>
                  <div className="t-headline">{t.headline}</div>
                  <div className="t-meta">{t.meta}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Careers =====
const CAREERS = [
  { title: 'Senior Flutter Developer', loc: 'Surat, India', type: 'Full-time', dept: 'Engineering' },
  { title: 'iOS Engineer (Swift / SwiftUI)', loc: 'Surat / Remote', type: 'Full-time', dept: 'Engineering' },
  { title: 'Android Engineer (Kotlin)', loc: 'Surat, India', type: 'Full-time', dept: 'Engineering' },
  { title: 'Mobile UI/UX Designer', loc: 'Surat / Remote', type: 'Full-time', dept: 'Design' },
  { title: 'QA Automation Engineer', loc: 'Surat, India', type: 'Full-time', dept: 'Quality' },
];

function Careers() {
  return (
    <section className="careers section" id="careers">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num">[ 06 / CAREERS ]</div>
            <h2 className="h-xl" style={{ color: 'var(--cream)' }}>
              Build what's next<br /><span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>with us.</span>
            </h2>
          </div>
          <div>
            <p className="lead">
              We're a tight crew of designers and engineers who care about craft. If you ship work you're proud of, we'd love to talk.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <div className="careers-list">
            {CAREERS.map((c, i) => (
              <div key={i} className="career-row">
                <div className="c-num">0{i + 1} —</div>
                <div className="c-title">{c.title}</div>
                <div className="c-meta">{c.dept} · {c.loc}</div>
                <div className="c-meta">{c.type}</div>
                <div className="c-arrow">→</div>
              </div>
            ))}
          </div>
        </Reveal>

        <div className="watermark">PIXELPULSE</div>
      </div>
    </section>
  );
}

// ===== Contact + Footer =====
function Contact() {
  const [vals, setVals] = useStateT({ name: '', email: '', company: '', message: '' });
  const [sent, setSent] = useStateT(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => {
      setSent(false);
      setVals({ name: '', email: '', company: '', message: '' });
    }, 3500);
  };

  const Field = ({ name, label, type = 'text', textarea = false }) => {
    const Tag = textarea ? 'textarea' : 'input';
    return (
      <div className={`field ${vals[name] ? 'has-value' : ''}`}>
        <Tag
          type={type}
          rows={textarea ? 4 : undefined}
          value={vals[name]}
          onChange={(e) => setVals({ ...vals, [name]: e.target.value })}
        />
        <label>{label}</label>
      </div>
    );
  };

  return (
    <section className="contact section" id="contact">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num">[ 07 / CONTACT ]</div>
            <h2 className="h-xl">
              Got an idea?<br />Let's <span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>build it.</span>
            </h2>
          </div>
          <div>
            <p className="lead">
              Tell us what you're working on. We reply within 24 hours — usually with a few sharp questions and a timeline.
            </p>
          </div>
        </Reveal>

        <div className="contact-grid">
          <Reveal>
            <form className="contact-form" onSubmit={onSubmit}>
              <div className={`field ${vals.name ? 'has-value' : ''}`}>
                <input type="text" value={vals.name} onChange={(e) => setVals({ ...vals, name: e.target.value })} required />
                <label>[ Your name ]</label>
              </div>
              <div className={`field ${vals.email ? 'has-value' : ''}`}>
                <input type="email" value={vals.email} onChange={(e) => setVals({ ...vals, email: e.target.value })} required />
                <label>[ Email address ]</label>
              </div>
              <div className={`field ${vals.company ? 'has-value' : ''}`}>
                <input type="text" value={vals.company} onChange={(e) => setVals({ ...vals, company: e.target.value })} />
                <label>[ Company (optional) ]</label>
              </div>
              <div className={`field ${vals.message ? 'has-value' : ''}`}>
                <textarea rows="4" value={vals.message} onChange={(e) => setVals({ ...vals, message: e.target.value })} required></textarea>
                <label>[ Tell us about your project ]</label>
              </div>
              <div>
                <button type="submit" className="btn btn-primary" style={{ marginTop: 12 }}>
                  {sent ? 'Sent ✓' : 'Send message'} <span className="arrow">→</span>
                </button>
              </div>
            </form>
          </Reveal>

          <Reveal delay={150}>
            <div className="contact-info">
              <div className="info-block">
                <div className="lbl">[ Studio ]</div>
                <div className="val">4th Floor, Shop No. 406, Angel Business Center 1, Beside Alok Residency, Sudama Chowk, Mota Varachha, Surat, Gujarat 394101</div>
              </div>
              <div className="info-block">
                <div className="lbl">[ Phone ]</div>
                <div className="val"><a href="tel:+916355437643">+91 63554 37643</a></div>
              </div>
              <div className="info-block">
                <div className="lbl">[ Email ]</div>
                <div className="val"><a href="mailto:pixelpulsesolution@gmail.com">pixelpulsesolution@gmail.com</a></div>
              </div>
              <div className="info-block">
                <div className="lbl">[ Hours ]</div>
                <div className="val">Mon — Sat · 10:00 — 19:00 IST</div>
              </div>

              <div className="lbl" style={{ marginTop: 32 }}>[ Follow ]</div>
              <div className="socials">
                <a href="https://www.instagram.com/pixelpulse_infosolution" target="_blank" rel="noopener" aria-label="Instagram">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17" cy="7" r="0.8" fill="currentColor" />
                  </svg>
                </a>
                <a href="https://www.linkedin.com/company/pixel-pulse-infosolution" target="_blank" rel="noopener" aria-label="LinkedIn">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S.02 4.88.02 3.5 1.13 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8.16h4.56V22H.22V8.16zM8.34 8.16h4.37v1.89h.06c.61-1.16 2.1-2.39 4.32-2.39 4.62 0 5.47 3.04 5.47 7v7.34h-4.56v-6.51c0-1.55-.03-3.55-2.16-3.55-2.17 0-2.5 1.69-2.5 3.43V22H8.34V8.16z" />
                  </svg>
                </a>
                <a href="mailto:pixelpulsesolution@gmail.com" aria-label="Email">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <rect x="3" y="5" width="18" height="14" rx="2" />
                    <path d="M3 7l9 6 9-6" />
                  </svg>
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const navBase = (typeof window !== 'undefined' && window.__navBase) || '';
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="footer-logo">
              <img src="assets/logo.png" alt="Pixelpulse Infosolution" />
            </div>
            <p>Mobile-first product studio. iOS, Android & cross-platform apps engineered to ship.</p>
            <div className="footer-meta">
              <div className="fm-line">Operated by <strong>JAY VIJAYBHAI SANGHANI</strong></div>
              <div className="fm-gstin">GSTIN: 24LXJPS8190N1ZA</div>
            </div>
          </div>

          <div className="footer-col">
            <h4>Quick Links</h4>
            <ul>
              <li><a href={navBase + '#home'}>Home</a></li>
              <li><a href={navBase + '#services'}>Services</a></li>
              <li><a href={navBase + '#about'}>About</a></li>
              <li><a href={navBase + '#contact'}>Contact</a></li>
            </ul>
          </div>

          <div className="footer-col footer-contact">
            <h4>Contact</h4>
            <ul className="footer-contact-list">
              <li>
                <span className="fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z" />
                    <circle cx="12" cy="9" r="2.5" />
                  </svg>
                </span>
                <span className="fc-text">
                  4th Floor, Shop No. 406,<br />
                  Angel Business Center 1,<br />
                  Beside Alok Residency, Sudama Chowk,<br />
                  Mota Varachha, Surat, Gujarat 394101<br />
                  India
                </span>
              </li>
              <li>
                <span className="fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                  </svg>
                </span>
                <span className="fc-text"><a href="tel:+916355437643">+91 63554 37643</a></span>
              </li>
              <li>
                <span className="fc-icon" aria-hidden="true">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <rect x="3" y="5" width="18" height="14" rx="2" />
                    <path d="M3 7l9 6 9-6" />
                  </svg>
                </span>
                <span className="fc-text"><a href="mailto:pixelpulsesolution@gmail.com">pixelpulsesolution@gmail.com</a></span>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Pixelpulse Infosolution. All rights reserved.</span>
          <div className="footer-bottom-links">
            <a href="privacy.php">Privacy Policy</a>
            <a href="terms.php">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { About, Testimonials, Careers, Contact, Footer });