/* global React */
// ============================================================
// FAQ + CLOSING CTA + FOOTER
// ============================================================

const FAQS = [
  { q:'What kinds of businesses do you work with?',
    a:'Teams that have a real workflow worth improving and the will to put AI into production, from growth-stage companies to established enterprises. We\u2019re sector-agnostic; we\u2019ve shipped in renewable energy, procurement, and operations-heavy businesses. If you\u2019re not sure AI fits, the discovery engagement is built to answer exactly that.' },
  { q:'Do we have to commit to a specific AI model or vendor?',
    a:'No. We\u2019re deliberately model-agnostic. We build on GPT, Claude, Gemini, open models, or your own, chosen per problem and evaluated on your data. You\u2019re never locked to one provider, and we can swap models as the landscape changes.' },
  { q:'How long does a typical engagement take?',
    a:'Most engagements put working software in front of your users within weeks, not quarters. We run a tight loop (discover, build, ship, scale) rather than a long discovery phase that ends in a slide deck. Larger product builds run longer, but you see real output early and often.' },
  { q:'What is Cothon, and do we need it to work with you?',
    a:'Cothon is our own product: procurement intelligence that discovers, reads, and scores government and commercial tenders. It\u2019s proof of what we build, born from our work with Sawa Energy. You don\u2019t need Cothon to work with us; it\u2019s simply the clearest example of the custom AI products we can build for you.' },
  { q:'How does early access to Cothon work?',
    a:'Early access members get full platform access, priority support, and a direct line into the roadmap. We keep the cohort small so every team gets hands-on onboarding. Reach out and we\u2019ll set you up.' },
  { q:'Who actually does the work?',
    a:'A small, senior team. The people you meet are the people who build. No handoff to a bench of juniors. We embed with your team so the knowledge stays with you after we\u2019re done.' },
];

function FAQClosing() {
  return (
    <>
      <Section id="faq" py={104}>
        <div className="faq-grid" style={{display:'grid', gridTemplateColumns:'0.8fr 1.2fr', gap:60, alignItems:'start'}}>
          <Reveal>
            <div style={{position:'sticky', top:120}}>
              <Eyebrow color="var(--cothon-coral)" mark>FAQ</Eyebrow>
              <h2 style={{fontSize:'clamp(32px, 3.8vw, 50px)', fontWeight:600, letterSpacing:'-0.025em', lineHeight:1.06, margin:'16px 0 18px'}}>
                Questions,<br/>
                <span className="serif-italic" style={{color:'var(--cothon-sand)', fontWeight:400}}>answered.</span>
              </h2>
              <p style={{fontSize:15, color:'var(--cothon-sand)', lineHeight:1.6, margin:0, maxWidth:320}}>
                Still wondering whether AI is worth it for your team? That’s the first thing
                we figure out together.
              </p>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{display:'flex', flexDirection:'column'}}>
              {FAQS.map((f, i) => <FAQItem key={i} {...f} defaultOpen={i===0} />)}
            </div>
          </Reveal>
        </div>
      </Section>

      <ClosingCTA/>
      <Footer/>
    </>
  );
}

function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  const bodyRef = React.useRef(null);
  return (
    <div style={{borderTop:'1px solid var(--cothon-navy-border)'}}>
      <button onClick={() => setOpen(o => !o)} style={{
        width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between', gap:18,
        padding:'22px 4px', background:'transparent', border:'none', cursor:'pointer', textAlign:'left',
        color:'var(--cothon-cream)',
      }}>
        <span style={{fontSize:17, fontWeight:500, letterSpacing:'-0.01em', lineHeight:1.35}}>{q}</span>
        <span style={{
          flexShrink:0, width:30, height:30, borderRadius:9999,
          border:'1px solid var(--cothon-navy-border)', display:'flex', alignItems:'center', justifyContent:'center',
          background: open ? 'rgba(239,141,136,0.12)' : 'transparent',
          transition:'background 200ms',
        }}>
          <span style={{display:'inline-flex', transform: open ? 'rotate(45deg)' : 'rotate(0deg)', transition:'transform 250ms var(--ease-out)'}}>
            <Plus size={15} color={open ? 'var(--cothon-coral)' : 'var(--cothon-sand)'}/>
          </span>
        </span>
      </button>
      <div style={{
        maxHeight: open ? (bodyRef.current ? bodyRef.current.scrollHeight + 24 : 400) : 0,
        overflow:'hidden', transition:'max-height 360ms var(--ease-out)',
      }}>
        <p ref={bodyRef} style={{fontSize:14.5, color:'var(--cothon-sand)', lineHeight:1.7, margin:'0 4px 24px', maxWidth:620}}>{a}</p>
      </div>
    </div>
  );
}

