// CONTACT — booking-style intake
const { useState, useEffect } = React;
const { Link, Btn, SERVICES, OFFICES } = window;

function Contact() {
  const [stage, setStage] = useState(1);
  const [kind, setKind] = useState(null);
  const [budget, setBudget] = useState(null);
  const [practices, setPractices] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [paragraph, setParagraph] = useState("");
  const [sent, setSent] = useState(false);

  const togglePractice = (p) => {
    setPractices(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p]);
  };

  return (
    <main className="page-enter">
      <ContactHero />
      <section style={{ padding: "40px 0 100px" }}>
        <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
          <ContactSidebar />
          <div style={{ background: "var(--cream-2)", padding: 48, border: "1px solid var(--rule)", borderRadius: 4 }}>
            {!sent ? (
              <>
                <div className="flex justify-between items-center" style={{ marginBottom: 36 }}>
                  <div className="mono" style={{ color: "var(--muted)" }}>↳ Formulaire de prise de contact · étape {stage} sur 4</div>
                  <div style={{ display: "flex", gap: 6 }}>
                    {[1,2,3,4].map(n => <span key={n} style={{ width: 30, height: 4, background: n <= stage ? "var(--ink)" : "var(--rule)" }} />)}
                  </div>
                </div>

                {stage === 1 && (
                  <Step title="Pour commencer — qu'est-ce qui vous amène ?">
                    {[
                      ["new-project", "Démarrer une nouvelle collaboration"],
                      ["platform-trial", "Découvrir la plateforme"],
                      ["press", "Presse, podcasts, conférences"],
                      ["partnership", "Partenariat ou recommandation"],
                      ["careers", "À propos des carrières"],
                      ["other", "Autre chose"],
                    ].map(([id, label]) => (
                      <ChoiceCard key={id} active={kind === id} onClick={() => { setKind(id); setStage(2); }}>{label}</ChoiceCard>
                    ))}
                  </Step>
                )}

                {stage === 2 && (
                  <Step title={kind === "new-project" ? "Quelles pratiques vous semblent les plus pertinentes ?" : "De quel type de projet s'agit-il ?"} sub="Sélectionnez autant d'options que nécessaire.">
                    {SERVICES.map(s => (
                      <ChoiceCard key={s.slug} active={practices.includes(s.title)} onClick={() => togglePractice(s.title)}>
                        <div className="flex justify-between items-center" style={{ width: "100%" }}>
                          <span>{s.title}</span>
                          <span className="mono" style={{ color: "var(--muted)" }}>{s.num}</span>
                        </div>
                      </ChoiceCard>
                    ))}
                    <NextRow back={() => setStage(1)} next={() => setStage(3)} disabled={!practices.length && kind === "new-project"} />
                  </Step>
                )}

                {stage === 3 && (
                  <Step title="Approximativement, quel est votre budget ?" sub="Aucune mauvaise réponse. Nous vous dirons honnêtement si nous ne sommes pas le bon studio.">
                    {["Moins de 50 k€ au total", "50 k€ – 150 k€ au total", "150 k€ – 500 k€ au total", "500 k€+ en rétention annuelle", "Pas encore défini"].map(b => (
                      <ChoiceCard key={b} active={budget === b} onClick={() => setBudget(b)}>{b}</ChoiceCard>
                    ))}
                    <NextRow back={() => setStage(2)} next={() => setStage(4)} disabled={!budget} />
                  </Step>
                )}

                {stage === 4 && (
                  <Step title="Un paragraphe sur votre entreprise." sub="Pas un cahier des charges. Un paragraphe. Ce que vous diriez lors d'un dîner si quelqu'un vous le demandait.">
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 24 }}>
                      <div>
                        <div className="lx-label" style={{ marginBottom: 6 }}>Votre nom</div>
                        <input className="lx-input" value={name} onChange={e => setName(e.target.value)} placeholder="Marie Dupont" />
                      </div>
                      <div>
                        <div className="lx-label" style={{ marginBottom: 6 }}>Email</div>
                        <input className="lx-input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="marie@votre-entreprise.fr" />
                      </div>
                    </div>
                    <div style={{ marginBottom: 24 }}>
                      <div className="lx-label" style={{ marginBottom: 6 }}>Entreprise / projet</div>
                      <input className="lx-input" value={company} onChange={e => setCompany(e.target.value)} placeholder="Nom de votre société" />
                    </div>
                    <div style={{ marginBottom: 24 }}>
                      <div className="lx-label" style={{ marginBottom: 6 }}>Votre paragraphe</div>
                      <textarea value={paragraph} onChange={e => setParagraph(e.target.value)} placeholder="Nous sommes une marque DTC, trois ans d'existence, 1,2 M€ d'ARR, et notre marketing payant ne fonctionne plus. Nous aimerions savoir si nous pouvons collaborer."
                        rows={5}
                        style={{ width: "100%", background: "transparent", borderTop: 0, borderLeft: 0, borderRight: 0, borderBottom: "1px solid var(--rule)", padding: "18px 0", fontFamily: "var(--sans)", fontSize: 18, color: "var(--ink)", outline: "none", resize: "vertical" }} />
                    </div>
                    <NextRow back={() => setStage(3)} next={() => setSent(true)} disabled={!name || !email || !paragraph} ctaLabel="Envoyer" />
                  </Step>
                )}
              </>
            ) : (
              <div>
                <div className="mono" style={{ color: "var(--acid-deep)", marginBottom: 16 }}>↳ Message envoyé.</div>
                <h2 className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>Merci{name ? `, ${name.split(" ")[0]}` : ""}.</h2>
                <p className="body-lg" style={{ marginTop: 24, maxWidth: 540 }}>
                  Nous avons bien reçu votre message. Un membre de notre équipe vous répondra sous 48 heures. Si jamais 48 heures s'écoulent sans réponse, écrivez-nous directement à <span className="ilink">contact@clyvonna.com</span> — cette adresse est vérifiée manuellement.
                </p>
                <div style={{ marginTop: 32 }}>
                  <Btn to="/work" variant="ghost">Découvrir nos réalisations en attendant</Btn>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      <ContactMap />
    </main>
  );
}

