// Credibility & tools: bottom-up thesis, borrowed-credibility quotes, real
// results, customer testimonials, the AI readiness quiz, and podcasts.
// NOTE: several blocks use clearly-marked PLACEHOLDERS (photos, exact quotes,
// podcast links, real testimonials) — swap them for real assets as they arrive.

// ── Bottom-up thesis: the sales hook ──────────────────────────────────────
function BottomUp() {
  return (
    <section className="section-wide" data-screen-label="Bottom-Up">
      <div className="sect-head">
        <span className="hub-eyebrow">Why most AI rollouts stall</span>
        <h2>Buying the tools is easy. <strong>Getting the team to use them is the hard part.</strong></h2>
        <p>Most agencies have tried an AI tool or two by now, and most found the same thing: licenses get bought, a few people poke at it, and nothing changes. The missing piece isn't leadership commitment, it's adoption. Vision comes from the top; adoption is built person by person, task by task, inside the team's real work. That's exactly what we train.</p>
      </div>
      <div className="grid2">
        <div className="card warn">
          <div className="ck" style={{color:'var(--warn-orange)'}}>Where rollouts stall</div>
          <div className="ct">Tools without training</div>
          <div className="cd">A new tool, a license for everyone, and nobody showing the team how it applies to their book of business. Usage spikes for a week, then fades.</div>
        </div>
        <div className="card">
          <div className="ck">How adoption sticks</div>
          <div className="ct">Leadership sets the direction. We build the habit.</div>
          <div className="cd">We take your vision and make it real on the ground: producers and service teams learn AI on their own accounts and workflows, wins spread desk to desk, and the results compound.</div>
        </div>
      </div>
    </section>
  );
}
window.BottomUp = BottomUp;

// ── Borrowed-credibility quotes (who said it > what they said) ─────────────
function FamousQuotes() {
  // Card 1 is a real, widely-attributed quote. The rest are PLACEHOLDERS —
  // confirm exact wording/attribution before they go live.
  const quotes = [
    {
      name: 'Jensen Huang', title: 'CEO, NVIDIA', org: 'NVIDIA', initials: 'JH',
      quote: 'You are not going to lose your job to an AI, but you are going to lose your job to someone who uses AI.',
      placeholder: false,
    },
    {
      name: 'Robert Garf', title: 'VP & GM, Retail & Consumer Goods, Salesforce', org: 'Salesforce', initials: 'RG',
      quote: 'Add the exact Salesforce quote on turning sellers loose to find the AI use cases they love. Bottom-up, not top-down.',
      placeholder: true,
    },
    {
      name: 'Add source', title: 'Role, Company', org: '—', initials: '??',
      quote: 'Second borrowed-credibility quote, e.g. an AI-lab founder or a well-known operator on bottom-up adoption.',
      placeholder: true,
    },
    {
      name: 'All-In Podcast', title: 'Add speaker + episode', org: 'Podcast', initials: 'AI',
      quote: 'Add the quote on the best companies adopting AI bottom-up, not through top-down mandates.',
      placeholder: true,
    },
  ];
  return (
    <section className="section-wide section-alt" style={{maxWidth:'none'}} data-screen-label="Borrowed Credibility">
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="sect-head">
          <span className="hub-eyebrow">Don't take our word for it</span>
          <h2>The people building AI <strong>agree.</strong></h2>
          <p>The message is simple, and it isn't just us saying it: the winners won't be the companies where leadership talks about AI, they'll be the ones where the team actually uses it.</p>
        </div>
        <div className="quotes-wall">
          {quotes.map((q, i) => (
            <figure key={i} className={`quote-card ${q.placeholder ? 'is-ph' : ''}`}>
              <figcaption className="quote-attrib">
                <span className="quote-avatar" aria-hidden="true">{q.initials}</span>
                <span className="quote-who">
                  <span className="quote-name">{q.name}</span>
                  <span className="quote-title">{q.title}</span>
                </span>
                {q.placeholder && <span className="ph-tag">Pending</span>}
              </figcaption>
              <blockquote className="quote-text">&ldquo;{q.quote}&rdquo;</blockquote>
            </figure>
          ))}
        </div>
        <p className="ph-note">Placeholder cards marked <em>Pending</em>. Send the exact quotes + attributions (and logos/headshots) to finalize.</p>
      </div>
    </section>
  );
}
window.FamousQuotes = FamousQuotes;

