/* AIReady™ home — sections. Green family (navy reserved for the Trust Standard
   governance band, which ties to the Atlas/Pulse tech products). */
(function () {
  const { Button, Badge, Eyebrow, Card, StatBlock } = window.GaiaAlliesDesignSystem_6e4515;
  const wrap = { maxWidth: 1180, margin: '0 auto', padding: '0 40px' };
  const DIAG = 'https://diagnostic.gaiaallies.com/score';
  const CAL = 'https://calendly.com/amy-adams/discovery';
  const SVC = '/services';
  const OH = '/office-hours';
  const ACAD = '/academy';

  /* Hero — green, declarative, outcome-first. Eyebrow rendered as a badge. */
  function HeroAIR() {
    return (
      <section id="top" className="s-green" style={{ paddingBlock: 104 }}>
        <div style={wrap}>
          <h1 style={{ fontSize: 'clamp(2.5rem, 4.6vw, 3.8rem)', lineHeight: 1.06, margin: '0', maxWidth: 900 }}>
            Put the AI in your firm to work.<br />And win back <em>hours on every matter.</em>
          </h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: 640 }}>
            We turn the AI your firm already has into real hours back on every matter, trained on your work and governed safe by default.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button variant="primary" size="lg" href={DIAG}>Take the free benchmark</Button>
            <Button variant="ghost" size="lg" href="#steps">See how it works</Button>
          </div>
        </div>
      </section>
    );
  }

  /* Trust strip — credentials and one hard number, before the scroll. */
  function TrustStrip() {
    const items = ['Two decades advising law firms', "Master's candidate at Harvard", 'Harvard Innovation Labs', 'ABA-approved paralegal', 'AI strategist, trainer & futurist'];
    return (
      <section className="s-deep reveal-skip" style={{ paddingBlock: 22, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="air-creds" style={{ ...wrap, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '10px 26px', justifyContent: 'space-between' }}>
          {items.map((t, i) => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 26, fontSize: 13, fontWeight: 600, letterSpacing: '.01em', color: i === items.length - 1 ? 'var(--ice)' : 'var(--fg-soft)' }}>
              {t}
            </span>
          ))}
        </div>
      </section>
    );
  }

  /* Proof — white, verified results from the litigation-firm case study */
  function Metrics() {
    return (
      <section id="results" className="s-white" style={{ paddingBlock: 72, borderBottom: '1px solid var(--line)' }}>
        <div style={wrap}>
          <h2 style={{ maxWidth: 600, marginBottom: 8 }}>Results your firm can <em>stand behind.</em></h2>
          <p style={{ margin: '0 0 40px', fontSize: 15, color: 'var(--fg-quiet)' }}>From a recent engagement with a 20-person litigation firm, on their real matters.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            <StatBlock value="5–15 min" label="Discovery drafting, down from 3 to 4 hours." />
            <StatBlock value="20 min" label="Firm-wide docket scheduling, down from half a day." />
            <StatBlock value="15 / 15" label="Participants rated the training positively." />
            <StatBlock value="Day one" label="The team using AI on real matters, same day." />
          </div>
          <div style={{ marginTop: 36 }}>
            <Button variant="ghost" size="sm" href="/case-study">Read the case study</Button>
          </div>
        </div>
      </section>
    );
  }

  /* How it works — the green collapsible offer shelf. Click a bar to open.
     Mirrors the five tabs on the Services page; each bar links to its tab. */
  function HowItWorks() {
    const [open, setOpen] = React.useState(0);
    const [mobile, setMobile] = React.useState(typeof window !== 'undefined' && window.matchMedia('(max-width:860px)').matches);
    React.useEffect(() => {
      const mq = window.matchMedia('(max-width:860px)');
      const fn = () => setMobile(mq.matches);
      mq.addEventListener('change', fn);
      return () => mq.removeEventListener('change', fn);
    }, []);
    const vols = [
      ['For you & your firm', 'Office Hours', 'Bring one real decision and leave with a clear recommendation you can act on that week.', 'Book Office Hours', OH],
      ['For you & your firm', 'Roadmap', 'A scored read of where your firm stands, plus a 90-day plan with named tools and the hours each one saves.', 'See the roadmap', SVC + '#roadmap'],
      ['For you & your firm', 'Advisory', 'A named partner for strategy, governance, and the weekly Pulse read, so the firm keeps moving as the rules change.', 'Explore advisory', SVC + '#advisor'],
      ['For your team', 'Training', 'Live, role-based sessions on your real matters, so your team uses AI with confidence the same day.', 'Explore the training', SVC + '#training'],
      ['For your team', 'Academy', 'CLE-track certification for the whole firm. Always-on training that scales past the live room. Launching soon.', 'Explore the Academy', ACAD],
    ];
    const audienceLabel = vols[open][0];
    return (
      <section id="steps" className="s-green" style={{ paddingBlock: 96, borderTop: '1px solid var(--line)' }}>
        <div style={wrap}>
          <Eyebrow>What we offer</Eyebrow>
          <h2 style={{ marginTop: 18, maxWidth: 640, color: 'var(--ice)' }}>Wherever your firm is today, there is <em>a solution for you.</em></h2>

          {!mobile && (
          <div style={{ display: 'inline-flex', gap: 6, padding: 5, borderRadius: 999, border: '1px solid var(--hairline)', background: 'var(--forest-mid)', margin: '24px 0 16px' }}>
            {['For you & your firm', 'For your team'].map((a) => {
              const on = a === audienceLabel;
              return (
                <span key={a} onClick={() => { const idxs = vols.map((v, i) => i).filter((i) => vols[i][0] === a); const pos = idxs.indexOf(open); setOpen(pos === -1 ? idxs[0] : idxs[(pos + 1) % idxs.length]); }} style={{ cursor: 'pointer', fontSize: 13, fontWeight: 600, letterSpacing: '.02em', padding: '8px 16px', borderRadius: 999, whiteSpace: 'nowrap', color: on ? 'var(--forest-deep)' : 'var(--fg-soft)', background: on ? 'var(--gold-h)' : 'transparent', transition: 'background .35s var(--ease), color .35s var(--ease)' }}>{a}</span>
              );
            })}
          </div>
          )}

          {mobile ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 24 }}>
              {vols.map(([audience, title, body, cta, href]) => (
                <div key={title} style={{ borderRadius: 'var(--radius-md)', border: '1px solid var(--hairline)', background: 'var(--forest-deep)', padding: 24 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--gold-h)' }}>{audience}</span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '1.5rem', color: 'var(--ice)', margin: '8px 0 0' }}>{title}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--fg-soft)', margin: '10px 0 0', lineHeight: 1.5 }}>{body}</p>
                  <a href={href} style={{ marginTop: 18, fontSize: 14, fontWeight: 700, color: 'var(--forest-deep)', background: 'var(--gold-h)', padding: '12px 20px', borderRadius: 'var(--radius-sm)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>{cta} →</a>
                </div>
              ))}
            </div>
          ) : (
          <div style={{ display: 'flex', gap: 12, height: 360 }}>
            {vols.map(([audience, title, body, cta, href], i) => {
              const active = open === i;
              return (
                <div key={title} onMouseEnter={() => setOpen(i)} onClick={() => setOpen(i)}
                  style={{ flex: active ? '1 1 56%' : '0 0 78px', position: 'relative', cursor: 'pointer', borderRadius: 'var(--radius-md)', overflow: 'hidden', border: '1px solid ' + (active ? 'var(--hairline)' : 'var(--line)'), background: active ? 'var(--forest-deep)' : 'var(--forest-mid)', transition: 'flex .45s var(--ease), background .3s var(--ease), border-color .3s var(--ease)' }}>
                  {active ? (
                    <div style={{ position: 'absolute', inset: 0, padding: 32, display: 'flex', flexDirection: 'column' }}>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '1.7rem', color: 'var(--ice)', margin: '0' }}>{title}</h3>
                      <p style={{ fontSize: 14.5, color: 'var(--fg-soft)', margin: '14px 0 0', maxWidth: '42ch', lineHeight: 1.5, flex: 1 }}>{body}</p>
                      <a href={href} style={{ marginTop: 'auto', alignSelf: 'flex-start', fontSize: 15, fontWeight: 700, color: 'var(--forest-deep)', background: 'var(--gold-h)', padding: '13px 22px', borderRadius: 'var(--radius-sm)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>{cta} →</a>
                    </div>
                  ) : (
                    <div style={{ position: 'absolute', inset: 0, padding: '24px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
                      <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontFamily: 'var(--font-display)', fontSize: '1.2rem', color: 'var(--ice)', letterSpacing: '.01em' }}>{title}</span>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          )}
        </div>
      </section>
    );
  }

  /* The AI Trust Standard — navy governance band, built out and specific. */
  function TrustStandard() {
    const points = [
      ['Your AI policy, in writing', 'A clear, signed policy: the tools your firm approves, what may go into them, and who signs off. Defensible from day one.'],
      ['Client data, protected', 'Confidentiality and privilege held by default, so nothing sensitive ever trains a public model.'],
      ['Bar ethics, covered', 'Competence, supervision, and disclosure mapped to the ABA Model Rules and your state bar, ready for clients and the court.'],
      ['A record you can show', 'Every AI-touched matter logged, with named human review, so the firm can prove its work on demand.'],
    ];
    return (
      <section id="trust" className="s-midnight" style={{ paddingBlock: 96 }}>
        <div style={wrap}>
          <Eyebrow>The AI Trust Standard</Eyebrow>
          <h2 style={{ marginTop: 18, maxWidth: '20ch' }}>Confidence, <em>built in from day one.</em></h2>
          <p style={{ marginTop: 16, maxWidth: '56ch', color: 'var(--fg-soft)' }}>
            AI only helps a firm if it is defensible. The AI Trust Standard is the governance layer that keeps every engagement safe for clients, the court, and the bar.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 44 }}>
            {points.map(([h, b]) => (
              <Card key={h} variant="outline" style={{ padding: 26 }}>
                <h3 style={{ color: 'var(--ice)', margin: '0 0 8px', fontSize: '1.12rem' }}>{h}</h3>
                <p style={{ margin: 0, fontSize: 14.5, color: 'var(--fg-soft)' }}>{b}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* Pulse callout — higher-level on what the Pulse is, on green, light text only. */
  function PulseCallout() {
    return (
      <section className="s-green-mid" style={{ paddingBlock: 96 }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Badge variant="outline">The Pulse · Members</Badge>
            <h2 style={{ marginTop: 18 }}>An intelligence engine for firms putting AI to <em>work.</em></h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: 480 }}>
              The Pulse is more than a newsletter. A proprietary engine reads what is moving across AI and the law each week, scores it against your firm, and returns the few shifts that matter and the move to make on them.
            </p>
            <div style={{ marginTop: 28 }}>
              <Button variant="primary" size="md" href="https://pulse.gaiaallies.com">Explore the Pulse</Button>
            </div>
          </div>
          <Card variant="outline" style={{ padding: 30 }}>
            {[
              ['Reads the field', 'Everything moving across AI and the law, every week.'],
              ['Scored for your firm', 'Filtered through your people, process, and technology.'],
              ['One clear move', 'The shift that matters, and what to do about it.'],
            ].map(([t, d], i) => (
              <div key={t} style={{ marginTop: i ? 16 : 0, paddingTop: i ? 16 : 0, borderTop: i ? '1px solid var(--line)' : 'none' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.1rem', fontWeight: 500, color: 'var(--ice)' }}>{t}</div>
                <p style={{ color: 'var(--fg-soft)', fontSize: 13.5, margin: '4px 0 0', lineHeight: 1.45 }}>{d}</p>
              </div>
            ))}
          </Card>
        </div>
      </section>
    );
  }

  /* Closing CTA — forest deep. Ends on the discovery call. */
  function BenchmarkAIR() {
    return (
      <section id="benchmark" className="s-deep" style={{ paddingBlock: 100 }}>
        <div style={{ ...wrap, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <h2 style={{ maxWidth: 720 }}>Find where AI pays off <em>at your firm.</em></h2>
          <p className="lead" style={{ marginTop: 16, marginInline: 'auto', textAlign: 'center' }}>
            Book a discovery call and we will map where your firm stands and the highest-return first step.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" size="lg" href={CAL}>Book a discovery call</Button>
          </div>
        </div>
      </section>
    );
  }

  /* Testimonials — green, real anonymized quotes, manual scroll */
  function Testimonials() {
    const quotes = [
      ['The AI training was thoughtfully tailored to our legal audience, making complex concepts clear, relevant, and immediately actionable.', 'Managing Partner', 'Litigation Firm'],
      ['It exceeded expectations and created real energy and momentum in the office. We have already begun implementing her recommendations.', 'Practice Director', 'Litigation Firm'],
      ['She struck the perfect balance between strategic insight and practical application. A true expert, especially within the legal sector.', 'Firm Leadership', 'Litigation Firm'],
      ['No problem is too sophisticated for her to solve. Her knowledge of how lawyers operate runs deep.', 'Principal Attorney', 'Boutique Law Firm'],
    ];
    const [i, setI] = React.useState(0);
    const go = (d) => setI((p) => (p + d + quotes.length) % quotes.length);
    const [q, name, role] = quotes[i];
    return (
      <section className="s-green" style={{ paddingBlock: 96, borderTop: '1px solid var(--line)' }}>
        <div style={wrap}>
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
            <Eyebrow>Testimonials</Eyebrow>
            <h2 style={{ marginTop: 18, color: 'var(--ice)', marginInline: 'auto', maxWidth: '22ch' }}>What legal teams say after working with <em>AIReady™.</em></h2>
          </div>
          <blockquote style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 'clamp(1.35rem, 2.2vw, 1.8rem)', lineHeight: 1.42, color: 'var(--ice)', margin: '44px auto 0', maxWidth: '34ch', textAlign: 'center' }}>{q}</blockquote>
          <div style={{ marginTop: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
            <span style={{ width: 30, height: 1, background: 'var(--gold)' }}></span>
            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ice)' }}>{name}</span>
            <span style={{ fontSize: 13, color: 'var(--fg-soft)' }}>{role}</span>
          </div>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
            {[['‹', -1], ['›', 1]].map(([g, d]) => (
              <button key={d} onClick={() => go(d)} aria-label={d < 0 ? 'Previous' : 'Next'}
                style={{ width: 48, height: 48, borderRadius: '50%', border: '1px solid var(--hairline)', background: 'transparent', color: 'var(--gold-h)', fontSize: 22, cursor: 'pointer', lineHeight: 1, transition: 'background .2s var(--ease)' }}>{g}</button>
            ))}
            <span style={{ marginLeft: 6, fontSize: 13, color: 'var(--fg-soft)', fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')} / {String(quotes.length).padStart(2, '0')}</span>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { HeroAIR, TrustStrip, Metrics, HowItWorks, TrustStandard, PulseCallout, Testimonials, BenchmarkAIR });
})();