@imansi/templates 0.1.0

package/src/marketing/ContactPage.jsx

@@ -0,0 +1,546 @@
+import { useState } from 'react';
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  Separator,
+  Textarea,
+} from '@imansi/ui';
+import { MarketingLayout } from '../layouts/MarketingLayout.jsx';
+
+export function ContactPage({
+  brandName = 'Imansi',
+  brandLogo,
+  navLinks = [],
+  headerCTA,
+  headerSecondaryCTA,
+  footerColumns = [],
+
+  /* ===== Hero ===== */
+  badge = 'Contacto',
+  title = 'Hablemos',
+  subtitle = 'Nuestro equipo está disponible para ayudarte con cualquier consulta sobre el producto, precios o partnership.',
+
+  /* ===== Cards de métodos ===== */
+  contactMethods = [],
+
+  /* ===== Formulario ===== */
+  formTitle = 'Enviá tu consulta',
+  formNameLabel = 'Nombre completo',
+  formEmailLabel = 'Correo electrónico',
+  formCompanyLabel = 'Empresa',
+  formSubjectLabel = 'Asunto',
+  formSubjectOptions = [],
+  formMessageLabel = 'Mensaje',
+  formMessagePlaceholder = 'Contanos sobre tu proyecto, consulta o problema...',
+  formPrivacyNote = 'Al enviar aceptás nuestra Política de Privacidad.',
+  formSubmitText = 'Enviar mensaje',
+  formSubmitLoadingText = 'Enviando...',
+  formSuccessTitle = '¡Mensaje enviado!',
+  formSuccessMessage = 'Gracias por escribirnos. Te responderemos en menos de 24 horas.',
+
+  /* ===== Sidebar: info ===== */
+  infoTitle = 'Información de contacto',
+  infoItems = [],
+
+  /* ===== Sidebar: horario ===== */
+  hoursTitle = 'Horario de atención',
+  hoursItems = [],
+
+  /* ===== Oficinas ===== */
+  officesTitle = 'Nuestras oficinas',
+  officesSubtitle = 'Estamos presentes en tres continentes.',
+  offices = [],
+
+  onSubmit,
+  error: externalError,
+  loading = false,
+  success: externalSuccess = false,
+}) {
+  const [nombre, setNombre] = useState('');
+  const [email, setEmail] = useState('');
+  const [empresa, setEmpresa] = useState('');
+  const [asunto, setAsunto] = useState('');
+  const [mensaje, setMensaje] = useState('');
+  const [localError, setLocalError] = useState(null);
+  const [localSuccess, setLocalSuccess] = useState(false);
+
+  const showingSuccess = externalSuccess || localSuccess;
+  const error = localError || externalError;
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (!nombre || !email || !mensaje) {
+      setLocalError('Completá los campos obligatorios.');
+      return;
+    }
+
+    if (!email.includes('@')) {
+      setLocalError('Ingresá un correo válido.');
+      return;
+    }
+
+    if (onSubmit) {
+      const result = await onSubmit({ nombre, email, empresa, asunto, mensaje });
+      if (result?.ok) setLocalSuccess(true);
+    } else {
+      setLocalSuccess(true);
+    }
+  }
+
+  function resetForm() {
+    setNombre('');
+    setEmail('');
+    setEmpresa('');
+    setAsunto('');
+    setMensaje('');
+    setLocalSuccess(false);
+  }
+
+  return (
+    <MarketingLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navLinks={navLinks}
+      headerCTA={headerCTA}
+      headerSecondaryCTA={headerSecondaryCTA}
+      footerColumns={footerColumns}
+    >
+      {/* ============ HERO ============ */}
+      <section className="imansi-container pt-24 pb-16">
+        <div className="text-center max-w-2xl mx-auto space-y-5">
+          <span className="inline-flex items-center rounded-full border border-border bg-card px-4 py-1.5 text-caption font-medium uppercase tracking-widest text-muted-foreground">
+            {badge}
+          </span>
+          <h1 className="text-display font-bold tracking-tight leading-[1.05]">
+            {title}
+          </h1>
+          <p className="text-body text-muted-foreground leading-relaxed">
+            {subtitle}
+          </p>
+        </div>
+      </section>
+
+      {/* ============ MÉTODOS DE CONTACTO ============ */}
+      {contactMethods.length > 0 && (
+        <section className="imansi-container pb-20">
+          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto">
+            {contactMethods.map((method, i) => (
+              <a
+                key={i}
+                href={method.href || '#'}
+                className="group flex flex-col gap-4 rounded-xl border border-border bg-card p-6 transition-all hover:border-primary/40 hover:shadow-lg"
+              >
+                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                  {method.icon}
+                </div>
+                <div className="space-y-1.5 flex-1">
+                  <h3 className="text-h4 font-semibold text-foreground">
+                    {method.title}
+                  </h3>
+                  <p className="text-small text-muted-foreground leading-relaxed">
+                    {method.description}
+                  </p>
+                </div>
+                {method.action && (
+                  <span className="inline-flex items-center gap-1.5 text-small font-medium text-primary">
+                    {method.action}
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="transition-transform group-hover:translate-x-0.5"
+                    >
+                      <path d="M5 3L9 7L5 11" />
+                    </svg>
+                  </span>
+                )}
+              </a>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ============ FORM + INFO ============ */}
+      <section className="imansi-container pb-20">
+        <div className="grid gap-6 lg:grid-cols-[1.5fr_1fr] max-w-5xl mx-auto items-start">
+          {/* ---------- FORMULARIO ---------- */}
+          <Card>
+            <CardContent className="p-7 sm:p-9">
+              {showingSuccess ? (
+                <div className="text-center space-y-6 py-14">
+                  <div className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-success/10 text-success">
+                    <svg
+                      width="30"
+                      height="30"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="4,12 10,18 20,6" />
+                    </svg>
+                  </div>
+                  <div className="space-y-2 max-w-md mx-auto">
+                    <h2 className="text-h3 font-semibold">{formSuccessTitle}</h2>
+                    <p className="text-small text-muted-foreground leading-relaxed">
+                      {formSuccessMessage}
+                    </p>
+                  </div>
+                  <Button variant="outline" onClick={resetForm}>
+                    Enviar otro mensaje
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-7">
+                  {/* Header form */}
+                  <div className="space-y-2">
+                    <h2 className="text-h3 font-semibold tracking-tight">
+                      {formTitle}
+                    </h2>
+                    <p className="text-small text-muted-foreground">
+                      Los campos marcados con <span className="text-destructive">*</span> son obligatorios.
+                    </p>
+                  </div>
+
+                  {error && (
+                    <Alert variant="destructive" title="Error">
+                      {error}
+                    </Alert>
+                  )}
+
+                  <form onSubmit={handleSubmit} className="space-y-5">
+                    {/* Nombre + Email */}
+                    <div className="grid gap-5 sm:grid-cols-2">
+                      <div className="space-y-2">
+                        <Label
+                          htmlFor="contact-nombre"
+                          className="text-small font-medium"
+                        >
+                          {formNameLabel}{' '}
+                          <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          id="contact-nombre"
+                          value={nombre}
+                          onChange={(e) => setNombre(e.target.value)}
+                          placeholder="Juan Pérez"
+                          autoComplete="name"
+                          disabled={loading}
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label
+                          htmlFor="contact-email"
+                          className="text-small font-medium"
+                        >
+                          {formEmailLabel}{' '}
+                          <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                          id="contact-email"
+                          type="email"
+                          value={email}
+                          onChange={(e) => setEmail(e.target.value)}
+                          placeholder="correo@ejemplo.com"
+                          autoComplete="email"
+                          disabled={loading}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Empresa + Asunto */}
+                    <div className="grid gap-5 sm:grid-cols-2">
+                      <div className="space-y-2">
+                        <Label
+                          htmlFor="contact-empresa"
+                          className="text-small font-medium"
+                        >
+                          {formCompanyLabel}
+                        </Label>
+                        <Input
+                          id="contact-empresa"
+                          value={empresa}
+                          onChange={(e) => setEmpresa(e.target.value)}
+                          placeholder="Acme Inc."
+                          autoComplete="organization"
+                          disabled={loading}
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label
+                          htmlFor="contact-asunto"
+                          className="text-small font-medium"
+                        >
+                          {formSubjectLabel}
+                        </Label>
+                        {formSubjectOptions.length > 0 ? (
+                          <select
+                            id="contact-asunto"
+                            value={asunto}
+                            onChange={(e) => setAsunto(e.target.value)}
+                            disabled={loading}
+                            className="flex h-10 w-full rounded-md border border-border bg-input px-3 py-2 text-body text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50"
+                          >
+                            <option value="">Seleccioná una opción</option>
+                            {formSubjectOptions.map((opt) => (
+                              <option key={opt} value={opt}>
+                                {opt}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <Input
+                            id="contact-asunto"
+                            value={asunto}
+                            onChange={(e) => setAsunto(e.target.value)}
+                            placeholder="¿En qué podemos ayudarte?"
+                            disabled={loading}
+                          />
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Mensaje */}
+                    <div className="space-y-2">
+                      <Label
+                        htmlFor="contact-mensaje"
+                        className="text-small font-medium"
+                      >
+                        {formMessageLabel}{' '}
+                        <span className="text-destructive">*</span>
+                      </Label>
+                      <Textarea
+                        id="contact-mensaje"
+                        placeholder={formMessagePlaceholder}
+                        value={mensaje}
+                        onChange={(e) => setMensaje(e.target.value)}
+                        rows={6}
+                        disabled={loading}
+                      />
+                    </div>
+
+                    <Separator />
+
+                    {/* Footer form */}
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                      <p className="text-caption text-muted-foreground max-w-xs leading-relaxed">
+                        {formPrivacyNote}
+                      </p>
+                      <Button
+                        type="submit"
+                        disabled={loading}
+                        className="sm:min-w-[180px]"
+                      >
+                        {loading ? formSubmitLoadingText : formSubmitText}
+                      </Button>
+                    </div>
+                  </form>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* ---------- SIDEBAR ---------- */}
+          <div className="space-y-6">
+            {/* Info de contacto */}
+            {infoItems.length > 0 && (
+              <Card>
+                <CardContent className="p-6 space-y-5">
+                  <h3 className="text-h4 font-semibold">{infoTitle}</h3>
+                  <Separator />
+                  <ul className="space-y-5">
+                    {infoItems.map((item, i) => (
+                      <li key={i} className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-foreground">
+                          {item.icon}
+                        </div>
+                        <div className="space-y-1 min-w-0 pt-0.5">
+                          <p className="text-caption font-semibold uppercase tracking-wider text-muted-foreground">
+                            {item.label}
+                          </p>
+                          {item.href ? (
+                            <a
+                              href={item.href}
+                              className="block text-small text-foreground hover:text-primary transition-colors break-words"
+                            >
+                              {item.value}
+                            </a>
+                          ) : (
+                            <p className="text-small text-foreground break-words">
+                              {item.value}
+                            </p>
+                          )}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Horario */}
+            {hoursItems.length > 0 && (
+              <Card>
+                <CardContent className="p-6 space-y-5">
+                  <h3 className="text-h4 font-semibold">{hoursTitle}</h3>
+                  <Separator />
+                  <ul className="space-y-3">
+                    {hoursItems.map((item, i) => (
+                      <li
+                        key={i}
+                        className="flex items-center justify-between gap-3 text-small"
+                      >
+                        <span className="text-muted-foreground">
+                          {item.day}
+                        </span>
+                        <span className="font-medium text-foreground">
+                          {item.hours}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* ============ OFICINAS ============ */}
+      {offices.length > 0 && (
+        <section className="border-t border-border bg-muted/30">
+          <div className="imansi-container py-24">
+            <div className="text-center max-w-2xl mx-auto space-y-4 mb-16">
+              <h2 className="text-h1 font-bold tracking-tight">
+                {officesTitle}
+              </h2>
+              <p className="text-body text-muted-foreground">
+                {officesSubtitle}
+              </p>
+            </div>
+
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto">
+              {offices.map((office, i) => (
+                <Card key={i} className="transition-shadow hover:shadow-md">
+                  <CardContent className="p-6 space-y-5">
+                    <div className="flex items-start gap-3">
+                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                        <svg
+                          width="20"
+                          height="20"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                          <circle cx="12" cy="10" r="3" />
+                        </svg>
+                      </div>
+                      <div className="space-y-1 min-w-0">
+                        <h3 className="text-h4 font-semibold leading-tight">
+                          {office.city}
+                        </h3>
+                        {office.country && (
+                          <p className="text-caption text-muted-foreground uppercase tracking-wider">
+                            {office.country}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <div className="flex items-start gap-2.5 text-small">
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="text-muted-foreground shrink-0 mt-0.5"
+                        >
+                          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                          <circle cx="12" cy="10" r="3" />
+                        </svg>
+                        <span className="text-muted-foreground whitespace-pre-line leading-relaxed">
+                          {office.address}
+                        </span>
+                      </div>
+
+                      {office.phone && (
+                        <a
+                          href={`tel:${office.phone.replace(/\s/g, '')}`}
+                          className="flex items-start gap-2.5 text-small text-muted-foreground hover:text-primary transition-colors"
+                        >
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="shrink-0 mt-0.5"
+                          >
+                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+                          </svg>
+                          {office.phone}
+                        </a>
+                      )}
+
+                      {office.email && (
+                        <a
+                          href={`mailto:${office.email}`}
+                          className="flex items-start gap-2.5 text-small text-muted-foreground hover:text-primary transition-colors"
+                        >
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="shrink-0 mt-0.5"
+                          >
+                            <rect x="2" y="4" width="20" height="16" rx="2" />
+                            <path d="m22 6-10 7L2 6" />
+                          </svg>
+                          {office.email}
+                        </a>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+    </MarketingLayout>
+  );
+}