'use client';

import { useState, useRef, useEffect } from 'react';

// ─── Data ────────────────────────────────────────────────────────────────────

const faqs = [
  {
    q: 'What services do you offer?',
    a: 'We offer a full suite of IT solutions — web development, mobile apps, e-commerce, graphic design, branding, SEO, PPC, social media marketing, and enterprise software. If your business needs it, we build it.',
    tag: 'Services',
  },
  {
    q: 'Where are you located?',
    a: "We're proudly based in Skopje, Macedonia — a growing tech hub in the heart of the Balkans. Distance has never stopped us from delivering world-class work to clients across Europe and North America.",
    tag: 'About',
  },
  {
    q: 'How can I contact you?',
    a: 'Shoot us an email at dbrsakoski@bitsia.com or call +389 (78) 440350 — we pick up. You can also scroll down to the contact form and we\'ll get back to you within one business day.',
    tag: 'Contact',
  },
  {
    q: 'Do you work with startups?',
    a: 'Absolutely — and we love it. Startups move fast, and so do we. We help early-stage companies nail their brand identity, build their MVP, and launch marketing channels that actually scale.',
    tag: 'Clients',
  },
  {
    q: "What's your project timeline?",
    a: 'We scope every project individually, so you always get a realistic estimate upfront — no surprises. Simple websites go live in 2–4 weeks; complex platforms in 2–4 months. We work efficiently to meet your deadlines, and our AI-enhanced workflow means we often beat them.',
    tag: 'Process',
  },
  {
    q: 'How do you price your projects?',
    a: 'We offer both fixed-price packages and hourly engagements (from $40/hr for design work). You\'ll always know the cost before we start. No hidden fees, no scope creep surprises.',
    tag: 'Pricing',
  },
  {
    q: 'Will I be able to update my own website?',
    a: 'Yes. Every website we build comes with CMS integration so you can edit content, post news, and manage pages without touching a line of code. We also train your team before handoff.',
    tag: 'Process',
  },
];

// ─── Accordion item ───────────────────────────────────────────────────────────

function AccordionItem({
  q, a, tag, index, isOpen, onToggle,
}: typeof faqs[0] & { index: number; isOpen: boolean; onToggle: () => void }) {
  const bodyRef = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState(0);

  useEffect(() => {
    if (bodyRef.current) {
      setHeight(isOpen ? bodyRef.current.scrollHeight : 0);
    }
  }, [isOpen]);

  return (
    <div
      style={{
        borderBottom: '1px solid rgba(255,255,255,0.1)',
      }}
    >
      <button
        onClick={onToggle}
        style={{
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 16,
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          padding: '24px 0',
          textAlign: 'left',
        }}
        aria-expanded={isOpen}
      >
        {/* Question + tag */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1, minWidth: 0 }}>
          {/* Number */}
          <span
            style={{
              fontSize: '0.75em',
              fontWeight: 700,
              color: '#d85218',
              minWidth: 28,
              flexShrink: 0,
            }}
          >
            {String(index + 1).padStart(2, '0')}
          </span>

          <span
            style={{
              fontSize: '1.063em',
              fontWeight: 600,
              color: '#fff',
              lineHeight: 1.35,
            }}
          >
            {q}
          </span>

          <span
            style={{
              fontSize: '0.688em',
              fontWeight: 700,
              letterSpacing: '1.5px',
              textTransform: 'uppercase',
              color: '#d85218',
              backgroundColor: 'rgba(216,82,24,0.12)',
              padding: '3px 10px',
              borderRadius: 2,
              flexShrink: 0,
              display: 'none', // shown via CSS on md+
            }}
            className="faq-tag"
          >
            {tag}
          </span>
        </div>

        {/* Toggle icon */}
        <div
          style={{
            width: 32,
            height: 32,
            borderRadius: '50%',
            border: isOpen ? '1px solid #d85218' : '1px solid rgba(255,255,255,0.2)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            transition: 'border-color 0.2s ease, background 0.2s ease',
            backgroundColor: isOpen ? '#d85218' : 'transparent',
          }}
        >
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            stroke={isOpen ? '#fff' : 'rgba(255,255,255,0.6)'}
            strokeWidth="2"
            strokeLinecap="round"
            style={{
              transition: 'transform 0.3s ease',
              transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
            }}
          >
            <line x1="6" y1="1" x2="6" y2="11" />
            <line x1="1" y1="6" x2="11" y2="6" />
          </svg>
        </div>
      </button>

      {/* Answer panel */}
      <div
        style={{
          height,
          overflow: 'hidden',
          transition: 'height 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
        }}
      >
        <div ref={bodyRef} style={{ paddingBottom: 24, paddingLeft: 42 }}>
          <p
            style={{
              fontSize: '1em',
              color: 'rgba(255,255,255,0.7)',
              lineHeight: '28px',
              margin: 0,
              maxWidth: 680,
            }}
          >
            {a}
          </p>
        </div>
      </div>
    </div>
  );
}

// ─── Main Section ─────────────────────────────────────────────────────────────

export default function FaqSection() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section
      id="faq"
      style={{
        position: 'relative',
        backgroundColor: '#0a1e50',
        overflow: 'hidden',
        padding: '100px 0 80px',
      }}
    >
      {/* ── Decorative skewed stripe (top) ── */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: '-10%',
          width: '120%',
          height: 5,
          backgroundColor: '#1f71a3',
          transform: 'skewX(-20deg)',
        }}
      />

      {/* ── Subtle background geometry ── */}
      <div
        style={{
          position: 'absolute',
          bottom: '-5%',
          left: '-8%',
          width: '35%',
          height: '50%',
          backgroundColor: 'rgba(216,82,24,0.05)',
          transform: 'skewX(-15deg)',
          pointerEvents: 'none',
        }}
      />

      <div
        style={{
          maxWidth: 1100,
          margin: '0 auto',
          padding: '0 40px',
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: '0 80px',
          alignItems: 'start',
        }}
        className="faq-grid"
      >
        {/* ── Left: heading ── */}
        <div style={{ position: 'sticky', top: 120 }} className="faq-heading">
          <p
            style={{
              fontSize: '0.75em',
              fontWeight: 700,
              letterSpacing: '3px',
              textTransform: 'uppercase',
              color: '#1f71a3',
              margin: '0 0 16px',
            }}
          >
            Got Questions?
          </p>
          <h2
            style={{
              fontSize: 'clamp(2.25rem, 4vw, 3.5rem)',
              fontWeight: 700,
              color: '#fff',
              lineHeight: 1.1,
              margin: '0 0 24px',
              letterSpacing: '-0.5px',
            }}
          >
            Curious<br />
            <span style={{ color: '#d85218' }}>Minds.</span>
          </h2>
          <p
            style={{
              fontSize: '0.938em',
              color: 'rgba(255,255,255,0.5)',
              lineHeight: '26px',
              margin: '0 0 36px',
            }}
          >
            Everything you wanted to know about working with Bitsia — answered honestly.
          </p>

          {/* CTA */}
          <a
            href="#contact-us"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              color: '#d85218',
              fontWeight: 700,
              fontSize: '0.875em',
              letterSpacing: '1px',
              textTransform: 'uppercase',
              textDecoration: 'none',
              borderBottom: '2px solid #d85218',
              paddingBottom: 4,
            }}
          >
            Still have questions?
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <line x1="5" y1="12" x2="19" y2="12" />
              <polyline points="12 5 19 12 12 19" />
            </svg>
          </a>
        </div>

        {/* ── Right: accordion ── */}
        <div>
          {faqs.map((faq, i) => (
            <AccordionItem
              key={faq.q}
              {...faq}
              index={i}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? null : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}