/* global React */
const { Button, Card, Field, Input, Select, ClaimCeiling, GradientText, Chip } = window.OregonCoastAIDesignSystem_e04d97;

function IntakeScreen({ onRequestDemo, contactEmail = "ken@mendozalab.io" }) {
  const Wrap = window.OCAWrap;
  const [sent, setSent] = React.useState(false);

  return (
    <div>
      <header style={{ padding: "56px 0 40px", borderBottom: "1px solid var(--border-line)" }}>
        <Wrap>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-accent)" }}>Intake</div>
          <h2 style={{ fontSize: "clamp(28px,4.4vw,46px)", lineHeight: 1.12, margin: "14px 0 16px", fontWeight: 700, color: "var(--text-strong)" }}>
            Start with a <GradientText>scoped ask</GradientText>.
          </h2>
          <p style={{ fontSize: "clamp(16px,1.6vw,19px)", color: "var(--text-body)", maxWidth: "60ch", margin: 0, lineHeight: 1.6 }}>
            Tell us your organization, the cohort you hold, and the claim you hope to support. We reply with feasibility — or an honest no. Qualified sponsors receive a key to the interactive de-mixing demo.
          </p>
        </Wrap>
      </header>

      <section style={{ padding: "48px 0" }}>
        <Wrap>
          <div className="cards-2" style={{ alignItems: "start", gridTemplateColumns: "1.4fr 1fr" }}>
            <Card padding="28px">
              {sent ? (
                <div style={{ textAlign: "center", padding: "28px 0" }}>
                  <p style={{ fontFamily: "var(--font-mono)", fontSize: "12px", color: "var(--success)", textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 10px" }}>Draft opened</p>
                  <p style={{ color: "var(--text-body)", margin: "0 0 18px", lineHeight: 1.6 }}>Your scoping request was prepared for {contactEmail}. We respond with feasibility and a fixed scope, typically within two business days.</p>
                  <Button variant="secondary" onClick={() => setSent(false)}>Edit request</Button>
                </div>
              ) : (
                <form onSubmit={(e) => {
                  e.preventDefault();
                  const f = e.target;
                  const body = encodeURIComponent(`Organization: ${f.org.value}\nRole: ${f.role.value}\nEngagement: ${f.engagement.value}\n\nCohort / data:\n${f.cohort.value}\n\nClaim intent:\n${f.claim.value}`);
                  window.location.href = `mailto:${contactEmail}?subject=${encodeURIComponent("De-mixing scoping request — " + (f.org.value || "inquiry"))}&body=${body}`;
                  setSent(true);
                }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 16px" }}>
                    <Field label="Organization"><Input name="org" placeholder="Lab, sponsor, or company" required /></Field>
                    <Field label="Your role"><Input name="role" placeholder="e.g. Head of Clinical Development" /></Field>
                  </div>
                  <Field label="Engagement type">
                    <Select name="engagement" options={["Feasibility read (Step 1)", "Sponsored de-mixing (Step 2)", "Co-development / grant track (Step 3)", "Not sure yet — advise me"]} />
                  </Field>
                  <Field label="Cohort / data you hold" hint="Public, shared-under-NDA, or none yet · assay type, sample size, serial samples?">
                    <Input multiline rows={4} name="cohort" />
                  </Field>
                  <Field label="Claim you hope to support">
                    <Input multiline rows={3} name="claim" placeholder="e.g. resolve a responder-enriched subgroup within an already-diagnosed fibromyalgia cohort" />
                  </Field>
                  <Button type="submit" size="lg">Open scoping email</Button>
                  <div style={{ marginTop: "18px", marginBottom: 0 }}>
                    <ClaimCeiling>Intake opens a draft to {contactEmail}. Methods-only; not clinical, regulatory, or diagnostic advice.</ClaimCeiling>
                  </div>
                </form>
              )}
            </Card>

            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
              <div style={{ background: "var(--bg-panel-gradient)", border: "1px solid var(--border-line)", borderRadius: "var(--radius-lg)", padding: "22px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-accent)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: "12px" }}>For serious prospects</div>
                <h4 style={{ margin: "0 0 10px", fontSize: "18px", color: "var(--text-strong)", fontWeight: 600 }}>The interactive demo</h4>
                <p style={{ margin: "0 0 16px", color: "var(--text-muted)", fontSize: "14px", lineHeight: 1.6 }}>
                  A live, gated walk-through of de-mixing on a worked fibromyalgia case — cohort load, class resolution, flag toggles, and a versioned receipt. Access is by key.
                </p>
                <Button variant="secondary" onClick={onRequestDemo}>Enter demo access</Button>
              </div>
              <div style={{ border: "1px solid var(--border-line)", borderRadius: "var(--radius-lg)", padding: "22px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-muted)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: "12px" }}>What to expect</div>
                <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                  {[["Reply", "feasibility or an honest no"], ["Scope", "fixed fee, named deliverable"], ["Data", "stays in scoped boundaries"]].map(([k, v]) => (
                    <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: "12px", fontSize: "13px", borderBottom: "1px solid var(--border-line)", paddingBottom: "8px" }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{k}</span>
                      <span style={{ color: "var(--text-body)", textAlign: "right" }}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Wrap>
      </section>
    </div>
  );
}

window.IntakeScreen = IntakeScreen;