// ── Real results (hard numbers from real insurance work) ──────────────────
function Results() {
  const stats = [
    {big: '4 hrs → 4 min', label: 'Proposal build time', sub: 'With trained AI on real client work'},
    {big: '9-page', label: 'Proposals, built in minutes', sub: 'Polished, on-brand, client-ready'},
    {big: 'On the fly', label: 'Renewal dashboards', sub: 'Built live, in the renewal meeting'},
  ];
  return (
    <section id="proof" className="section-wide" data-screen-label="Real Results">
      <div className="sect-head">
        <span className="hub-eyebrow">Real results · real insurance work</span>
        <h2>The kind of results <strong>your clients will start expecting.</strong></h2>
        <p>Better proposals. Faster turnarounds. Dashboards you build on the fly in a renewal meeting. This is quickly becoming table stakes, and it's exactly what your team walks away able to do.</p>
      </div>
      <div className="s-stats results-stats">
        {stats.map((s, i) => (
          <div key={i} className="hub-stat" style={{borderLeftColor:'var(--emerald)'}}>
            <div className="hub-stat-num" style={{fontSize:52}}>{s.big}</div>
            <div className="hub-stat-label">{s.label}</div>
            <div className="hub-stat-sub">{s.sub}</div>
          </div>
        ))}
      </div>
      {/* Featured result quote removed 2026-08: not a real client quote. Re-add the
          <figure className="result-quote"> block here once a real, approved client
          quote + attribution (name, agency, headshot) is provided. */}
    </section>
  );
}
window.Results = Results;

