// Case studies, process, insights, engagement, FAQ, CTA, footer, promise band

function PromiseBand() {
  return (
    <section className="promise-band" data-screen-label="30-Day Promise">
      <div className="promise-inner">
        <div className="promise-mark">✦</div>
        <span className="hub-eyebrow" style={{color:'var(--emerald-light)'}}>The 30-Day Promise</span>
        <h2 style={{marginTop:16}}>30% efficiency gain in 30 days, <strong>or we fix it free.</strong></h2>
        <p>Every engagement we take on comes with a commitment: 30% efficiency improvement within 30 days of deployment, or we identify exactly what's blocking it and fix it at no additional cost. We stand behind the work because we built it.</p>
        <div className="promise-stats">
          <div>
            <div className="promise-stat-num"><strong>30%</strong> gain</div>
            <div className="promise-stat-label">Guaranteed Minimum</div>
          </div>
          <div>
            <div className="promise-stat-num">30 <strong>days</strong></div>
            <div className="promise-stat-label">To Measure</div>
          </div>
          <div>
            <div className="promise-stat-num"><strong>$0</strong></div>
            <div className="promise-stat-label">If We Miss</div>
          </div>
        </div>
        <a href="#contact" className="btn btn-primary" style={{background:'#fff',color:'var(--emerald-deep)'}}>Start with a free discovery call <IconArrowRight size={16}/></a>
      </div>
    </section>
  );
}
window.PromiseBand = PromiseBand;

function CaseStudies() {
  return (
    <section id="work" className="section-wide" data-screen-label="Case Studies">
      <div className="sect-head">
        <span className="hub-eyebrow">Selected Work</span>
        <h2>Results we've <strong>shipped.</strong></h2>
        <p>A few of the engagements we're proud of. Every metric verified against the client's own systems, not vanity numbers.</p>
      </div>
      <div className="cases">
        <article className="case-card feature" style={{background:'linear-gradient(135deg,#064e3b 0%,#05926c 100%)'}}>
          <div>
            <span className="case-eyebrow" style={{color:'var(--emerald-light)'}}>Featured · Insurance · Group Benefits</span>
            <h3 className="case-title" style={{marginTop: 12}}>AFC-AIS: how a 5-person benefits team built an <strong>AI-powered back office in 30 days.</strong></h3>
          </div>
          <p style={{color:'#a7f3d0',fontSize:16,lineHeight:1.65,margin:0,maxWidth:620,position:'relative',zIndex:1}}>
            11 production Claude Projects, a signed AI Governance Policy, and a two-day onsite training arc, turning hours of template-driven busywork into minutes of advisor-reviewed output.
          </p>
          <div className="case-meta" style={{color:'#a7f3d0'}}>
            <span><IconLayers size={13}/> Phase 1 Foundation</span>
            <span><IconClock size={13}/> 30 days</span>
            <span><IconShield size={13}/> HIPAA-adjacent governance</span>
          </div>
          <div className="case-metrics" style={{borderTopColor:'rgba(255,255,255,0.15)'}}>
            <div><div className="case-metric-num">11</div><div className="case-metric-label" style={{color:'#a7f3d0'}}>AI Workflows</div></div>
            <div><div className="case-metric-num">7–13 <span style={{fontSize:14}}>hrs/wk</span></div><div className="case-metric-label" style={{color:'#a7f3d0'}}>Time recovered</div></div>
            <div><div className="case-metric-num">&lt;9 wks</div><div className="case-metric-label" style={{color:'#a7f3d0'}}>Phase 1 payback</div></div>
          </div>
          <a href="uploads/AFC-AIS_Case_Study.html" className="case-link" style={{color:'#fff'}}>Read the full case study <IconArrowRight size={14}/></a>
        </article>

        <article className="case-card">
          <span className="case-eyebrow">Insurance · Brokerage Network</span>
          <h3 className="case-title">A renewal engine that <strong>never sleeps.</strong></h3>
          <p style={{font:'400 14px/1.55 var(--font-sans)',color:'var(--fg-2)',margin:0}}>Built an end-to-end renewal workflow covering client intake, document extraction, carrier quoting, and follow-up. Replaced an 11-step manual process with a 2-touch review.</p>
          <div className="case-meta">
            <span>Renewal automation</span>
            <span>Doc intelligence</span>
          </div>
          <div className="case-metrics">
            <div><div className="case-metric-num">63%</div><div className="case-metric-label">Cycle time ↓</div></div>
            <div><div className="case-metric-num">100+</div><div className="case-metric-label">Brokerages</div></div>
            <div><div className="case-metric-num">2-touch</div><div className="case-metric-label">Review</div></div>
          </div>
          <a href="#" className="case-link">Read case <IconArrowRight size={14}/></a>
        </article>

        <article className="case-card">
          <span className="case-eyebrow">B2B SaaS · Series B</span>
          <h3 className="case-title">GTM stack <strong>rebuilt in 30 days.</strong></h3>
          <p style={{font:'400 14px/1.55 var(--font-sans)',color:'var(--fg-2)',margin:0}}>Replaced three disconnected outbound tools with a single multi-agent GTM system: coordinated outreach, reply monitoring, CRM hygiene, and pipeline reporting running as one loop.</p>
          <div className="case-meta">
            <span>GTM</span><span>RevOps</span><span>Lead gen</span>
          </div>
          <div className="case-metrics">
            <div><div className="case-metric-num">4.2×</div><div className="case-metric-label">Qual. pipeline</div></div>
            <div><div className="case-metric-num">1</div><div className="case-metric-label">Unified stack</div></div>
            <div><div className="case-metric-num">30 d</div><div className="case-metric-label">Live</div></div>
          </div>
          <a href="#" className="case-link">Read case <IconArrowRight size={14}/></a>
        </article>
      </div>
    </section>
  );
}
window.CaseStudies = CaseStudies;