function ClosingCTA() {
  const intro = 'mailto:management@mirconsulting.ca?subject=Working%20with%20Mir%20Consulting';
  const sales = 'mailto:management@mirconsulting.ca?subject=Cothon%20Inquiry';
  return (
    <Section py={112} style={{position:'relative', overflow:'hidden'}}>
      <div className="drift" style={{position:'absolute', top:-100, left:'30%', width:520, height:520, borderRadius:'50%', background:'radial-gradient(circle, rgba(239,141,136,0.14), transparent 65%)', pointerEvents:'none', filter:'blur(54px)'}}/>
      <Reveal>
        <div style={{position:'relative', textAlign:'center', maxWidth:760, margin:'0 auto'}}>
          <Eyebrow color="var(--cothon-coral)" mark>Let&rsquo;s build</Eyebrow>
          <h2 style={{fontSize:'clamp(40px, 5.2vw, 76px)', fontWeight:700, letterSpacing:'-0.035em', lineHeight:1.0, margin:'20px 0 0'}}>
            Put AI to work on<br/>
            <Gradient>your</Gradient>{' '}
            <span className="serif-italic" style={{color:'var(--cothon-sand)', fontWeight:400}}>hardest workflow.</span>
          </h2>
          <p style={{fontSize:18, color:'var(--cothon-sand)', lineHeight:1.6, maxWidth:560, margin:'26px auto 0'}}>
            Tell us the workflow that’s eating your team’s time. We’ll tell you,
            honestly, whether AI can fix it, and what it would take to ship.
          </p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap', marginTop:38}}>
            <CTAButton href={intro}>Book an intro call</CTAButton>
            <CTAButton variant="outline" href={sales}>Talk to us about Cothon</CTAButton>
          </div>
          <div style={{marginTop:26, fontSize:13, color:'var(--cothon-sand)'}}>
            Or reach us directly at{' '}
            <a href="mailto:management@mirconsulting.ca" style={{color:'var(--cothon-coral)', borderBottom:'1px solid rgba(239,141,136,0.4)'}}>management@mirconsulting.ca</a>
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Footer() {
  const cols = [
    { h:'Services', items:['Custom AI chatbots','AI integration & automation','Custom AI products'] },
    { h:'Cothon', items:['Overview','Early access','Bid intelligence'] },
    { h:'Company', items:['Selected work','Approach','Contact'] },
  ];
  return (
    <footer style={{borderTop:'1px solid var(--cothon-navy-border)', background:'rgba(13,43,82,0.5)'}}>
      <div style={{maxWidth:1240, margin:'0 auto', padding:'56px 32px 36px'}}>
        <div className="footer-grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:44}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap:11, marginBottom:16}}>
              <MirMark size={30} />
              <span style={{fontSize:18, fontWeight:600}}>Mir Consulting</span>
            </div>
            <p style={{fontSize:13.5, color:'var(--cothon-sand)', lineHeight:1.6, margin:0, maxWidth:280}}>
              Applied AI consulting and development. We build custom AI chatbots, automation,
              and products like Cothon that ship to production and move real metrics.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:16}}>{c.h}</div>
              <div style={{display:'flex', flexDirection:'column', gap:11}}>
                {c.items.map(it => (
                  <a key={it} href="#top" style={{fontSize:13.5, color:'var(--cothon-cream)', opacity:0.8, transition:'opacity 160ms'}}
                    onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=0.8}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:48, paddingTop:24, borderTop:'1px solid var(--cothon-navy-border)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:14}}>
          <div style={{fontSize:12.5, color:'var(--cothon-sand)'}}>Copyright © 2025 Mir Consulting. All rights reserved.</div>
          <div style={{display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace'}}>
            <Globe size={13} color="var(--cothon-sand)"/> <span style={{color:'var(--cothon-cream)'}}>EN</span> / FR · Made in Canada
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQClosing });
