/* gaia allies — simple AI advisory homepage. Voice: no contractions, no em dashes,
   lead with opportunity and time. One blended practice, not multiple hats. */
(function () {
  const { Button, Eyebrow, Card } = window.GaiaAlliesDesignSystem_6e4515;
  const wrap = { maxWidth: 1180, margin: '0 auto', padding: '0 40px' };
  const CAL = 'https://calendly.com/amy-adams/discovery-call-gaia';

  /* Hero — opportunity and time, with portrait */
  function Hero() {
    return (
      <section id="top" className="s-green" style={{ paddingBlock: 'clamp(112px, 16vh, 168px)' }}>
        <div style={{ ...wrap, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <Eyebrow>
            AI Governance · Strategy ·{' '}
            <span className="hero-eyebrow-line2">Executive Advisory</span>
          </Eyebrow>
          <h1 style={{ fontSize: 'clamp(2.6rem, 5.4vw, 4.4rem)', lineHeight: 1.08, margin: '24px 0 0', maxWidth: '18ch' }}>
            Put AI to work, and <em>give your team their time back.</em>
          </h1>
          <p className="lead" style={{ marginTop: 28, maxWidth: 640 }}>
            Gaia Allies is the executive advisory for leaders adopting AI, with the strategy, governance, and training to turn it into real capability.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 38, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" size="lg" href={CAL}>Book a consult</Button>
            <Button variant="ghost" size="lg" href="#practice">See the advisory</Button>
          </div>
        </div>
      </section>
    );
  }

  /* Credential ribbon */
  function ProofBand() {
    const creds = ['Harvard University', 'Harvard Innovation Labs', 'ABA-certified Paralegal', 'Women Defining AI'];
    return (
      <section className="s-white" style={{ paddingBlock: 54, borderBottom: '1px solid var(--line)' }}>
        <div className="air-creds home-creds" style={{ ...wrap, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 0 }}>
          {creds.map((c, i) => (
            <span key={c} className="air-stepcard" style={{ fontSize: 13.5, letterSpacing: '.03em', color: 'var(--fg-muted)', padding: '0 26px', borderRight: i < creds.length - 1 ? '1px solid var(--border)' : 'none' }}>{c}</span>
          ))}
        </div>
      </section>
    );
  }

  /* One blended practice — short pillars, no long paragraphs */
  function Practice() {
    const pillars = [
      ['AI strategy', 'A grounded read of where you stand, and a prioritized plan for what to adopt first.'],
      ['Governance', 'The policy, guardrails, and oversight that keep AI sound and defensible.'],
      ['Training', 'Role-based enablement, so your people adopt AI with judgment on real work.'],
      ['Advisory', 'A standing partner through every shift in the tools and the rules.'],
    ];
    return (
      <section id="practice" className="s-white" style={{ padding: '96px 0 48px' }}>
        <div style={wrap}>
          <Eyebrow>The work</Eyebrow>
          <h2 style={{ marginTop: 18, maxWidth: '20ch' }}>Executive advisory for <em>adopting AI.</em></h2>
          <p style={{ marginTop: 16, maxWidth: '58ch', fontSize: 16.5, color: 'var(--fg-muted)', lineHeight: 1.6 }}>
            I help leaders put AI to work, with the strategy, governance, and training to make it real, and the judgment to keep it sound.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28, marginTop: 48 }}>
            {pillars.map(([h, b]) => (
              <div key={h}>
                <h3 style={{ fontSize: '1.15rem', margin: '0 0 8px', color: 'var(--ink-green)' }}>{h}</h3>
                <p style={{ fontSize: 14.5, margin: 0, color: 'var(--fg-muted)', lineHeight: 1.5 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* For law firms — the clear route into AIReady so legal clients are not lost */
  function ForFirms() {
    const [hov, setHov] = React.useState(false);
    return (
      <section id="for-firms" className="s-white" style={{ padding: '24px 0 80px' }}>
        <div style={wrap}>
          <div
            onMouseEnter={() => setHov(true)}
            onMouseLeave={() => setHov(false)}
            style={{ borderRadius: 'var(--radius-lg)', border: '1px solid rgba(201,162,74,.5)', boxShadow: hov ? '0 36px 80px -26px rgba(0,0,0,.6)' : 'var(--shadow-lift)', background: 'radial-gradient(130% 130% at 82% 0%, rgba(201,162,74,.18), rgba(201,162,74,0) 55%), linear-gradient(135deg, #1d4a35 0%, #0f2e20 78%)', padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', transform: hov ? 'translateY(-6px)' : 'translateY(0)', transition: 'transform .4s var(--ease), box-shadow .4s var(--ease)' }}>
            <h2 style={{ marginTop: 0, color: 'var(--ice)', maxWidth: '20ch', marginInline: 'auto' }}>Run a law firm?<br />Start with <em style={{ color: 'var(--gold-h)', fontStyle: 'italic' }}>AIReady™.</em></h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: 480, marginInline: 'auto', color: 'rgba(244,241,231,.82)' }}>
              Turn the AI in your firm into hours back on every matter.
            </p>
            <div style={{ marginTop: 28 }}>
              <Button variant="primary" size="lg" href="/aiready">Explore AIReady™</Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* Discovery-call close */
  function CTA() {
    return (
      <section id="start" className="s-green" style={{ paddingBlock: 100 }}>
        <div style={{ ...wrap, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <h2 style={{ maxWidth: 720, color: 'var(--ice)' }}>Work that took hours, <em>now takes minutes.</em></h2>
          <p className="lead" style={{ marginTop: 16, textAlign: 'center', maxWidth: 520 }}>
            Book a consult and we will map where AI pays off for your team, and the clearest first step.
          </p>
          <div style={{ marginTop: 30 }}>
            <Button variant="primary" size="lg" href={CAL}>Book a consult</Button>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { Hero, ProofBand, Practice, ForFirms, CTA });
})();