function Process() {
  const steps = [
    {k: 's1', phase: 'Week 0 · Free', title: 'Discovery call', desc: '30 minutes. We review your current setup, identify your biggest bottlenecks, and figure out where AI can move the needle fastest.'},
    {k: 's2', phase: 'Week 1', title: 'Workflow audit & roadmap', desc: 'Full deep-dive into your workflows, tools, and team. Every automation opportunity, prioritized into a custom implementation plan.'},
    {k: 's3', phase: 'Weeks 2–3', title: 'Build & configure', desc: 'Custom agents, automations, integrations, and workflows, configured for your business, not copied from a template.'},
    {k: 's4', phase: 'Week 4 →', title: 'Train & hand off', desc: "Your team is trained on everything we build. You own it fully after we're done. Ongoing support available when you want it."},
  ];
  return (
    <section id="process" className="section-wide section-alt" style={{maxWidth:'none'}} data-screen-label="Process">
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="sect-head">
          <span className="hub-eyebrow">The Process</span>
          <h2>From discovery call to <strong>live and running.</strong></h2>
          <p>Four steps. Four weeks. A system that works without us in the room. Every engagement follows the same shape. Only the build changes.</p>
        </div>
        <div className="process-h">
          {steps.map(s => (
            <div key={s.k} className={`process-step ${s.k}`}>
              <div className="process-step-dot" style={{borderColor:'var(--emerald)'}}/>
              <div className="process-phase">{s.phase}</div>
              <h3 className="process-title">{s.title}</h3>
              <p className="process-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;

function Engagement() {
  const models = [
    {name: 'Full Implementation', price: 'From $10,000', per: 'engagement', desc: 'Full workflow audit, custom agents, integrations, training, and the 30-Day Promise.', items: ['Full workflow audit & roadmap','Custom agents built for your stack','Integrations with existing tools','Team training & documentation','30-Day Promise: 30% gain guaranteed','Two days onsite delivery'], pop: true, depth: 'Deepest engagement'},
    {name: 'Team Training', price: 'Custom', per: 'team size', desc: 'On-site or remote AI literacy and implementation training for your entire team.', items: ['On-site or remote delivery','Workflow-specific, not theoretical','Built around your actual tools','Hands-on working session','AI Governance Policy setup','Prompt template library'], depth: 'Team-wide'},
    {name: 'Monthly Retainer', price: 'From $3,500', per: 'month', desc: 'Ongoing AI strategy, optimization, and support. Your AI co-founder on call.', items: ['Ongoing AI strategy','Workflow optimization','Decision support on new builds','Troubleshooting & evolution','Monthly review cadence','Priority office hours'], depth: 'Flexible'},
  ];
  return (
    <section id="pricing" className="section-wide" data-screen-label="Engagement Formats">
      <div className="sect-head">
        <span className="hub-eyebrow">Engagement Formats</span>
        <h2>Choose how you want to <strong>work with us.</strong></h2>
        <p>All engagements start with a free discovery call. After that, you pick the format that fits your stage, your team, and how fast you want to move.</p>
      </div>
      <div className="engage">
        {models.map((m,i) => (
          <div key={i} className={`engage-card ${m.pop ? 'pop' : ''}`}>
            <div style={{font:'500 11px/1 var(--font-sans)',color:'var(--fg-3)',textTransform:'uppercase',letterSpacing:'.12em'}}>{m.depth}</div>
            <div className="engage-name">{m.name}</div>
            <div className="engage-price">{m.price} <small>/ {m.per}</small></div>
            <p className="engage-desc">{m.desc}</p>
            <ul className="engage-list">
              {m.items.map((x,j) => <li key={j}><IconCheck size={16}/> {x}</li>)}
            </ul>
            <a href="#contact" className={`btn ${m.pop ? 'btn-primary' : 'btn-secondary'}`} style={{marginTop:12,justifyContent:'center',background: m.pop ? 'var(--emerald)' : undefined, color: m.pop ? '#fff' : undefined}}>
              Learn more <IconArrowRight size={14}/>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Engagement = Engagement;

function Insights() {
  const items = [
    {type: 'Essay · 12 min read', t: 'The only four AI agents most small companies actually need', e: 'The "agent for everything" era is already over. Here\'s the minimum viable roster we keep building for founders — and why the dashboard matters more than any one agent.', m: 'Nicole Gordon · April 12, 2026'},
    {type: 'Teardown · 7 min', t: 'Why we killed our content stack and replaced it with one agent', e: 'Three tools. One voice audit. A content calendar that runs itself, and a week-one lesson we didn\'t expect.', m: 'Brad Weber · April 3, 2026'},
    {type: 'Framework · 9 min', t: 'The 30-day promise, decomposed', e: "Every guarantee has a scaffolding. Here's exactly how we budget weeks one through four, and the three checkpoints we never skip.", m: 'Nicole Gordon · March 27, 2026'},
  ];
  return (
    <section id="insights" className="section-wide section-alt" style={{maxWidth:'none'}} data-screen-label="Writing">
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="sect-head" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:20}}>
          <div>
            <span className="hub-eyebrow">Writing</span>
            <h2 style={{margin:'12px 0 8px'}}>Notes from <strong>inside</strong> the builds.</h2>
            <p style={{font:'400 16px/1.6 var(--font-sans)',color:'var(--fg-2)',margin:0,maxWidth:620}}>Thinking, teardowns, and frameworks from the people actually shipping AI implementations. not just writing about them.</p>
          </div>
          <a href="#" className="btn btn-secondary">All essays <IconArrowRight size={14}/></a>
        </div>
        <div className="insights">
          {items.map((x,i) => (
            <article key={i} className="insight-card">
              <span className="insight-type">{x.type}</span>
              <h3 className="insight-title">{x.t}</h3>
              <p className="insight-excerpt">{x.e}</p>
              <div className="insight-meta">{x.m}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Insights = Insights;

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    {q: 'What does the 30-Day Promise actually cover?', a: 'Every full-implementation engagement comes with a commitment: 30% efficiency improvement within 30 days of deployment, measured against the baseline we capture in discovery. If we miss, we identify what\'s blocking it and fix it at no additional cost.'},
    {q: 'Who owns the IP, the agents, and the data?', a: 'You do. All custom system prompts, agents, and derived datasets are your property. We operate under strict data-handling agreements, and nothing you provide is used to train external or shared models.'},
    {q: 'What industries do you work with?', a: 'We go deep on four: Insurance & Brokerages (100+ brokerage network, 11 validated use cases), IT & Cybersecurity, B2B SaaS & Fintech, and Professional Services. If you\'re outside those, the first discovery call is where we figure out fit.'},
    {q: 'Can we start with training instead of a full build?', a: 'Yes. Team Training is a standalone engagement, on-site or remote, built around the tools your people actually use. Many teams start with training, then graduate to full implementation once the team has a working relationship with the tools.'},
    {q: 'Do you work with regulated data?', a: 'Yes. Every engagement ships with an AI Governance Policy (Green/Yellow/Orange/Red classification) signed before training. For HIPAA, financial services, and other regulated verticals, we align controls up front and encode them into every agent\'s system prompt.'},
    {q: 'What happens after 30 days?', a: 'You own everything. If you want ongoing optimization, the Monthly Retainer gives you an AI co-founder on call. If you want a deeper build, Phase 2 is available — but only after Phase 1 ROI is measured. No agents promised until they\'re earned.'},
  ];
  return (
    <section className="section-wide" data-screen-label="FAQ">
      <div className="sect-head" style={{textAlign:'center',margin:'0 auto 48px'}}>
        <span className="hub-eyebrow">Questions</span>
        <h2 style={{margin:'12px auto 0'}}>Things operators <strong>ask us first.</strong></h2>
      </div>
      <div className="faq-list">
        {qs.map((x,i) => (
          <div key={i} className={`faq-item ${open===i?'open':''}`} onClick={() => setOpen(open===i?-1:i)}>
            <div className="faq-q">
              <h4>{x.q}</h4>
              <span className="faq-toggle" style={{color:'var(--emerald)'}}>+</span>
            </div>
            <div className="faq-a"><p>{x.a}</p></div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.FAQ = FAQ;

function CTABand() {
  return (
    <section id="contact" className="hub-cta-band" data-screen-label="CTA">
      <div className="hub-cta-inner">
        <div className="hub-cta-accent"/>
        <span className="hub-eyebrow" style={{color:'var(--emerald-light)'}}>Ready when you are</span>
        <h2 className="hub-cta-title" style={{marginTop:12}}>Stop guessing. <strong style={{fontWeight:600,color:'var(--emerald-light)'}}>Start building.</strong></h2>
        <p className="hub-cta-sub">Book a free 30-minute discovery call with Nicole or Brad. No pitch. Just an honest conversation about where you are and what's possible.</p>
        <div className="hub-hero-ctas">
          <a href="#" className="btn btn-primary" style={{background:'var(--emerald)'}}>Book my discovery call <IconArrowRight size={16}/></a>
          <a href="Team.html" className="btn btn-ghost-on-dark">Meet the team</a>
        </div>
      </div>
    </section>
  );
}
window.CTABand = CTABand;

function Footer({wordmark}) {
  return (
    <footer className="hub-footer">
      <div className="hub-footer-top">
        <div className="hub-footer-brand">
          <span className="hub-wordmark on-dark" style={{fontSize:18}}>
            <span className="wm-dim">{wordmark.pre}</span> {wordmark.mid} <span className="wm-accent">{wordmark.end}</span>
          </span>
          <p>Boutique agility, enterprise expertise. Custom AI implementations, the Multiply platform, and Content Agent, deployed in 30 days with measurable outcomes.</p>
        </div>
        <div className="hub-footer-col">
          <div className="hub-footer-title">Platform</div>
          <a href="index.html#pillars">Multiply</a>
          <a href="index.html#intelligence">Content Agent</a>
          <a href="index.html#pricing">30-Day Implementation</a>
          <a href="index.html#pricing">Monthly Retainer</a>
        </div>
        <div className="hub-footer-col">
          <div className="hub-footer-title">Company</div>
          <a href="Team.html">Team</a>
          <a href="index.html#work">Case Studies</a>
          <a href="index.html#industries">Industries</a>
          <a href="index.html#insights">Writing</a>
        </div>
        <div className="hub-footer-col">
          <div className="hub-footer-title">Contact</div>
          <a href="mailto:brad@integratedai.com">brad@integratedai.com</a>
          <a href="mailto:nicole@integratedai.com">nicole@integratedai.com</a>
          <a href="#">Book a call</a>
          <address style={{fontStyle:'normal', marginTop:8, opacity:0.85, lineHeight:1.5}}>
            4900 O'Hear Avenue<br/>
            North Charleston, SC 29405
          </address>
        </div>
      </div>
      <div className="hub-footer-bottom">
        <span>© 2026 Integrated AI · Boutique agility, enterprise expertise</span>
        <span>Affiliated with IGTMS · The AI Integration Hub</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;
