// whetstone-manifesto.jsx
// Direction 3: The Manifesto. Full-bleed declarative statements,
// oversized type, alternating dark/light rhythm, opinionated.

const { Container, Logo, Photo, SERVICES, PRINCIPLES, AUDIENCE, TEAM, ContactForm } = window;

function Manifesto() {
  return (
    <div data-screen-label="03 Manifesto" style={{ fontFamily: 'var(--sans)' }}>
      <MfNav />
      <MfHero />
      <MfStatement />
      <MfServices />
      <MfPhilosophy />
      <MfAudience />
      <MfTeam />
      <MfContact />
      <MfFooter />
    </div>
  );
}

function MfNav() {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'color-mix(in oklab, var(--bg), transparent 5%)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--rule)',
      padding: '14px clamp(20px, 4vw, 56px)',
    }}>
      <Container style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Logo size={18} />
        <nav style={{
          display: 'flex', gap: 24,
          fontFamily: 'var(--mono)', fontSize: 11,
          textTransform: 'uppercase', letterSpacing: '0.14em',
        }}>
          {['Services', 'Method', 'Team'].map(l => (
            <a key={l} href={`#mf-${l.toLowerCase()}`} style={{
              color: 'var(--muted)', textDecoration: 'none',
            }}>{l}</a>
          ))}
          <a href="#mf-contact" style={{
            color: 'var(--accent)', textDecoration: 'none', fontWeight: 600,
          }}>Contact →</a>
        </nav>
      </Container>
    </header>
  );
}

function MfHero() {
  return (
    <section style={{
      padding: 'clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 88px)',
      borderBottom: '1px solid var(--rule)',
      minHeight: 'calc(100vh - 60px)',
      display: 'flex',
      flexDirection: 'column',
      boxSizing: 'border-box',
    }}>
      <Container style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        Whetstone — sharpen your skills
      </div>
      <h1 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(56px, 9vw, 144px)',
        lineHeight: 0.95,
        fontWeight: 400,
        letterSpacing: '-0.045em',
        color: 'var(--ink)',
        marginBottom: 0,
        textWrap: 'balance',
      }}>
        We hone<br/>
        how teams<br/>
        <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>think with AI.</em>
      </h1>
      <div style={{
        display: 'flex', gap: 48, marginTop: 'auto', paddingTop: 56, flexWrap: 'wrap',
        alignItems: 'flex-end',
      }}>
        <p style={{
          maxWidth: 540, fontSize: 19, lineHeight: 1.5, color: 'var(--muted)',
        }}>
          A method for working with AI, not a bag of tricks. Workshops, private sessions,
          and custom systems for teams that take their work seriously.
        </p>
        <a href="#mf-contact" style={{
          padding: '18px 32px', background: 'var(--accent)', color: 'var(--bg)',
          textDecoration: 'none',
          fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase',
          letterSpacing: '0.14em', fontWeight: 600, alignSelf: 'flex-end',
        }}>Start a conversation →</a>
      </div>
      </Container>
    </section>
  );
}

function MfStatement() {
  // Inverted dark band with a single declarative line
  return (
    <section style={{
      background: 'var(--ink)', color: 'var(--bg)',
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
    }}>
      <Container>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 01 / Premise
      </div>
      <p style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(36px, 6vw, 88px)',
        lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.025em',
        textWrap: 'balance',
      }}>
        Most people use AI like a fancy search engine.<br/>
        Ask once, get an answer — done.<br/>
        <span style={{ color: 'color-mix(in oklab, var(--bg), var(--accent) 50%)' }}>
          But AI is a partner, not an oracle.
        </span>
      </p>
      </Container>
    </section>
  );
}

function MfServices() {
  return (
    <section id="mf-services" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <Container>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 02 / Services
      </div>
      <h2 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(40px, 6vw, 80px)',
        lineHeight: 1.0, fontWeight: 400, letterSpacing: '-0.03em',
        marginBottom: 80, maxWidth: 1100, textWrap: 'balance',
      }}>
        Three ways in.<br/>
        Same approach.
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {SERVICES.map((s, i) => (
          <a key={s.id} href="#mf-contact" style={{
            display: 'grid', gridTemplateColumns: '120px 1fr 80px',
            gap: 32, padding: '40px 0', alignItems: 'baseline',
            borderTop: '1px solid var(--rule)',
            textDecoration: 'none', color: 'inherit',
            transition: 'background .15s, padding .15s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'color-mix(in oklab, var(--bg), var(--accent) 4%)';
            e.currentTarget.style.paddingLeft = '20px';
            e.currentTarget.style.paddingRight = '20px';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = 'transparent';
            e.currentTarget.style.paddingLeft = '0';
            e.currentTarget.style.paddingRight = '0';
          }}
          >
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--accent)',
              letterSpacing: '0.14em',
            }}>{s.n}</div>
            <div>
              <h3 style={{
                fontFamily: 'var(--display)', fontSize: 'clamp(28px, 3.6vw, 44px)',
                fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1,
                marginBottom: 12, color: 'var(--ink)', textWrap: 'balance',
              }}>{s.title}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.55, maxWidth: 720 }}>
                {s.blurb}
              </p>
            </div>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--ink)',
              textAlign: 'right',
            }}>→</div>
          </a>
        ))}
        <div style={{ borderTop: '1px solid var(--rule)' }}></div>
      </div>
      </Container>
    </section>
  );
}