// ── Testimonials (attribution on TOP, quote below — with human faces) ─────
function Testimonials() {
  // PLACEHOLDERS — real quotes + headshots are being collected. Names are the
  // intended sources; quote bodies are stubs so nothing false ships.
  const people = [
    {name: 'Josh Rosen', title: 'CEO · (company to confirm)', initials: 'JR'},
    {name: 'Justin', title: 'CEO · (company to confirm)', initials: 'J'},
    {name: 'Client', title: 'Trained agency principal', initials: 'C'},
  ];
  return (
    <section className="section-wide section-alt" style={{maxWidth:'none'}} data-screen-label="Testimonials">
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div className="sect-head">
          <span className="hub-eyebrow">Real people · real customers</span>
          <h2>Who said it matters <strong>as much as what they said.</strong></h2>
          <p>Human faces, real names, people you can actually call to check us out. These are being finalized, headshots and exact quotes drop in here.</p>
        </div>
        <div className="tmonials">
          {people.map((p, i) => (
            <figure key={i} className="tm-card is-ph">
              <figcaption className="tm-head">
                <span className="tm-avatar" aria-hidden="true">{p.initials}</span>
                <span>
                  <span className="tm-name">{p.name}</span>
                  <span className="tm-title">{p.title}</span>
                </span>
              </figcaption>
              <blockquote className="tm-quote">&ldquo;Testimonial pending, quote &amp; headshot to be added.&rdquo;</blockquote>
              <span className="ph-tag">Pending</span>
            </figure>
          ))}
        </div>
        <p className="ph-note">Send approved quotes + headshots for Josh, Justin, and the trained agencies and these go live.</p>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;

// ── AI Readiness quiz / time-saved calculator (the lead-gen tool) ─────────
function ReadinessQuiz() {
  const questions = [
    { id: 'usage', kind: 'score', q: 'How much does your team use AI today?',
      opts: [
        {label: 'Nobody really uses it yet', score: 10},
        {label: 'A few people dabble', score: 35},
        {label: 'Some use it weekly', score: 65},
        {label: 'Most of the team uses it daily', score: 95},
      ] },
    { id: 'gov', kind: 'score', q: 'Do you have an AI governance / E&O policy?',
      opts: [
        {label: 'No', score: 15},
        {label: 'In progress', score: 55},
        {label: 'Yes, signed', score: 90},
      ] },
    { id: 'quote', kind: 'task', q: 'How long does a carrier quote comparison take?',
      weeklyVolume: 5,
      opts: [
        {label: '3+ hours', minutes: 200},
        {label: '1–3 hours', minutes: 90},
        {label: '30–60 minutes', minutes: 45},
        {label: 'Under 30 minutes', minutes: 20},
      ] },
    { id: 'booklet', kind: 'task', q: 'How long does it take to create a client benefit booklet?',
      weeklyVolume: 2,
      opts: [
        {label: '3+ hours', minutes: 200},
        {label: '1–3 hours', minutes: 90},
        {label: '30–60 minutes', minutes: 45},
        {label: 'Under 30 minutes', minutes: 20},
      ] },
    { id: 'proposal', kind: 'task', q: 'How long to build a client proposal?',
      weeklyVolume: 4,
      opts: [
        {label: '3+ hours', minutes: 200},
        {label: '1–3 hours', minutes: 90},
        {label: '30–60 minutes', minutes: 45},
        {label: 'Under 30 minutes', minutes: 20},
      ] },
    { id: 'team', kind: 'team', q: 'How many client-facing team members?',
      opts: [
        {label: '1–3', size: 2},
        {label: '4–10', size: 7},
        {label: '11–25', size: 18},
        {label: '25+', size: 40},
      ] },
  ];

  const [answers, setAnswers] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const allAnswered = questions.every(q => answers[q.id] != null);

  const pick = (qid, idx) => {
    setAnswers(a => ({ ...a, [qid]: idx }));
  };

  const compute = () => {
    const AI_REDUCTION = 0.85; // AI collapses these tasks to ~15% of the time
    const scoreQs = questions.filter(q => q.kind === 'score');
    const readiness = Math.round(
      scoreQs.reduce((sum, q) => sum + q.opts[answers[q.id]].score, 0) / scoreQs.length
    );
    const teamSize = questions.find(q => q.kind === 'team').opts[answers.team].size;
    const weeklySavedMin = questions
      .filter(q => q.kind === 'task')
      .reduce((sum, q) => {
        const mins = q.opts[answers[q.id]].minutes;
        return sum + mins * q.weeklyVolume * AI_REDUCTION;
      }, 0) * teamSize;
    const hoursPerWeek = Math.round(weeklySavedMin / 60);
    const tier = readiness < 35 ? 'Laggard' : readiness < 60 ? 'Developing' : readiness < 80 ? 'Ahead of the pack' : 'Leader';
    return { readiness, tier, hoursPerWeek, teamSize };
  };

  const result = submitted && allAnswered ? compute() : null;

  return (
    <section id="readiness" className="quiz-section" data-screen-label="Readiness Quiz">
      <div className="quiz-inner">
        <div className="sect-head" style={{textAlign:'center',margin:'0 auto 40px'}}>
          <span className="hub-eyebrow" style={{color:'var(--emerald-light)'}}>Free · 2 minutes</span>
          <h2 style={{color:'#fff',margin:'12px auto 8px'}}>What's your team's <strong style={{color:'var(--emerald-light)'}}>AI readiness score?</strong></h2>
          <p style={{color:'#cbd5e1',margin:'0 auto'}}>Answer six quick questions. We'll score your readiness and estimate the hours your team could recover every week, specific to insurance work.</p>
        </div>

        {!result && (
          <div className="quiz-body">
            {questions.map((q) => (
              <div key={q.id} className="quiz-q">
                <div className="quiz-q-label">{q.q}</div>
                <div className="quiz-opts">
                  {q.opts.map((o, idx) => (
                    <button
                      key={idx}
                      type="button"
                      className={`quiz-opt ${answers[q.id] === idx ? 'on' : ''}`}
                      onClick={() => pick(q.id, idx)}
                    >{o.label}</button>
                  ))}
                </div>
              </div>
            ))}
            <div className="quiz-actions">
              <button
                type="button"
                className="btn btn-primary"
                disabled={!allAnswered}
                onClick={() => setSubmitted(true)}
              >See my readiness score <IconArrowRight size={16} /></button>
              {!allAnswered && <span className="quiz-hint">Answer all six to see your score</span>}
            </div>
          </div>
        )}

        {result && (
          <div className="quiz-result">
            <div className="quiz-score-card">
              <div className="quiz-score-num">{result.readiness}<span>/100</span></div>
              <div className="quiz-score-tier">{result.tier}</div>
              <div className="quiz-score-label">AI Readiness</div>
            </div>
            <div className="quiz-savings">
              <div className="quiz-savings-num">~{result.hoursPerWeek} hrs<span>/week</span></div>
              <div className="quiz-savings-label">Estimated time your team could recover</div>
              <p className="quiz-savings-note">Across ~{result.teamSize} client-facing people, on quotes, benefit booklets, and proposals alone, once AI does the heavy lifting. Training turns these tasks from hours into minutes.</p>
              <div className="quiz-cta">
                <a href="#contact" className="btn btn-primary">Book a call to get your full report <IconArrowRight size={16} /></a>
                <button type="button" className="btn btn-ghost-on-dark" onClick={() => { setSubmitted(false); setAnswers({}); }}>Start over</button>
              </div>
            </div>
          </div>
        )}
        <p className="quiz-fineprint">Estimate only, based on typical insurance workflows. Your discovery call includes a tailored breakdown.</p>
      </div>
    </section>
  );
}
window.ReadinessQuiz = ReadinessQuiz;

// ── Podcasts ("learn more about me") ──────────────────────────────────────
function Podcasts() {
  // PLACEHOLDER links — swap href="#" for the real episode URLs.
  const eps = [
    {show: 'Podcast name', ep: 'Episode title to add', note: 'AI in insurance · founder story'},
    {show: 'Podcast name', ep: 'Episode title to add', note: 'Bottom-up AI adoption'},
    {show: 'Podcast name', ep: 'Episode title to add', note: 'Training that actually sticks'},
  ];
  return (
    <section className="section-wide" data-screen-label="Podcasts">
      <div className="sect-head" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:20}}>
        <div>
          <span className="hub-eyebrow">Listen</span>
          <h2 style={{margin:'12px 0 8px'}}>Get to know us <strong>in longer form.</strong></h2>
          <p style={{font:'400 20px/1.6 var(--font-sans)',color:'var(--fg-2)',margin:0}}>Where we've talked about AI in insurance, bottom-up adoption, and what actually works. <span className="ph-tag">Links pending</span></p>
        </div>
      </div>
      <div className="podcasts">
        {eps.map((e, i) => (
          <a key={i} href="#" className="pod-card">
            <span className="pod-icon"><IconPlay size={16} /></span>
            <span className="pod-body">
              <span className="pod-show">{e.show}</span>
              <span className="pod-ep">{e.ep}</span>
              <span className="pod-note">{e.note}</span>
            </span>
            <IconArrowRight size={16} />
          </a>
        ))}
      </div>
    </section>
  );
}
window.Podcasts = Podcasts;