/* global React, Icon */
const { useState: useStateC3 } = React;

const Ecosystem = () => {
  const groups = ["Professional associations", "Credential issuers", "Professional firms", "Indemnity providers", "Assurance networks", "AI enablement partners"];
  return (
    <section id="partners" className="ecosystem-section">
      <div className="page-grid section-grid">
        <div className="section-copy reveal">
          <p className="eyebrow">Partner ecosystem</p>
          <h2>The upside should not go only to model providers.</h2>
          <p>Professional associations can set the standards and issue credentials. Firms can productize their methods. Indemnity, payments, accounting, and secure communications can sit around the client relationship instead of outside it.</p>
        </div>
        <div className="ecosystem-map reveal delay-1">
          {groups.map((group, index) => <div style={{ "--i": index }} key={group}>{group}</div>)}
        </div>
      </div>
    </section>
  );
};

const testimonials = [
  {
    quote: "I was tired of hearing that AI would make advice cheap. The POD model gave us a better answer: give the client a private room, let agents prepare the evidence, and make the adviser clearly responsible for the recommendation.",
    name: "Maya Chen",
    title: "Senior Adviser",
    organization: "Placeholder Wealth",
    domain: "Financial advice",
    metric: "Private advice POD mapped in one Blueprint"
  },
  {
    quote: "The Blueprint model made the commercial conversation sharper. We stopped selling time and started defining the result, credentials required, evidence needed, prepaid settlement, and the point where a qualified professional had to make the call.",
    name: "Daniel Rao",
    title: "Managing Director",
    organization: "Placeholder Legal Network",
    domain: "Contract review",
    metric: "5 reusable review paths"
  },
  {
    quote: "For an association, the important part is standards. Members can use agents, but the credentialing rules, review points, and accountability are visible before anyone sells the service.",
    name: "Elena Brooks",
    title: "Standards Lead",
    organization: "Placeholder Association",
    domain: "Professional certification",
    metric: "12 member firms onboarded"
  }
];