function ContactHero() {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 40 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ Contact · nous lisons chaque message</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            Parlez-nous de<br/>votre projet.<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 460 }}>
            Quatre étapes. Un paragraphe à la fin. Nous vous répondons sous 48 heures, nommément. Si vous préférez écrire un email, cela fonctionne aussi.
          </p>
        </div>
      </div>
    </section>
  );
}

function ContactSidebar() {
  return (
    <div style={{ position: "sticky", top: 120, display: "flex", flexDirection: "column", gap: 32 }}>
      <div>
        <div className="lx-label" style={{ marginBottom: 12 }}>Délai de réponse</div>
        <div className="serif" style={{ fontSize: 32 }}>48 heures, par un humain.</div>
        <p className="body-sm" style={{ marginTop: 8 }}>Délai médian constaté : environ 14 heures.</p>
      </div>
      <div className="hairline" />
      <div>
        <div className="lx-label" style={{ marginBottom: 12 }}>Contacts directs</div>
        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            ["Nouveaux projets", "contact@clyvonna.com"],
            ["Support plateforme", "support@clyvonna.com"],
            ["Presse & conférences", "presse@clyvonna.com"],
            ["Partenariats", "partenaires@clyvonna.com"],
            ["Carrières", "recrutement@clyvonna.com"],
          ].map(([k, v]) => (
            <li key={k}>
              <div className="mono" style={{ color: "var(--muted)", marginBottom: 2 }}>{k}</div>
              <a href={`mailto:${v}`} className="ilink serif" style={{ fontSize: 22 }}>{v}</a>
            </li>
          ))}
        </ul>
      </div>
      <div className="hairline" />
      <div>
        <div className="lx-label" style={{ marginBottom: 12 }}>Siège social</div>
        <div className="body" style={{ lineHeight: 1.5 }}>
          CLYVONNA LLC<br/>
          5249 North Park Place NE, place 5945<br/>
          Cedar Rapids, Iowa 52402<br/>
          États-Unis
        </div>
        <div className="mono" style={{ marginTop: 12, color: "var(--muted)" }}>+1 (949) 575-8179</div>
      </div>
      <div className="hairline" />
      <div>
        <div className="lx-label" style={{ marginBottom: 12 }}>Ce que nous ne faisons pas</div>
        <p className="body-sm">
          Appels d'offres, présentations spéculatives non rémunérées, « cafés pour échanger » avec des cabinets de conseil, démarchage générique sur LinkedIn. Si votre message entre dans l'une de ces catégories, nous ne pourrons probablement pas y répondre, avec toutes nos excuses.
        </p>
      </div>
    </div>
  );
}