function MfPhilosophy() {
  return (
    <section id="mf-method" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <Container>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 03 / Method
      </div>
      <h2 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(40px, 6vw, 80px)',
        lineHeight: 1.0, fontWeight: 400, letterSpacing: '-0.03em',
        marginBottom: 64, maxWidth: 1200, textWrap: 'balance',
      }}>
        <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>You</em> are the expert.<br/>
        AI is the <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>amplifier</em>.
      </h2>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 64,
      }}>
        {PRINCIPLES.map(p => (
          <div key={p.label}>
            <h3 style={{
              fontFamily: 'var(--display)', fontSize: 28, fontWeight: 500,
              letterSpacing: '-0.015em', marginBottom: 12, color: 'var(--accent)',
            }}>{p.label}</h3>
            <p style={{ color: 'var(--ink)', fontSize: 16, lineHeight: 1.6 }}>
              {p.body}
            </p>
          </div>
        ))}
      </div>
      </Container>
    </section>
  );
}

function MfAudience() {
  return (
    <section style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <Container>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 04 / Audience
      </div>
      <h2 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(40px, 6vw, 80px)',
        lineHeight: 1.0, fontWeight: 400, letterSpacing: '-0.03em',
        marginBottom: 64, maxWidth: 1100, textWrap: 'balance',
      }}>
        Built for teams that<br/>take their work seriously.
      </h2>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
      }}>
        {AUDIENCE.map((a, i) => (
          <div key={a.tag} style={{
            padding: '40px 32px',
            borderTop: '1px solid var(--rule)',
            borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 0,
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)',
              letterSpacing: '0.14em',
            }}>0{i + 1}</div>
            <h3 style={{
              fontFamily: 'var(--display)', fontSize: 'clamp(24px, 2.6vw, 32px)',
              fontWeight: 500, letterSpacing: '-0.015em', color: 'var(--ink)',
            }}>{a.tag}</h3>
            <p style={{ color: 'var(--muted)', fontSize: 15.5, lineHeight: 1.55 }}>{a.ex}</p>
          </div>
        ))}
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        marginTop: 48,
      }}>
        <Photo src="images/scene-workshop.jpg" alt="Workshop scene" ratio="4/3" fallbackLabel="workshop / room a" />
        <Photo src="images/scene-working-session.jpg" alt="Working session" ratio="4/3" fallbackLabel="working session" />
        <Photo src="images/scene-install.jpg" alt="On-site install" ratio="4/3" fallbackLabel="install / on-site" />
      </div>
      </Container>
    </section>
  );
}

function MfTeam() {
  return (
    <section id="mf-team" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <Container style={{ maxWidth: 1040 }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 05 / Team
      </div>
      <h2 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(40px, 6vw, 80px)',
        lineHeight: 1.0, fontWeight: 400, letterSpacing: '-0.03em',
        marginBottom: 64, maxWidth: 1100, textWrap: 'balance',
      }}>
        Two founders.<br/>
        Two builders. <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Two teachers.</em>
      </h2>
      <div style={{
        display: 'flex', justifyContent: 'space-evenly', alignItems: 'flex-start',
        gap: 32, flexWrap: 'wrap',
      }}>
        {TEAM.map(t => (
          <div key={t.name} style={{ width: 260, maxWidth: '100%' }}>
            <Photo src={t.photo} alt={t.name} ratio="4/5" />
            <h3 style={{
              fontFamily: 'var(--display)', fontSize: 'clamp(28px, 3vw, 36px)',
              fontWeight: 500, letterSpacing: '-0.015em',
              margin: '24px 0 6px', color: 'var(--ink)',
            }}>{t.name}</h3>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)',
              letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 14,
            }}>{t.role}</div>
            <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.55, maxWidth: 480 }}>
              {t.bio}
            </p>
          </div>
        ))}
      </div>
      </Container>
    </section>
  );
}

function MfContact() {
  return (
    <section id="mf-contact" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(20px, 4vw, 56px)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <Container>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 36,
      }}>
        § 06 / Contact
      </div>
      <h2 style={{
        fontFamily: 'var(--display)',
        fontSize: 'clamp(44px, 7vw, 96px)',
        lineHeight: 0.98, fontWeight: 400, letterSpacing: '-0.035em',
        marginBottom: 24, maxWidth: 1200, textWrap: 'balance',
      }}>
        Tell us what<br/>
        you're working on.
      </h2>
      <p style={{
        color: 'var(--muted)', fontSize: 18,
        marginBottom: 48, maxWidth: 600,
      }}>
        Three short steps. We reply within one business day.
      </p>
      <div style={{ maxWidth: 880 }}>
        <ContactForm variant="manifesto" />
      </div>
      </Container>
    </section>
  );
}

function MfFooter() {
  return (
    <footer style={{
      padding: '40px clamp(20px, 4vw, 56px)',
      fontFamily: 'var(--mono)', fontSize: 11,
      textTransform: 'uppercase', letterSpacing: '0.1em',
      color: 'var(--muted)',
    }}>
      <Container style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        flexWrap: 'wrap', gap: 16,
      }}>
        <Logo size={20} />
        <div>hello@whetstonegroup.ai</div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <a href="/privacy" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <span>© {new Date().getFullYear()} Whetstone Group</span>
        </div>
      </Container>
    </footer>
  );
}

window.Manifesto = Manifesto;