const Testimonials = () => {
  const [active, setActive] = useStateC3(0);
  const item = testimonials[active];
  return (
    <section className="testimonial-section">
      <div className="page-grid">
        <div className="testimonial-shell reveal">
          <div className="testimonial-copy">
            <p className="eyebrow">Proof</p>
            <blockquote>{item.quote}</blockquote>
            <div className="person">
              <strong>{item.name}</strong>
              <span>{item.title} · {item.organization}</span>
              <small>{item.domain} · {item.metric}</small>
            </div>
          </div>
          <div className="testimonial-controls" aria-label="Testimonial controls">
            {testimonials.map((_, index) => (
              <button type="button" aria-label={`Show testimonial ${index + 1}`} className={active === index ? "active" : ""} onClick={() => setActive(index)} key={index}>{String(index + 1).padStart(2, "0")}</button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const LogoSection = () => {
  const logos = ["Qi", "IXO", "Assurance Lab", "Standards Forum", "Impact Network", "Health Consortium", "Public Sector", "Research Partner"];
  return (
    <section className="logo-section">
      <div className="page-grid">
        <p className="eyebrow reveal">Ecosystem</p>
        <div className="logo-wall reveal delay-1">
          {logos.map((logo) => <span key={logo}>{logo}</span>)}
        </div>
      </div>
    </section>
  );
};

const PartnerProgram = () => {
  const [step, setStep] = useStateC3(1);
  const [submitted, setSubmitted] = useStateC3(false);
  const next = () => setStep((value) => Math.min(3, value + 1));
  const back = () => setStep((value) => Math.max(1, value - 1));
  return (
    <section id="contact" className="partner-program-section">
      <div className="page-grid partner-program-grid">
        <div className="section-copy reveal">
          <p className="eyebrow">Design POD invitation</p>
          <h2>Stop waiting to see what AI does to your job.</h2>
          <p>Bring one service you already know how to deliver. In a guided Design POD, we map the work into a Blueprint: credentials, client room, Matrix privacy, agent tasks, live consultation points, indemnity assumptions, evidence, and outcome payment logic.</p>
          <div className="design-pod-card">
            <span>Live POD preview</span>
            <h3>This is not a demo deck. It is a first version of your future service.</h3>
            <p>Instead of a sales call, you enter a structured workspace with roles, credential checks, evidence prompts, consultation templates, review gates, and a draft Blueprint record.</p>
          </div>
          <div className="program-steps">
            <p><span>01</span> Pick the service clients already value</p>
            <p><span>02</span> Decide what agents do, what credentials are required, and what only you decide</p>
            <p><span>03</span> Leave with a Blueprint record you can critique, price, insure, and improve</p>
          </div>
        </div>
        <form className="partner-form reveal delay-1" onSubmit={(event) => { event.preventDefault(); setSubmitted(true); }}>
          {!submitted ? (
            <>
              <div className="form-progress"><span style={{ width: `${step * 33.333}%` }} /></div>
              <p className="form-note">Step {step} of 3 · No vague discovery call. These answers become the starting evidence for your first Design POD.</p>
              {step === 1 && (
                <div className="form-grid">
                  <label>Name<input required name="name" /></label>
                  <label>Organization<input required name="organization" /></label>
                  <label>Role<input name="role" /></label>
                  <label>Email<input required type="email" name="email" /></label>
                </div>
              )}
              {step === 2 && (
                <div className="form-grid single">
                  <label>Professional domain<input name="domain" /></label>
                  <label>Service outcome clients should be able to buy<textarea name="outcome" rows="3" /></label>
                  <label>Current delivery model<textarea name="delivery" rows="3" /></label>
                  <label>Where must the professional consult, support, or make the call?<textarea name="review" rows="3" /></label>
                </div>
              )}
              {step === 3 && (
                <div className="form-grid single">
                  <label>Evidence sources<textarea name="evidence" rows="3" /></label>
                  <label>Credentialing, regulatory, indemnity, or association requirements<textarea name="constraints" rows="3" /></label>
                  <label>How should prepaid outcome settlement and accounting work?<input name="commercial" /></label>
                  <label>What are you most worried AI will take from this service?<textarea name="message" rows="3" /></label>
                </div>
              )}
              <div className="form-actions">
                {step > 1 && <button type="button" className="btn btn-secondary" onClick={back}>Back</button>}
                {step < 3 ? <button type="button" className="btn btn-primary" onClick={next}>Continue</button> : <button type="submit" className="btn btn-primary">Request Design POD access</button>}
              </div>
            </>
          ) : (
            <div className="confirmation">
              <Icon name="check" size={32} />
              <h3>Your Design POD request has been received.</h3>
              <p>We will review the service, credential requirements, human assurance points, privacy model, and settlement logic before opening the first POD workspace.</p>
            </div>
          )}
        </form>
      </div>
    </section>
  );
};

const Faq = () => {
  const [open, setOpen] = useStateC3(0);
  return (
    <section className="faq-section">
      <div className="page-grid section-grid">
        <div className="section-copy reveal">
          <p className="eyebrow">FAQ</p>
          <h2>The questions people are actually asking.</h2>
        </div>
        <div className="faq-list reveal delay-1">
          {faqs.map(([question, answer], index) => (
            <div className="faq-item" key={question}>
              <button type="button" onClick={() => setOpen(open === index ? -1 : index)} aria-expanded={open === index}>
                <span>{question}</span><strong>{open === index ? "−" : "+"}</strong>
              </button>
              <div className={open === index ? "faq-answer is-open" : "faq-answer"}><p>{answer}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const faqs = [
  ["Is this just another AI tool?", "No. A POD is a private service environment: client room, credentials, evidence, agent tasks, human consultation, professional assurance, outcome, and settlement in one place."],
  ["Why would this not replace me?", "Because the professional owns the relationship, assurance, live client support, and final judgment. Agents do bounded work inside a POD; they do not become the accountable service provider."],
  ["Who decides whether an agent or expert is qualified?", "Professional associations and standards bodies can define the requirements and issue digital credentials to agents, human experts, and firms."],
  ["What is a Service Blueprint?", "Your method written down as an operating model: what gets delivered, what credentials are needed, what agents can do, where humans decide, how consultations are summarized, and how the outcome is paid for."],
  ["How private is the client space?", "PODs are designed around encrypted Matrix-based rooms for consultations, document sharing, transcripts, and summaries, with sovereign data storage and client control designed to support GDPR-aligned workflows."],
  ["What if the agent is wrong?", "Then the record matters. The POD shows the source evidence, the agent work, the expert review, the credentialed professional responsible, and the final determination."],
  ["Where does professional indemnity insurance fit?", "PODs preserve the client-service provider relationship, so professional indemnity cover can sit around the accountable service and the people or firms responsible for it."],
  ["Can a junior professional use this without being deskilled?", "That is the opportunity. Junior work can shift from formatting and chasing data to supervising evidence, understanding exceptions, and learning how expert judgment is made."],
  ["How do payments or settlement work?", "Services can be mostly prepaid, with guaranteed settlement when an accepted outcome is delivered. Accounting records are auditable and can integrate with the firm's existing finance systems."],
  ["How does a firm become AI-enabled?", "By building POD Blueprints. The same Blueprint can run internally for existing clients, or be forward-deployed into new markets as a virtualized professional service."]
];

Object.assign(window, { Ecosystem, Testimonials, LogoSection, PartnerProgram, Faq });