function Step({ title, sub, children }) {
  return (
    <div>
      <h2 className="serif" style={{ fontSize: "clamp(32px, 3.4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.01em" }}>{title}</h2>
      {sub && <p className="body-lg" style={{ marginTop: 12, marginBottom: 24, maxWidth: 540 }}>{sub}</p>}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12, marginTop: 24 }}>
        {children}
      </div>
    </div>
  );
}

function ChoiceCard({ children, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      textAlign: "left", padding: "20px 22px",
      border: "1px solid " + (active ? "var(--ink)" : "var(--rule)"),
      background: active ? "var(--ink)" : "var(--cream)",
      color: active ? "var(--cream)" : "var(--ink)",
      borderRadius: 4, transition: "background .2s var(--ease), color .2s var(--ease)",
      fontFamily: "var(--sans)", fontSize: 16,
      display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
    }}>
      <span>{children}</span>
      <span style={{ color: active ? "var(--acid)" : "var(--muted)", fontFamily: "var(--mono)" }}>{active ? "✓" : ""}</span>
    </button>
  );
}

function NextRow({ back, next, disabled, ctaLabel = "Continuer" }) {
  return (
    <div style={{ gridColumn: "1 / -1", display: "flex", gap: 12, justifyContent: "space-between", marginTop: 16 }}>
      <button className="btn btn-ghost" onClick={back}>← Retour</button>
      <button className="btn" onClick={next} disabled={disabled} style={{ opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer" }}>{ctaLabel} →</button>
    </div>
  );
}

function ContactMap() {
  return (
    <section style={{ padding: "100px 0", background: "var(--cream-2)", borderTop: "1px solid var(--rule)" }}>
      <div className="page">
        <div className="flex justify-between items-end" style={{ marginBottom: 40 }}>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em" }}>Venez nous rencontrer.</h2>
          <span className="mono" style={{ color: "var(--muted)" }}>↳ Le studio est ouvert sur rendez-vous.</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 24, maxWidth: 600 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ aspectRatio: "16/9", background: "var(--cream)", border: "1px solid var(--rule)", padding: 18, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px)", backgroundSize: "32px 32px", opacity: 0.6 }} />
              <svg viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="none">
                <path d="M0 30 Q40 35, 60 50 T100 70" stroke="var(--ink)" strokeWidth="0.5" fill="none" />
                <path d="M0 80 L100 20" stroke="var(--ink)" strokeWidth="0.3" fill="none" opacity="0.6" />
                <circle cx="50" cy="50" r="5" fill="var(--acid)" />
                <circle cx="50" cy="50" r="2.5" fill="var(--ink)" />
              </svg>
              <div style={{ position: "absolute", top: 14, left: 14 }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>CEDAR RAPIDS · IOWA</div>
              </div>
              <div style={{ position: "absolute", bottom: 14, left: 14 }}>
                <div className="serif" style={{ fontSize: 28 }}>Siège Clyvonna</div>
              </div>
            </div>
            <div>
              <div className="body" style={{ marginBottom: 4 }}>5249 North Park Place NE, place 5945 — Cedar Rapids, Iowa 52402, États-Unis</div>
              <div className="body-sm">Ouvert du lundi au vendredi · 9h–18h CST · équipe en télétravail compatible</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;