// sections-bottom.jsx — Case study, Pricing, FAQ, CTA, Footer

// ─── Case study ─────────────────────────────────────────────────────
function CaseStudy() {
  return (
    <section>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns: 'minmax(280px, 1fr) minmax(360px, 1.2fr)', gap: 56, alignItems:'start'}}>
          <div>
            <div className="eyebrow">Council impact</div>
            <h2 className="display h2 mt-12" style={{margin:0, textWrap:'balance'}}>
              Built around the workload councils already have.
            </h2>

            <div className="quote mt-32" style={{textWrap:'balance'}}>
              Councils processing around 100 invoices a month can remove weeks of
              spreadsheet handling from the payment run.
            </div>

            <p className="text-ink2 mt-32" style={{margin:0, fontSize:15, lineHeight: 1.6, maxWidth: '46ch'}}>
              Local councils tell us the heavy work is not the approval itself. It is
              copying invoice data into Excel, checking codes, rebuilding the Skeda, and
              chasing status across email, paper, and meetings. Auto-Council turns that
              month-end work into a controlled digital flow.
            </p>
          </div>

          {/* Stats column */}
          <div className="col gap-16">
            <div style={{
              background:'var(--ink)', color:'#fff', borderRadius: 16, padding: 36,
              display:'flex', flexDirection:'column', gap: 8, position:'relative', overflow:'hidden'
            }}>
              <span className="eyebrow" style={{color: 'var(--accent)', opacity:0.9}}>Hours saved</span>
              <div className="stat-num" style={{color:'#fff'}}>1,000+</div>
              <div style={{color:'rgba(255,255,255,0.7)', fontSize: 14}}>per year, council-wide</div>
              <div style={{
                position:'absolute', right: -40, bottom: -40,
                width: 180, height: 180, borderRadius:'50%',
                background:'radial-gradient(circle, var(--accent) 0%, transparent 65%)',
                opacity: 0.35
              }}/>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div className="card" style={{padding: 28}}>
                <span className="eyebrow">Invoices / month</span>
                <div className="stat-num mt-8">100</div>
                <p className="text-ink3" style={{margin: '8px 0 0', fontSize: 13.5, lineHeight: 1.5}}>
                  processed without manual Excel re-entry
                </p>
              </div>
              <div className="card" style={{padding: 28}}>
                <span className="eyebrow">Approval cycle</span>
                <div className="stat-num mt-8" style={{fontSize:'clamp(28px, 3.6vw, 44px)'}}>days → hours</div>
                <p className="text-ink3" style={{margin: '8px 0 0', fontSize: 13.5, lineHeight: 1.5}}>
                  the full chain can run inside a working day
                </p>
              </div>
            </div>

            <div className="card" style={{padding: 24, display:'flex', justifyContent:'space-between', alignItems:'center', gap: 16, flexWrap:'wrap'}}>
              <div style={{display:'flex', gap: 16, alignItems:'center'}}>
                <IconBuilding size={22} color="var(--accent-2)" />
                <div>
                  <div style={{fontSize:13, color:'var(--ink-3)'}}>Deployment</div>
                  <div style={{fontWeight:500}}>Designed for live council payment runs</div>
                </div>
              </div>
              <a className="btn-link" href="https://calendly.com/jakeciantar766/legal-ai-demo" target="_blank" rel="noreferrer">Book a workflow review →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section id="pricing" style={{background: 'var(--bg)'}}>
      <div className="wrap" style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
        <div style={{maxWidth: 640, textAlign:'center', marginBottom: 48}}>
          <div className="eyebrow">Pricing</div>
          <h2 className="display h2 mt-12" style={{margin:0, textWrap:'balance'}}>
            Tailored to your council.
          </h2>
          <p className="lede mt-16" style={{margin:'0 auto'}}>
            One annual licence covers all officers, secretaries, and councillors.
            No per-seat surprises.
          </p>
        </div>

        <div className="card" style={{
          maxWidth: 720, width: '100%', padding: 48,
          background: '#fff', position: 'relative', overflow: 'hidden'
        }}>
          <span style={{
            position:'absolute', top: 24, right: 24,
            fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'var(--accent-2)'
          }}>Pilot programme open</span>

          <h3 className="display" style={{fontSize: 26, margin: 0, fontWeight: 500}}>Annual council licence</h3>
          <p className="text-ink2 mt-12" style={{margin:0, fontSize:15, lineHeight:1.6, maxWidth:'52ch'}}>
            Scoped to the size and invoice volume of your council. Pricing is discussed
            in the demo so we can put a real number against your actual workload.
          </p>

          <div className="row gap-24 mt-32" style={{flexWrap:'wrap'}}>
            {[
              ['All officers, secretaries, and councillors'],
              ['DLG-format Skeda export, unlimited'],
              ['Payment Vouchers & full audit log'],
              ['AI invoice extraction included'],
              ['Supplier management & purchase orders (coming soon)'],
              ['Implementation, training, and Maltese support'],
            ].map((row, i) => (
              <div key={i} className="row gap-8 ai-c" style={{flex:'1 1 280px', fontSize:14}}>
                <IconCheck size={16} color="var(--accent-2)" />
                <span>{row[0]}</span>
              </div>
            ))}
          </div>

          <div style={{height:1, background:'var(--hairline)', margin: '32px 0'}}/>

          <div className="row ai-c ji-sb gap-16" style={{flexWrap:'wrap'}}>
            <div className="row gap-12 ai-c">
              <span style={{
                display:'inline-flex', width:36, height:36, borderRadius:9,
                background:'var(--accent-tint)', color:'var(--accent-2)',
                alignItems:'center', justifyContent:'center'
              }}>
                <IconSparkle size={18} />
              </span>
              <div className="col" style={{gap:2}}>
                <span style={{fontSize:14, fontWeight:500}}>Grant-eligible</span>
                <span style={{fontSize:13, color:'var(--ink-3)'}}>Malta Enterprise "Digitalise Your SME" applies (subject to eligibility).</span>
              </div>
            </div>
            <a className="btn btn-primary" href="https://calendly.com/jakeciantar766/legal-ai-demo" target="_blank" rel="noreferrer">Request a proposal <IconArrowRight size={16}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    {
      q: 'Is this approved by the Department of Local Government?',
      a: 'Auto-Council produces the Skeda tal-Ħlasijiet in the exact format the DLG requires. We work with the council\'s Executive Secretary on submission and we are happy to walk your DLG point of contact through the output.'
    },
    {
      q: 'Where is our data stored?',
      a: 'All council data is stored in Frankfurt, on EU infrastructure, operated by EU-resident engineers. Data does not leave the EU. We are happy to share our hosting architecture and DPIA on request.'
    },
    {
      q: 'Can our external accountant access read-only?',
      a: 'Yes. External auditors and accountants get a read-only role with access to the Skeda, Payment Vouchers, and the full audit log. You control what they see and for how long.'
    },
    {
      q: 'How do approvals work for our specific councillor setup?',
      a: 'The approval chain is configured per council. Most councils use Admin Officer → Executive Secretary → Councillors (with a minimum required count). We configure the rules during onboarding and you can change them at any time.'
    },
    {
      q: 'Can it import our existing supplier list?',
      a: 'Yes. We import suppliers from your existing Excel or accounting export during onboarding, and we deduplicate against historical invoices so your payment history is intact from day one.'
    },
    {
      q: 'Is grant funding available?',
      a: 'Auto-Council is eligible for the Malta Enterprise "Digitalise Your SME" grant, which covers up to 50% of project cost (60% in Gozo), with a 10% bonus for the AI extraction features. Councils that qualify can co-fund the implementation. We assist with the application.'
    },
    {
      q: 'What does onboarding look like?',
      a: 'Two weeks, typically. Week one: data import, role setup, and approval-chain configuration. Week two: shadow run alongside your current process, training for officers and councillors, and the first live month-end. We are on-site in Malta when needed.'
    },
    {
      q: 'What happens if we want to leave?',
      a: 'Your data is yours. At any time you can export every invoice, every Skeda, every voucher, and the full audit log as machine-readable files. No lock-in, no contractual obstacles to migration.'
    },
  ];

  return (
    <section id="faq">
      <div className="wrap" style={{maxWidth: 880}}>
        <div style={{marginBottom: 48, textAlign:'left'}}>
          <div className="eyebrow">Questions</div>
          <h2 className="display h2 mt-12" style={{margin:0}}>Frequently asked.</h2>
        </div>

        <div>
          {items.map((it, i) => (
            <details key={i} className="faq" {...(i === 0 ? { open: true } : {})}>
              <summary>
                <span style={{flex: 1, textWrap:'balance'}}>{it.q}</span>
                <span className="plus" aria-hidden="true"/>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ─────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="cta" style={{background: 'var(--ink)', color: '#fff', borderTop: 'none'}}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(280px, 1.4fr) minmax(300px, 1fr)',
          gap: 56, alignItems: 'center'
        }}>
          <div>
            <div className="eyebrow" style={{color:'var(--accent)'}}>The demo</div>
            <h2 className="display h2 mt-12" style={{color:'#fff', margin:0, textWrap:'balance'}}>
              See it on your own data <span style={{color:'var(--accent)', fontStyle:'italic'}}>in 20 minutes.</span>
            </h2>
            <p className="lede mt-16" style={{color:'rgba(255,255,255,0.78)', maxWidth: '52ch'}}>
              We will walk through your last month of invoices and show you exactly
              what the Skeda would look like. No slide deck, no fluff.
            </p>
            <div className="row gap-12 mt-32" style={{flexWrap:'wrap'}}>
              <a className="btn" href="https://calendly.com/jakeciantar766/legal-ai-demo" target="_blank" rel="noreferrer" style={{background:'var(--accent)', color:'#fff', borderColor:'var(--accent)'}}>
                Book a demo <IconArrowRight size={16} />
              </a>
              <a className="btn" href="https://calendly.com/jakeciantar766/legal-ai-demo" target="_blank" rel="noreferrer" style={{background:'transparent', color:'#fff', borderColor:'rgba(255,255,255,0.25)'}}>
                Talk to the team
              </a>
            </div>
          </div>

          <div style={{
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 14, padding: 28,
            background: 'rgba(255,255,255,0.03)'
          }}>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)'}}>
              What the call covers
            </div>
            <div className="col gap-12 mt-16">
              {[
                ['00–05', 'Your current invoice workflow, in your words'],
                ['05–12', 'Auto-Council loaded with your last month of invoices'],
                ['12–18', 'Skeda export and audit trail walk-through'],
                ['18–20', 'Pricing, grant funding, and next steps'],
              ].map(([t, l], i) => (
                <div key={i} className="row gap-16 ai-c" style={{borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none', paddingBottom: i < 3 ? 12 : 0}}>
                  <span className="mono" style={{fontSize:11.5, color:'var(--accent)', width: 44}}>{t}</span>
                  <span style={{fontSize:13.5, color:'rgba(255,255,255,0.85)'}}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="site">
      <div className="wrap">
        <div style={{
          display:'grid', gridTemplateColumns:'minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr))',
          gap: 40, alignItems:'start'
        }}>
          <div>
            <div style={{display:'inline-flex', alignItems:'center', gap: 10}}>
              <IconLogo size={22} color="#fff" />
              <span style={{fontFamily:'var(--serif)', fontSize: 19, fontWeight: 500, letterSpacing:'-0.012em', color:'#fff'}}>
                Auto<span style={{color:'var(--accent)'}}>·</span>Council
              </span>
            </div>
            <p style={{margin:'14px 0 0', maxWidth: '32ch', fontSize: 13.5, color:'rgba(255,255,255,0.65)', lineHeight:1.55}}>
              Invoice management and procurement for Maltese local councils.
              Maltese-built, Maltese-supported.
            </p>
          </div>
          <div>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)', marginBottom: 14}}>Product</div>
            <div className="col gap-8">
              <a href="#product">How it works</a>
              <a href="#compliance">Compliance</a>
              <a href="#pricing">Pricing</a>
              <a href="#faq">FAQ</a>
            </div>
          </div>
          <div>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)', marginBottom: 14}}>Company</div>
            <div className="col gap-8">
              <a href="https://calendly.com/jakeciantar766/legal-ai-demo" target="_blank" rel="noreferrer">Book a demo</a>
              <span>Contact</span>
              <span>Privacy policy</span>
              <span>Terms</span>
            </div>
          </div>
          <div>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)', marginBottom: 14}}>Hosted</div>
            <div className="col gap-8" style={{fontSize: 13.5, color:'rgba(255,255,255,0.65)'}}>
              <span>EU · Frankfurt</span>
              <span>GDPR-aligned</span>
              <span>Daily encrypted backups</span>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 12,
          fontSize: 12.5, color: 'rgba(255,255,255,0.5)'
        }}>
          <span>© 2026 Auto-Council Ltd · Registered in Malta</span>
          <span style={{display:'inline-flex', alignItems:'center', gap: 8}}>
            <span style={{
              display:'inline-flex', width: 18, height: 12, borderRadius: 2,
              overflow:'hidden', border: '0.5px solid rgba(255,255,255,0.35)',
              boxShadow: '0 0 0 1px rgba(14,26,51,0.08)'
            }} aria-label="Maltese flag">
              <span style={{position:'relative', width:'50%', height:'100%', background:'#fff'}}>
                <span style={{
                  position:'absolute', left:2, top:2, width:4, height:4,
                  border:'0.7px solid #9BA3B5', boxSizing:'border-box'
                }} />
              </span>
              <span style={{width:'50%', height:'100%', background:'var(--red)'}} />
            </span>
            Made in Malta
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CaseStudy, Pricing, FAQ, FinalCTA, Footer });