/* ============================================================
   FAQ · Contact/CTA · Footer
   ============================================================ */
const { useState: useStateClose } = React;

const FAQS = [
  { q: 'Who do you work with?', a: 'Startups, small teams, and personal brands — founders scaling from pre–Series A, and professionals like doctors, lawyers, and consultants who need content that builds trust and brings in clients. If you have a real service and want more of the right people finding you, we can help.' },
  { q: 'How are engagements structured?', a: 'Most clients work with us on a monthly retainer scoped to a clear set of priorities. We also take on fixed-scope projects like brand refreshes, website builds, or one-off audits.' },
  { q: 'How quickly will we see results?', a: 'Quick wins usually land in the first 30–45 days; compounding channels like SEO and lifecycle take a quarter or two to hit their stride. We set expectations per channel up front.' },
  { q: 'Do you work alongside our existing team?', a: 'Yes — most of the time we extend an in-house team rather than replace it. We plug into your stack, your standups, and your reporting.' },
];

function Faq() {
  const { Reveal, Container, SectionHead } = window;
  const { FaqRow } = window.EditorialCSDesignSystem_8c71a4;
  return (
    <section id="faq" data-screen-label="FAQ" style={{ padding: 'var(--space-section) 0' }}>
      <Container className="faq-wrap" style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'start' }}>
        <SectionHead eyebrow="Questions" title="Good to know." max={360} />
        <Reveal delay={80}>
          <div>
            {FAQS.map((f, i) => (
              <FaqRow key={f.q} question={f.q} defaultOpen={i === 0}>{f.a}</FaqRow>
            ))}
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

function Contact() {
  const { Reveal, Container } = window;
  const { Eyebrow, Button } = window.EditorialCSDesignSystem_8c71a4;
  const [email, setEmail] = useStateClose('');
  const [phone, setPhone] = useStateClose('');
  const [note, setNote]   = useStateClose('');
  const [status, setStatus] = useStateClose('idle'); // idle | submitting | success | error

  const fieldStyle = {
    width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-size)',
    color: 'var(--ink)', background: 'var(--surface-1)', padding: '12px 14px', minHeight: 46,
    borderRadius: 'var(--radius-md)', border: '1px solid var(--hairline)', outline: 'none',
  };

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'submitting') return;
    setStatus('submitting');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: '33564b6e-7386-4d52-b3f3-662b71fd6e95',
          subject: 'New 3point inquiry',
          email: email.trim(),
          phone: phone.trim(),
          message: note.trim(),
        }),
      });
      const data = await res.json();
      setStatus(data.success ? 'success' : 'error');
    } catch (_) {
      setStatus('error');
    }
  };

  return (
    <section id="contact" data-screen-label="Contact" style={{ padding: '0 0 var(--space-section)' }}>
      <Container>
        <Reveal y={24}>
          <div className="cta-banner" style={{
            background: 'var(--ink)', color: 'var(--inverse-ink)', borderRadius: 'var(--radius-xxl)',
            padding: 'clamp(32px,5vw,72px)', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
            gap: 'clamp(32px,5vw,72px)', alignItems: 'center',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
              <Eyebrow dot tone="fin" style={{ color: 'var(--inverse-ink-muted)' }}>Get in touch</Eyebrow>
              <h2 className="t-display-md" style={{ margin: 0, color: 'var(--inverse-ink)', textWrap: 'balance' }}>
                Let's build some momentum.
              </h2>
              <p className="t-subhead" style={{ margin: 0, color: 'var(--inverse-ink-muted)', maxWidth: 440, textWrap: 'pretty' }}>
                Tell us where you want to grow. We'll come back within one business day with a clear, honest read on how we'd approach it.
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-xl)', marginTop: 'var(--space-xs)' }}>
                {[['Email', '3pointdigtal@gmail.com'], ['Call', '+977 9768980410'], ['Studio', 'Remote · Worldwide']].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <span className="t-caption" style={{ color: 'var(--inverse-ink-muted)' }}>{k}</span>
                    <span className="t-body-sm" style={{ color: 'var(--inverse-ink)', fontWeight: 500 }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-xl)', padding: 'clamp(22px,2.4vw,32px)' }}>
              {status === 'success' ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', alignItems: 'flex-start', minHeight: 220, justifyContent: 'center' }}>
                  <span style={{ width: 46, height: 46, borderRadius: '50%', background: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                    <i data-lucide="check" style={{ width: 24, height: 24 }}></i>
                  </span>
                  <h3 className="t-card-title" style={{ margin: 0, color: 'var(--ink)' }}>Thanks! We'll get back to you within one business day.</h3>
                  <p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>We'll reply to <strong style={{ color: 'var(--ink)' }}>{email}</strong> within one business day.</p>
                </div>
              ) : (
                <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)' }}>
                    <span className="t-body-sm" style={{ color: 'var(--ink)', fontWeight: 500 }}>Email</span>
                    <input type="email" value={email} placeholder="you@company.com" required
                      onChange={(e) => setEmail(e.target.value)}
                      style={fieldStyle} />
                  </label>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)' }}>
                    <span className="t-body-sm" style={{ color: 'var(--ink)', fontWeight: 500 }}>Phone</span>
                    <input type="tel" value={phone} placeholder="+977 98XXXXXXXX" required
                      onChange={(e) => setPhone(e.target.value)}
                      style={fieldStyle} />
                  </label>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xs)' }}>
                    <span className="t-body-sm" style={{ color: 'var(--ink)', fontWeight: 500 }}>What do you want to grow?</span>
                    <textarea value={note} rows={3} placeholder="A sentence or two about your goals…"
                      onChange={(e) => setNote(e.target.value)}
                      style={{ ...fieldStyle, minHeight: 88, resize: 'vertical', lineHeight: 1.5 }} />
                  </label>
                  {status === 'error' && (
                    <p className="t-caption" style={{ margin: 0, color: 'var(--error, #c0392b)' }}>
                      Something went wrong. Try again or{' '}
                      <a href="https://wa.me/9779768980410" target="_blank" rel="noopener noreferrer"
                        style={{ color: 'var(--error, #c0392b)', fontWeight: 600 }}>WhatsApp us</a> directly.
                    </p>
                  )}
                  <Button type="submit" variant="fin" size="lg" style={{ width: '100%', opacity: status === 'submitting' ? 0.65 : 1 }}>
                    {status === 'submitting' ? 'Sending…' : 'Get a free content audit'}
                  </Button>
                  <span className="t-caption" style={{ color: 'var(--ink-muted)', textAlign: 'center' }}>No spam. No commitment. Just a clear next step.</span>
                  <span className="t-caption" style={{ color: 'var(--ink)', fontWeight: 500, textAlign: 'center' }}>We reply same day.</span>
                </form>
              )}
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

function Footer() {
  const { Container, BrandMark } = window;

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
  };

  const SERVICE_ITEMS = [
    'Short-form + paid social',
    'Websites & landing pages',
    'Brand & content strategy',
  ];

  const COMPANY_LINKS = [
    { label: 'Work',         id: 'work' },
    { label: 'How we work',  id: 'how-we-work' },
    { label: 'Founder',      id: 'founder' },
    { label: 'FAQ',          id: 'faq' },
  ];

  const CONNECT_ITEMS = ['3pointdigtal@gmail.com', 'LinkedIn', 'Instagram', 'X / Twitter'];

  return (
    <footer style={{ borderTop: '1px solid var(--hairline)', padding: 'var(--space-xxl) 0 var(--space-xl)', background: 'var(--canvas)' }}>
      <Container style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-xxl)' }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 'clamp(28px,4vw,48px)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', maxWidth: 280 }}>
            <BrandMark height={24} />
            <p className="t-body-sm" style={{ margin: 0, color: 'var(--ink-muted)', textWrap: 'pretty' }}>
              A growth partner for ambitious teams. Clarity, momentum, and precision — in every engagement.
            </p>
          </div>

          {/* Services */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <span className="t-caption" style={{ color: 'var(--ink-subtle)', fontWeight: 600, letterSpacing: '0.02em' }}>Services</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
              {SERVICE_ITEMS.map((it) => (
                <a key={it} href="#services" onClick={(e) => { e.preventDefault(); scrollTo('services'); }} className="footer-link" style={{
                  textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-sm-size)', color: 'var(--ink-muted)',
                }}>{it}</a>
              ))}
            </div>
          </div>

          {/* Company — all links scroll to real sections */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <span className="t-caption" style={{ color: 'var(--ink-subtle)', fontWeight: 600, letterSpacing: '0.02em' }}>Company</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
              {COMPANY_LINKS.map(({ label, id }) => (
                <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollTo(id); }} className="footer-link" style={{
                  textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-sm-size)', color: 'var(--ink-muted)',
                }}>{label}</a>
              ))}
            </div>
          </div>

          {/* Connect */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <span className="t-caption" style={{ color: 'var(--ink-subtle)', fontWeight: 600, letterSpacing: '0.02em' }}>Connect</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
              {CONNECT_ITEMS.map((it) => (
                <a key={it} href="#" onClick={(e) => e.preventDefault()} className="footer-link" style={{
                  textDecoration: 'none', fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-sm-size)', color: 'var(--ink-muted)',
                }}>{it}</a>
              ))}
            </div>
          </div>
        </div>
        <div className="footer-legal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-md)', paddingTop: 'var(--space-lg)', borderTop: '1px solid var(--hairline-soft)' }}>
          <span className="t-caption" style={{ color: 'var(--ink-subtle)' }}>© 2026 3point Digital. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 'var(--space-lg)' }}>
            <a href="#" onClick={(e) => e.preventDefault()} className="footer-link" style={{ textDecoration: 'none', fontSize: 'var(--type-caption-size)', color: 'var(--ink-subtle)' }}>Privacy</a>
            <a href="#" onClick={(e) => e.preventDefault()} className="footer-link" style={{ textDecoration: 'none', fontSize: 'var(--type-caption-size)', color: 'var(--ink-subtle)' }}>Terms</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Faq, Contact, Footer });