// Process, Why-us, Logos, Testimonials, Contact, Footer

// --- Process ---
const STEPS = [
  { n: "01", title: "Découverte", body: "Audit, objectifs, cadrage technique et budgétaire." },
  { n: "02", title: "Conception", body: "Architecture, UX/UI, prototypes validés avec vous." },
  { n: "03", title: "Développement", body: "Itérations courtes, démos hebdomadaires, qualité continue." },
  { n: "04", title: "Lancement & Suivi", body: "Mise en production, monitoring, évolutions et support." },
];

function Process() {
  const { isMobile, isTablet } = useViewport();

  return (
    <section id="processus" style={{ padding: isMobile ? "72px 0" : "120px 0", background: "var(--bg-alt)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", position: "relative", overflow: "hidden" }}>
      <div className="bg-diagonal" aria-hidden />
      <div className="bg-blob bg-blob-b float-med" style={{ left: "-8%", bottom: "-15%", width: 360, height: 360 }} aria-hidden />
      <div className="container">
        <div style={{ maxWidth: 680, marginBottom: isMobile ? 36 : 64 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Notre processus</div>
          <h2>Une méthode claire,<br />des livrables <span style={{ color: "var(--cyan-ink)" }}>prévisibles</span>.</h2>
        </div>
        <ol style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: 2, listStyle: "none", padding: 0, margin: 0, background: "var(--hairline)", border: "1px solid var(--hairline)", borderRadius: "var(--r-md)", overflow: "hidden" }}>
          {STEPS.map((st, i) => (
            <li key={st.n} style={{ background: "var(--surface)", padding: isMobile ? "24px 20px" : "36px 28px", display: "flex", flexDirection: "column", gap: 14, minHeight: isMobile ? "auto" : 220 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--cyan-ink)", letterSpacing: "0.1em" }}>{st.n}</div>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: i === 0 ? "var(--cyan)" : "var(--hairline-strong)" }} />
              </div>
              <h3 style={{ fontSize: 20, fontWeight: 600 }}>{st.title}</h3>
              <p style={{ fontSize: 14 }}>{st.body}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// --- Why us (guarantees from flyer) ---
const GUARANTEES = [
  { title: "Qualité garantie", body: "Standards stricts, revues de code, tests automatisés." },
  { title: "Respect des délais", body: "Jalons clairs, démos hebdomadaires, livraison prévisible." },
  { title: "Équipe experte", body: "Développeurs, designers et chefs de projet seniors." },
  { title: "Support dédié", body: "Un interlocuteur unique, disponibilité garantie par contrat." },
];

function GuaranteeIcon({ i }) {
  const p = { width: 22, height: 22, stroke: "currentColor", fill: "none", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (i === 0) return (<svg viewBox="0 0 24 24" {...p}><circle cx="12" cy="10" r="6" /><path d="M8.5 14 L7 21 L12 18 L17 21 L15.5 14" /></svg>);
  if (i === 1) return (<svg viewBox="0 0 24 24" {...p}><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 14" /></svg>);
  if (i === 2) return (<svg viewBox="0 0 24 24" {...p}><circle cx="9" cy="9" r="3" /><circle cx="17" cy="10" r="2.5" /><path d="M3 19 c 0 -3 3 -5 6 -5 s 6 2 6 5" /><path d="M15 18 c 0 -2 2 -3.5 4 -3.5 s 2.5 1 2.5 3" /></svg>);
  return (<svg viewBox="0 0 24 24" {...p}><path d="M4 14 a8 8 0 0 1 16 0" /><rect x="3" y="14" width="4" height="6" rx="1.2" /><rect x="17" y="14" width="4" height="6" rx="1.2" /><path d="M19 20 v1 a2 2 0 0 1 -2 2 h-3" /></svg>);
}

function WhyUs() {
  const { isMobile, isTablet } = useViewport();

  return (
    <section style={{ padding: isMobile ? "72px 0" : "120px 0", position: "relative", overflow: "hidden" }}>
      <div className="bg-grid" aria-hidden style={{ opacity: 0.6 }} />
      <div className="bg-blob bg-blob-c float-slow" style={{ right: "5%", top: "30%", width: 320, height: 320 }} aria-hidden />
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "1fr 1fr", gap: isMobile ? 24 : isTablet ? 32 : 80, alignItems: "start", marginBottom: isMobile ? 32 : 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Pourquoi InfinitDev</div>
            <h2>Plus qu'un service,<br />un <span style={{ color: "var(--cyan-ink)" }}>partenaire</span> de confiance.</h2>
          </div>
          <p style={{ fontSize: isMobile ? 15 : 16, maxWidth: 460, justifySelf: isTablet ? "start" : "end" }}>
            Quatre engagements contractuels qui structurent chaque collaboration — et qui expliquent pourquoi nos clients nous recommandent.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: 20 }}>
          {GUARANTEES.map((g, i) => (
            <div key={g.title} style={{ padding: isMobile ? 22 : 28, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--r-md)", display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: "var(--cyan-wash)", color: "var(--cyan-ink)", display: "grid", placeItems: "center" }}>
                <GuaranteeIcon i={i} />
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 600 }}>{g.title}</h3>
              <p style={{ fontSize: 14 }}>{g.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Logos ---
const LOGOS = ["ATLAS", "NOVA", "MERIDIAN", "KAIROS", "ORBITAL", "VELARO"];

function Logos() {
  const { isMobile } = useViewport();

  return (
    <section style={{ padding: "64px 0", background: "var(--bg-alt)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
      <div className="container">
        <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", justifyContent: "space-between", gap: isMobile ? 20 : 40, flexWrap: "wrap" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            Ils nous font confiance
          </div>
          <div style={{ display: "flex", gap: isMobile ? 20 : 48, alignItems: "center", flexWrap: "wrap" }}>
            {LOGOS.map((l) => (
              <div key={l} style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 17, color: "var(--ink-soft)", letterSpacing: "0.12em" }}>
                {l}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Testimonials ---
const TESTIMONIALS = [
  { quote: "Une équipe qui comprend les enjeux business avant de parler technique. Livraison impeccable, accompagnement continu.", author: "Directeur Général", company: "Atlas Retail" },
  { quote: "Six mois de collaboration, zéro mauvaise surprise. Les démos hebdomadaires et le respect des délais ont changé notre rapport aux prestataires.", author: "CTO", company: "Nova Finance" },
  { quote: "Le design et la performance du produit final dépassent ce que nous avions en tête. Un partenaire que nous recommandons sans réserve.", author: "Product Lead", company: "Meridian Group" },
];

function Testimonials() {
  const { isMobile, isTablet } = useViewport();

  return (
    <section style={{ padding: isMobile ? "72px 0" : "120px 0", position: "relative", overflow: "hidden", background: "var(--bg-alt)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
      <div className="bg-dots" aria-hidden style={{ opacity: 0.7 }} />
      <div className="bg-blob bg-blob-a float-med" style={{ left: "10%", top: "-15%", width: 280, height: 280 }} aria-hidden />
      <div className="container">
        <div style={{ maxWidth: 680, marginBottom: isMobile ? 32 : 56 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Témoignages</div>
          <h2>Ce que nos clients<br />en disent.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)", gap: 20 }}>
          {TESTIMONIALS.map((t, i) => (
            <figure key={i} style={{ margin: 0, padding: isMobile ? 24 : 32, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--r-md)", display: "flex", flexDirection: "column", gap: 24 }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 1, color: "var(--cyan)" }}>"</div>
              <blockquote style={{ margin: 0, fontSize: 16, color: "var(--ink)", lineHeight: 1.55 }}>
                {t.quote}
              </blockquote>
              <figcaption style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid var(--hairline)", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--cyan-wash)", color: "var(--cyan-ink)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14 }}>
                  {t.company[0]}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)" }}>{t.author}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-soft)" }}>{t.company}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Contact CTA ---
function ContactCTA() {
  const [form, setForm] = React.useState({ name: "", email: "", project: "" });
  const [sent, setSent] = React.useState(false);
  const { isMobile, isTablet } = useViewport();
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3500);
  };
  return (
    <section id="contact" style={{ padding: isMobile ? "72px 0" : "120px 0", background: "var(--ink)", color: "var(--bg)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", top: "-30%", right: isMobile ? "-45%" : "-10%", width: isMobile ? 420 : 700, height: isMobile ? 420 : 700, borderRadius: "50%", background: "radial-gradient(circle, oklch(0.6 0.16 220 / 0.35), transparent 60%)", filter: "blur(40px)" }} />
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "1fr 1fr", gap: isMobile ? 28 : isTablet ? 40 : 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20, color: "var(--cyan)" }}>Contact</div>
            <h2 style={{ color: "var(--bg)", marginBottom: 24 }}>
              Vous avez un projet ?<br />
              <span style={{ color: "var(--cyan)" }}>Parlons-en.</span>
            </h2>
            <p style={{ fontSize: isMobile ? 15.5 : 17, color: "oklch(0.82 0.02 240)", maxWidth: 420, marginBottom: isMobile ? 28 : 40 }}>
              Transformons vos idées en solutions digitales performantes. Réponse sous 24h ouvrées.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, fontSize: 14.5 }}>
              <a href="mailto:contact@infinitdev.com" style={{ display: "flex", alignItems: "center", gap: 12, color: "oklch(0.92 0.01 240)" }}>
                <span style={{ width: 34, height: 34, borderRadius: 8, background: "oklch(0.3 0.04 240)", display: "grid", placeItems: "center" }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
                </span>
                contact@infinitdev.com
              </a>
              <a href="tel:+212610076744" style={{ display: "flex", alignItems: "center", gap: 12, color: "oklch(0.92 0.01 240)" }}>
                <span style={{ width: 34, height: 34, borderRadius: 8, background: "oklch(0.3 0.04 240)", display: "grid", placeItems: "center" }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6 c 0 10 4 14 14 14 l 2 -4 l -4 -2 l -2 2 c -3 -1 -5 -3 -6 -6 l 2 -2 l -2 -4 z" /></svg>
                </span>
                +212 610-076744
              </a>
              <div style={{ display: "flex", alignItems: "center", gap: 12, color: "oklch(0.92 0.01 240)" }}>
                <span style={{ width: 34, height: 34, borderRadius: 8, background: "oklch(0.3 0.04 240)", display: "grid", placeItems: "center" }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9" /><path d="M3 12h18 M12 3 c 3 3 3 15 0 18 M12 3 c -3 3 -3 15 0 18" /></svg>
                </span>
                www.infinitdev.com
              </div>
            </div>
          </div>
          <form onSubmit={submit} style={{ background: "oklch(0.26 0.035 240)", padding: isMobile ? 22 : 32, borderRadius: "var(--r-md)", display: "flex", flexDirection: "column", gap: 16, border: "1px solid oklch(0.35 0.04 240)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--cyan)", textTransform: "uppercase" }}>Démarrer un projet</div>
            <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: "oklch(0.82 0.02 240)" }}>
              Nom complet
              <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Votre nom" style={inputStyle} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: "oklch(0.82 0.02 240)" }}>
              Email professionnel
              <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="vous@entreprise.com" style={inputStyle} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: "oklch(0.82 0.02 240)" }}>
              Décrivez votre projet
              <textarea rows={4} value={form.project} onChange={(e) => setForm({ ...form, project: e.target.value })} placeholder="Contexte, objectifs, échéance…" style={{ ...inputStyle, resize: "vertical", fontFamily: "inherit" }} />
            </label>
            <button type="submit" className="btn btn-primary" style={{ justifyContent: "center", background: "var(--cyan)", color: "var(--ink)", marginTop: 4 }}>
              {sent ? "Message envoyé ✓" : <>Envoyer la demande <span className="arr">→</span></>}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}
const inputStyle = {
  padding: "12px 14px",
  background: "oklch(0.22 0.03 240)",
  border: "1px solid oklch(0.38 0.04 240)",
  borderRadius: 8,
  color: "var(--bg)",
  fontSize: 14,
  fontFamily: "inherit",
  outline: "none",
};

// --- Footer ---
function Footer() {
  const { isMobile, isTablet } = useViewport();

  return (
    <footer style={{ padding: "64px 0 32px", background: "var(--ink)", color: "oklch(0.82 0.02 240)", borderTop: "1px solid oklch(0.35 0.04 240)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "2fr 1fr 1fr 1fr", gap: 32, marginBottom: 48 }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", marginBottom: 16 }}>
              <img src="assets/infinitdev-logo.png" alt="InfinitDev" style={{ height: 44, width: "auto", filter: "brightness(0) invert(1)" }} />
            </div>
            <p style={{ fontSize: 14, maxWidth: 320, color: "oklch(0.72 0.02 240)" }}>
              L'innovation au service de votre réussite digitale.
            </p>
          </div>
          <FooterCol title="Pages" items={[["Accueil", "index.html"], ["Services", "services.html"], ["Portfolio", "portfolio.html"], ["À propos", "about.html"]]} />
          <FooterCol title="Services" items={SERVICES.slice(0, 5).map((s) => [s.title, "services.html"])} />
          <FooterCol title="Contact" items={[["contact@infinitdev.com", "mailto:contact@infinitdev.com"], ["+212 610-076744", "tel:+212610076744"], ["www.infinitdev.com", "#"]]} />
        </div>
        <div style={{ borderTop: "1px solid oklch(0.35 0.04 240)", paddingTop: 24, display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 10 : 16, justifyContent: "space-between", fontSize: 12, color: "oklch(0.65 0.02 240)", fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
          <div>© 2026 INFINITDEV · TOUS DROITS RÉSERVÉS</div>
          <div>INFINITDEV, L'AVENIR EST <span style={{ color: "var(--cyan)" }}>DIGITAL</span>.</div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "oklch(0.6 0.02 240)", textTransform: "uppercase", marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 13.5 }}>
        {items.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{ color: "oklch(0.85 0.015 240)", transition: "color .2s" }} onMouseEnter={(e) => (e.currentTarget.style.color = "var(--cyan)")} onMouseLeave={(e) => (e.currentTarget.style.color = "")}>
              {label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Process, WhyUs, Logos, Testimonials, ContactCTA, Footer });