const { Button, Eyebrow, SectionHeading, Tag } = window.AterraDesignSystem_75d442;

function Rise({ children, delay = 0, className = '' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { node.classList.add('is-in'); io.unobserve(node); } });
    }, { rootMargin: '0px 0px -6% 0px', threshold: 0.05 });
    io.observe(node);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className={['rise', className].filter(Boolean).join(' ')} style={{ transitionDelay: delay + 'ms' }}>{children}</div>;
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero__grid">
        <div className="hero__col">
          <Rise><Eyebrow>AI build partner / Tbilisi, Georgia</Eyebrow></Rise>
          <Rise delay={60}><h1 className="hero__title">The build team behind your AI work.</h1></Rise>
          <Rise delay={120}><p className="hero__lead">Agencies and consultancies bring us the scope. We build the system that ships: AI agents in production, workflow automation, and the software around them. Your repositories, your client, your name on it.</p></Rise>
          <Rise delay={180}>
            <div className="hero__actions">
              <Button variant="accent" size="lg" href="mailto:hello@aterrasolutions.io" arrow>Start a conversation</Button>
              <Button variant="secondary" size="lg" href="#capabilities">See what we build</Button>
            </div>
            <p className="hero__note">Write to hello@aterrasolutions.io. No forms, no sales sequence.</p>
          </Rise>
          <Rise delay={240}>
            <div className="hero__meta">
              <span>White-label or named</span>
              <span>Fixed scope per increment</span>
              <span>Built for handover</span>
            </div>
          </Rise>
        </div>
        <Rise delay={200} className="hero__art"><SystemDiagram /></Rise>
      </div>
    </section>
  );
}

const PROBLEMS = [
  ['01', 'The demo does not survive the client’s data.', 'A prototype that answers questions is not a system that runs inside a process. What sits between them is retrieval, tool use, approvals and evaluation. That is where the timeline goes.'],
  ['02', 'The scope needs an engineer to write it.', 'Clients want to know what the agent will do, what it can touch, and what happens when it gets something wrong. Those answers come from someone who has shipped one before.'],
  ['03', 'Hiring for one project does not work.', 'The skills are narrow, the engagement is finite, and the team goes quiet the week after launch. A partner you can start and stop costs less than a bench you cannot.'],
];

function Problem() {
  return (
    <section className="band band--rule" id="problem">
      <div className="wrap">
        <Rise><div className="head"><SectionHeading eyebrow="Where the work stalls" title="You sold the system. Someone has to build it." description="Three places agency AI work comes apart after the pitch." /></div></Rise>
        <div className="probs">
          {PROBLEMS.map(([i, t, d], n) => (
            <Rise key={i} delay={n * 70}>
              <article className="prob">
                <span className="prob__i">{i}</span>
                <h3 className="prob__t">{t}</h3>
                <p className="prob__d">{d}</p>
              </article>
            </Rise>
          ))}
        </div>
      </div>
    </section>
  );
}

const CAPABILITIES = [
  ['01', 'AI agent systems', 'Production agents that retrieve the right context, use the right tools, bring a person in when the call is theirs, and produce work that can be checked.', ['Retrieval', 'Tool use', 'Approvals', 'Evaluation']],
  ['02', 'Workflow automation', 'Systems that move work across teams and tools with explicit approvals, clean handoffs, and a record of what happened.', ['Approvals', 'Handoffs', 'Visibility']],
  ['03', 'Data and integrations', 'Dependable connections between CRMs, document stores, internal APIs, and the systems the business already runs on.', ['CRMs', 'Document stores', 'Internal APIs']],
  ['04', 'Product engineering', 'The web applications, services, infrastructure and operational groundwork that turn an AI capability into software people use.', ['Web apps', 'Services', 'Infrastructure']],
];

function Capabilities() {
  return (
    <section className="band band--rule" id="capabilities">
      <div className="wrap">
        <Rise><div className="head"><SectionHeading eyebrow="Capabilities" title="Four places we do the work" description="Four kinds of build, all of it delivered as software your client owns." /></div></Rise>
        <div className="caps">
          {CAPABILITIES.map(([i, t, d, tags], n) => (
            <Rise key={i} delay={n * 60}>
              <article className="cap">
                <span className="cap__i">{i}</span>
                <h3 className="cap__t">{t}</h3>
                <p className="cap__d">{d}</p>
                <div className="cap__list">{tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}</div>
              </article>
            </Rise>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  ['01 / Frame', 'Frame', 'We start with the constraint, not the roadmap. The stage ends with a written problem statement, a target you can measure, and the smallest system worth building. You can hand that document to your client as it is.'],
  ['02 / Build', 'Build', 'Work ships in short increments against a running system, reviewed against the target rather than a status deck. It is production code from the first increment.'],
  ['03 / Improve', 'Improve', 'Once real work runs through it, the system is instrumented, evaluated and tuned. A system that cannot be measured cannot be trusted with the process.'],
];

function Process() {
  return (
    <section className="band band--lg band--dark on-dark" id="process">
      <div className="wrap">
        <Rise><div className="head"><SectionHeading eyebrow="Process" title="Frame, build, improve" description="Three stages, run in that order, on every engagement." /></div></Rise>
        <div className="steps">
          {STEPS.map(([kicker, title, body], n) => (
            <Rise key={title} delay={n * 80}>
              <article className="step">
                <span className="step__i">{kicker}</span>
                <h3 className="step__t">{title}</h3>
                <p className="step__d">{body}</p>
              </article>
            </Rise>
          ))}
        </div>
      </div>
    </section>
  );
}

const FACTS = [
  ['How we engage', 'Subcontracted to your agency, or contracted directly by your client. Your call.'],
  ['Whose name', 'White-label as part of your team, or named as your build partner.'],
  ['How we work', 'In your project channel, on your board, at your review cadence.'],
  ['How we scope', 'Short increments. Each one has a single written target and a fixed price.'],
  ['What you keep', 'The repositories, the infrastructure and the intellectual property are yours.'],
  ['Working hours', 'We hold our afternoons open so they land on the US morning.'],
];

function Agencies() {
  return (
    <section className="band" id="agencies">
      <div className="wrap">
        <Rise><div className="head head--tight"><SectionHeading eyebrow="Working with agencies" title="We build. You keep the client." description="Most of our work reaches a client through someone else’s engagement." /></div></Rise>
        <Rise delay={80}><EngagementDiagram /></Rise>
        <div className="eng">
          <Rise delay={120}>
            <p className="eng__lead">You keep the relationship, the account and the invoice. We take the system.</p>
          </Rise>
          <Rise delay={160}>
            <div>
              <p>Scope arrives as a written problem statement and one measurable target. Code lands in repositories you control. Deploys run on infrastructure your client owns. What you get at the end is a system your team can read and operate without us in the room.</p>
              <p>When it helps to introduce us, we join the client call as your build partner. When it does not, you never say our name.</p>
            </div>
          </Rise>
        </div>
        <Rise delay={200}>
          <dl className="facts">
            {FACTS.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
          </dl>
        </Rise>
      </div>
    </section>
  );
}

const QUESTIONS = [
  ['Can you work under our brand?', 'Yes, and it is the default. On the client’s side we appear as your team: your repositories, your project channel, your review meetings. Where you would rather name us as your build partner, we show up and answer for the engineering.'],
  ['Who owns what gets built?', 'You or your client, agreed before the first commit and written into the contract. Code lands in repositories you control and runs on infrastructure you control. There is no Aterra platform to stay subscribed to and nothing licensed back to you.'],
  ['How do you scope work nobody has built before?', 'That is what the Frame stage is for. It ends with a written problem statement, a target you can measure, and the smallest system worth building. That document is what you need to quote the work and what your client needs to approve it. If the honest answer is that the system should not be built, we write that instead.'],
  ['What if the client’s data is not ready?', 'It usually is not. Records are duplicated, documents are unstructured, and the CRM holds three versions of the truth. We treat that as part of the build rather than a surprise raised later, and we say plainly which parts of a workflow cannot be automated until the underlying data is fixed.'],
  ['What do you not do?', 'Brand, design systems, paid media, and ongoing helpdesk support. We build software and hand it over. If someone needs to run the system afterwards, we train your team or an operations partner to do it.'],
  ['Aterra is a new company. Why take the risk?', 'Because we would rather put that in writing than imply a decade of case studies. Start us on one increment with a fixed scope and a written target. You see the code, the deploy and the evaluation before anything larger is committed. It is how we would want to hire a build partner ourselves.'],
];

function Questions() {
  return (
    <section className="band band--rule" id="questions">
      <div className="wrap">
        <Rise><div className="head"><SectionHeading eyebrow="Questions" title="What agencies ask first" description="The things we would want settled before subcontracting a build." /></div></Rise>
        <Rise delay={60}>
          <div className="faq">
            {QUESTIONS.map(([q, a]) => (
              <details key={q}>
                <summary><span className="faq__q">{q}</span><span className="faq__x">+</span></summary>
                <p className="faq__a">{a}</p>
              </details>
            ))}
          </div>
        </Rise>
      </div>
    </section>
  );
}

const SEND = [
  ['01', 'The process or the product that is stuck'],
  ['02', 'What the client has already been promised'],
  ['03', 'Any date you are working against'],
];

function Contact() {
  return (
    <section className="band band--lg band--dark on-dark" id="contact">
      <div className="wrap ct">
        <div>
          <Rise><Eyebrow>Contact</Eyebrow></Rise>
          <Rise delay={60}><h2 className="ct__title">Tell us what needs to move.</h2></Rise>
          <Rise delay={120}><p className="ct__lead">One email is enough to start. Describe the system you have sold or the process that is stuck, and we reply with what we would do first.</p></Rise>
          <Rise delay={180}>
            <a className="contact__mail" href="mailto:hello@aterrasolutions.io"><span>hello@</span><span>aterrasolutions.io</span></a>
          </Rise>
        </div>
        <Rise delay={240}>
          <dl className="send">
            <dt className="send__h">What to send</dt>
            {SEND.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
          </dl>
        </Rise>
      </div>
    </section>
  );
}

Object.assign(window, { Rise, Hero, Problem, Capabilities, Process, Agencies, Questions, Contact });