// Section components for the ColaFish prototype.
// Light editorial direction — earth tones, real photography, herbarium accents.

const PHOTOS = {
  hero:     'https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=1400&q=80&auto=format&fit=crop',
  // ^ scientific glass / lab. fallback gradient applied if it fails.
  texture1: 'https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?w=1800&q=80&auto=format&fit=crop',
  // ^ misty forest light
  texture2: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1800&q=80&auto=format&fit=crop',
  // ^ calm ocean horizon
  vitality: 'uploads/glowfit_science_lab.png?v=3',
  // ^ GlowFit supplement science laboratory
};

// Used as visual fallback if an image fails to load
function Img({ src, alt, fallbackGradient }) {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return (
      <div style={{
        width: '100%', height: '100%',
        background: fallbackGradient || 'linear-gradient(135deg, #d4c7ad 0%, #a89980 100%)',
      }} aria-label={alt} />
    );
  }
  return <img src={src} alt={alt} loading="lazy"
    onError={() => setFailed(true)} />;
}

// ---- Reveal hook ----
function useReveal() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    let timeout;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) { setSeen(true); io.disconnect(); clearTimeout(timeout); return; }
      }
    }, { threshold: 0.05 });
    io.observe(ref.current);
    // Fallback — if observer never fires (e.g. element already on screen,
    // certain headless/screenshot contexts), reveal after a tick.
    timeout = setTimeout(() => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      if (r.top < vh && r.bottom > 0) { setSeen(true); io.disconnect(); }
    }, 250);
    return () => { io.disconnect(); clearTimeout(timeout); };
  }, []);
  return [ref, seen];
}

const Reveal = ({ children, delay = 0, as: As = 'div', className = '', style = {}, ...rest }) => {
  const [ref, seen] = useReveal();
  return (
    <As ref={ref}
      className={`reveal ${seen ? 'in' : ''} ${className}`}
      style={{ ...style, transitionDelay: seen ? `${delay}ms` : '0ms' }}
      {...rest}>
      {children}
    </As>
  );
};

// ====================================================
// NAV
// ====================================================
const Nav = ({ activeSection, onNavClick }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="brand">
        <BrandMark size={28} style={{ color: 'var(--accent)' }} />
        <span style={{ fontWeight: 600, letterSpacing: '-0.02em', fontSize: '22px' }}>COLAFISH</span>
        <span className="brand-sas">S.A.S.</span>
      </div>
      <nav className="nav-links">
        {[
          ['hero', 'Inicio'],
          ['pilares', 'Qué hacemos'],
          ['marcas', 'GlowFit'],
          ['contact', 'Aliados / contacto'],
        ].map(([id, label]) => (
          <a key={id}
            href={`#${id}`}
            onClick={(e) => { e.preventDefault(); onNavClick(id); }}
            className={activeSection === id ? 'active' : ''}>
            {label}
          </a>
        ))}
      </nav>
      <button className="invest-btn" onClick={() => onNavClick('contact')}>Aliados</button>
    </header>
  );
};

// ====================================================
// HERO
// ====================================================
const Hero = () => (
  <section id="hero" className="hero" data-screen-label="01 Manifiesto">
    <div className="wrap">
      <div className="hero-content">
        <Reveal as="span" className="eyebrow"><span className="dot" />Empresa colombiana / Tunja, Boyacá</Reveal>
        <Reveal as="h1" delay={120}>
          Desarrollamos alimentos y suplementos <span className="accent-word">funcionales</span> para tu <span className="accent-word">bienestar</span><span className="accent-dot">.</span>
        </Reveal>
        <Reveal as="p" className="lede" delay={240}>
          COLAFISH S.A.S. crea y potencia marcas propias con enfoque en la nutrición científica y el bienestar integral. Construimos soluciones cotidianas como GlowFit, con una operación ágil desde Tunja, Boyacá.
        </Reveal>
        <Reveal className="ctas" delay={340}>
          <a href="#pilares" className="btn btn-primary"
            onClick={(e) => { e.preventDefault(); window.cfScrollTo('pilares'); }}>
            Conocer proyectos <span className="arrow"><IconArrow size={14} /></span>
          </a>
          <a href="#contact" className="btn btn-secondary"
            onClick={(e) => { e.preventDefault(); window.cfScrollTo('contact'); }}>
            Contactar
          </a>
        </Reveal>
      </div>
    </div>

    <div className="scroll-cue"><span className="line"></span>Scroll · Inicio 01 / 04</div>
    <div className="hero-meta">
      <span>COLAFISH · 2026</span>
      <span>05°N · 73°W · Tunja</span>
    </div>
  </section>
);

const SpecimenSVG = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const loop = () => { setTick(performance.now() / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const segs = 80;
  const W = 320, H = 110;
  const cy = H / 2;
  let d = '';
  for (let i = 0; i <= segs; i++) {
    const x = (i / segs) * W;
    const k = (i / segs) * Math.PI * 4 + tick * 1.2;
    const y = cy + Math.sin(k) * 22 * Math.exp(-Math.pow((i / segs - 0.5) * 4, 2));
    d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} fill="none"
      stroke="var(--ink)" strokeWidth="1">
      {/* faint grid */}
      {[...Array(6)].map((_, i) => (
        <line key={'h'+i} x1="0" y1={(H * (i+1)) / 7} x2={W} y2={(H * (i+1)) / 7} stroke="rgba(26,26,26,0.06)" />
      ))}
      {[...Array(11)].map((_, i) => (
        <line key={'v'+i} y1="0" x1={(W * (i+1)) / 12} y2={H} x2={(W * (i+1)) / 12} stroke="rgba(26,26,26,0.04)" />
      ))}
      <path d={d} stroke="var(--ink)" strokeWidth="1.1" />
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="var(--ink-mute)" stroke="none" letterSpacing="1">
        <text x="4" y="10">0.00s</text>
        <text x={W - 50} y="10">62.4Hz</text>
        <text x="4" y={H - 4}>−1σ</text>
        <text x={W - 30} y={H - 4}>+1σ</text>
      </g>
    </svg>
  );
};

// ====================================================
// TEXTURE BANDS
// ====================================================
const TextureBand = ({ src, caption, meta, fallbackGradient }) => (
  <div className="texture-band">
    <Img src={src} alt="" fallbackGradient={fallbackGradient} />
    {caption && <div className="caption">{caption}</div>}
    {meta && <div className="meta">{meta}</div>}
  </div>
);

const BotanicalEdge = ({ children }) => (
  <div className="botanical-edge">
    {children || <BotanicalDivider size={50} />}
  </div>
);

// ====================================================
// PILARES
// ====================================================
const PILLARS = [
  {
    n: '01',
    Icon: IconTech,
    tag: 'Desarrollo Científico',
    title: 'Ciencia aplicada a la nutrición.',
    body: 'Diseñamos fórmulas basadas en evidencia científica, seleccionando ingredientes activos como hongos funcionales, adaptógenos y micronutrientes con beneficios cognitivos y físicos probados.',
    stat: { big: '01', lab: 'Ciencia' },
  },
  {
    n: '02',
    Icon: IconFood,
    tag: 'Bienestar Funcional',
    title: 'Salud cognitiva y estructural.',
    body: 'Creamos productos dirigidos a necesidades reales de bienestar diario, como la concentración mental en GlowFit Mind o la recuperación corporal y estructural en GlowFit Collagen.',
    stat: { big: '02', lab: 'Bienestar' },
  },
  {
    n: '03',
    Icon: IconLeaf,
    tag: 'Comercio DTC',
    title: 'Distribución digital directa.',
    body: 'Operamos con un modelo directo al consumidor (DTC) enfocado en canales digitales, construyendo comunidad con contenido orgánico y alianzas estratégicas de alto alcance.',
    stat: { big: '03', lab: 'Digital' },
  },
  {
    n: '04',
    Icon: IconPeople,
    tag: 'Validación Lean',
    title: 'Operación liviana y eficiente.',
    body: 'Priorizamos la validación comercial mediante lotes iniciales acotados (MOQ) y producción con aliados estratégicos de marca blanca, minimizando el riesgo antes de escalar.',
    stat: { big: '04', lab: 'Eficiencia' },
  },
];

const Pilares = ({ variant = 'editorial' }) => (
  <section id="pilares" className="pilares" data-screen-label="02 Pilares">
    <div className="wrap">
      <div className="pilares-head">
        <div>
          <Reveal as="span" className="eyebrow">Misión Corporativa / 02</Reveal>
          <Reveal as="h2" delay={80}>
            Cuatro pilares, una forma de <span className="ital">construir</span><span className="accent-dot">.</span>
          </Reveal>
        </div>
        <Reveal as="p" className="lede" delay={160}>
          COLAFISH aplica rigor científico, comercio digital directo y validación lean bajo una misma lógica: desarrollar productos funcionales honestos y sostenibles enfocados en mejorar la salud del consumidor.
        </Reveal>
      </div>
      <div className={`pilar-grid ${variant === 'cards' ? 'cards' : ''}`}>
        {PILLARS.map((p, i) => (
          <Reveal key={p.n} className="pilar" delay={i * 80}>
            <div className="num">{p.n} /</div>
            <div className="glyph"><p.Icon size={44} stroke={1.1} /></div>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
            <div className="pilar-stat">
              <span className="big">{p.stat.big}</span>
              <span className="lab">{p.stat.lab}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ====================================================
// MARCAS
// ====================================================
const Marcas = () => {
  return (
    <section id="marcas" className="marcas" data-screen-label="03 Marca Principal">
      <div className="wrap">
        <div className="marcas-head">
          <div>
            <Reveal as="span" className="eyebrow">Desarrollo de Marca / 03</Reveal>
            <Reveal as="h2" delay={80}>
              Nuestra marca enfocada: <span className="ital">GlowFit</span><span className="accent-dot">.</span>
            </Reveal>
            <Reveal as="p" className="head-meta" delay={160} style={{marginTop: 24}}>
              COLAFISH S.A.S. concentra sus capacidades en el desarrollo y posicionamiento de GlowFit en Colombia, una marca de bienestar y alimentos funcionales con sustento científico y validación comercial.
            </Reveal>
          </div>
        </div>

        <Reveal className="marca-showcase" delay={120}>
          <div className="marca-showcase-visual">
            <Img src={PHOTOS.vitality} alt="GlowFit" fallbackGradient="linear-gradient(160deg, #d8c8a8 0%, #b2a07d 100%)" />
            <div className="marca-showcase-badge">BIENESTAR FUNCIONAL</div>
          </div>
          <div className="marca-showcase-content">
            <span className="marca-eyebrow">MARCA PROPIA · CLASE 5</span>
            <h3>GlowFit®</h3>
            <p className="marca-desc">
              Desarrollamos fórmulas funcionales orientadas a mejorar la salud cognitiva y el bienestar estructural del cuerpo. A través de un modelo ágil de marca blanca y validación directa en el mercado colombiano, transformamos ingredientes activos estudiados científicamente en soluciones cotidianas y honestas.
            </p>
            
            <div className="product-lines">
              <h4>Líneas de producto en desarrollo:</h4>
              <div className="line-item">
                <span className="line-dot" />
                <div>
                  <strong>GlowFit Mind (Nootrópico)</strong>
                  <p>Suplemento alimenticio funcional enfocado en la memoria, claridad mental y concentración. Formulado a base de extracto de hongo funcional <em>Melena de León (Hericium erinaceus)</em>, magnesio y cofactores naturales para la optimización del rendimiento cognitivo.</p>
                </div>
              </div>
              <div className="line-item">
                <span className="line-dot" />
                <div>
                  <strong>GlowFit Collagen (Recuperación)</strong>
                  <p>Mezcla soluble premium para la regeneración y bienestar físico. Combina colágeno hidrolizado de tilapia de alta biodisponibilidad, creatina monohidratada para la recuperación muscular y fruta liofilizada de maracuyá real.</p>
                </div>
              </div>
            </div>

            <div className="marca-showcase-foot">
              <a href="https://glowfitnutricion.com/" target="_blank" rel="noopener noreferrer" className="btn btn-secondary">
                Ver marca <span className="arrow"><IconArrow size={12} /></span>
              </a>
              <span className="meta">Reactivación en curso / Colombia</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ====================================================
// METRICS
// ====================================================
const METRICS = [
  { num: 'SAS', lab: 'Empresa constituida' },
  { num: '1', lab: 'Marca enfocada (GlowFit)' },
  { num: 'RST', lab: 'Régimen tributario' },
  { num: '2026', lab: 'Reorganización operativa' },
];

const Metrics = () => (
  <section className="metrics">
    <div className="wrap">
      <Reveal as="span" className="label">Estado institucional<br/>V1 pública</Reveal>
      {METRICS.map((m, i) => (
        <Reveal as="div" className="metric" key={m.lab} delay={80 + i * 60}>
          <span className="num">{m.num}</span>
          <span className="lab">{m.lab}</span>
        </Reveal>
      ))}
    </div>
  </section>
);

// ====================================================
// CONTACT
// ====================================================
const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', role: 'Aliado estratégico', message: '' });

  const submit = (e) => {
    e.preventDefault();
    if (!form.email || !form.name) return;
    setLoading(true);
    setError(false);

    // URL del webhook de n8n para procesar el flujo de datos
    const N8N_WEBHOOK_URL = 'https://n8n.colafish.com.co/webhook/contact-form';

    fetch(N8N_WEBHOOK_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(form),
    })
    .then((res) => {
      if (!res.ok) throw new Error('Error al enviar webhook');
      setSent(true);
      setForm({ name: '', email: '', role: 'Aliado estratégico', message: '' });
      setTimeout(() => setSent(false), 5000);
    })
    .catch((err) => {
      console.error('Webhook error:', err);
      setError(true);
      setTimeout(() => setError(false), 5000);
    })
    .finally(() => {
      setLoading(false);
    });
  };

  return (
    <section id="contact" className="contact" data-screen-label="04 Contacto">
      <div className="wrap">
        <Reveal as="span" className="eyebrow">Aliados y contacto / 04</Reveal>
        <Reveal as="h2" className="quote" delay={80}>
          Hablemos si puedes aportar <span className="accent-word">capacidades</span> reales<span className="accent-dot">.</span>
        </Reveal>
        <Reveal as="p" className="quote-body" delay={160}>
          Estamos abiertos a conversaciones con proveedores, distribuidores, creadores, talento técnico y aliados estratégicos que puedan ayudar a construir marcas propias con mejor producto, mejor operación o mejor llegada al mercado.
        </Reveal>

        <div className="contact-grid">
          <Reveal delay={120}>
            <form className="contact-form" onSubmit={submit}>
              <div className="contact-form-row-2">
                <div className="form-row">
                  <label>Nombre completo</label>
                  <input type="text" required
                    value={form.name}
                    onChange={(e) => setForm(f => ({...f, name: e.target.value}))}
                    disabled={loading} />
                </div>
                <div className="form-row">
                  <label>Correo institucional</label>
                  <input type="email" required
                    value={form.email}
                    onChange={(e) => setForm(f => ({...f, email: e.target.value}))}
                    disabled={loading} />
                </div>
              </div>
              <div className="form-row">
                <label>Tipo de conversación</label>
                <select value={form.role}
                  onChange={(e) => setForm(f => ({...f, role: e.target.value}))}
                  disabled={loading}>
                  <option>Aliado estratégico</option>
                  <option>Proveedor / maquilador</option>
                  <option>Distribuidor</option>
                  <option>Creador de contenido</option>
                  <option>Talento técnico o creativo</option>
                  <option>Otro</option>
                </select>
              </div>
              <div className="form-row">
                <label>Contexto</label>
                <textarea
                  value={form.message}
                  onChange={(e) => setForm(f => ({...f, message: e.target.value}))}
                  placeholder="Cuéntanos brevemente."
                  disabled={loading} />
              </div>
              <div className="contact-submit">
                <span className="contact-submit-status">
                  {loading && 'Enviando formulario...'}
                  {sent && '✓ Conversación registrada — responderemos en 48h'}
                  {error && '⚠ Error de conexión. Escribe a support@colafish.com.co'}
                  {!loading && !sent && !error && 'Formulario de contacto · respuesta estimada en 48h'}
                </span>
                <button type="submit" className="btn btn-primary" style={{padding: '14px 22px'}} disabled={loading}>
                  {loading ? 'Enviando...' : 'Abrir conversación'} <span className="arrow"><IconArrow size={12} /></span>
                </button>
              </div>
            </form>
          </Reveal>

          <Reveal delay={220}>
            <div className="contact-aside">
              <div className="channel">
                <span className="k">Correo institucional</span>
                <a className="v" href="mailto:support@colafish.com.co">support@colafish.com.co <IconArrow size={14}/></a>
              </div>
              <div className="channel">
                <span className="k">Oficinas</span>
                <span className="v" style={{cursor:'default'}}>Tunja, Colombia · 5°N 73°W</span>
              </div>
              <div className="channel">
                <span className="k">Razón social</span>
                <span className="v" style={{cursor:'default', fontSize: 18}}>COLAFISH S.A.S. · NIT 901.878.889-7</span>
              </div>
              <div className="channel">
                <span className="k">Registro</span>
                <span className="v" style={{cursor:'default', fontSize: 16, color:'var(--ink-mute)'}}>S.A.S. · Cámara de Comercio de Tunja</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ====================================================
// FOOTER
// ====================================================
const Footer = () => (
  <footer className="foot">
    <div className="wrap">
      <div className="row1">
        <div className="bigmark">COLAFISH</div>
        <div className="meta-block">
          Marcas propias.<br/>
          Operación liviana.<br/>
          Validación comercial.
        </div>
      </div>
      <div className="row2">
        <div className="col">
          <h5>COLAFISH</h5>
          <a href="#hero">Inicio</a>
          <a href="#pilares">Qué hacemos</a>
          <a href="#marcas">GlowFit (Nuestra marca)</a>
          <a href="#contact">Aliados / contacto</a>
        </div>
        <div className="col">
          <h5>GlowFit</h5>
          <a href="#marcas">GlowFit Mind</a>
          <a href="#marcas">GlowFit Collagen</a>
          <a href="https://glowfitnutricion.com/" target="_blank" rel="noopener noreferrer">Sitio Oficial</a>
        </div>
        <div className="col">
          <h5>Aliados</h5>
          <a href="#contact">Proveedores</a>
          <a href="#contact">Distribuidores</a>
          <a href="#contact">Creadores</a>
          <a href="#contact">Talento</a>
        </div>
        <div className="col">
          <h5>Legal</h5>
          <a href="#">Política de privacidad</a>
          <a href="#">Términos de servicio</a>
          <a href="#">Tratamiento de datos</a>
        </div>
      </div>
      <div className="small">
        <span>© 2026 COLAFISH S.A.S. · Todos los derechos reservados.</span>
        <span>Tunja, Boyacá, Colombia</span>
      </div>
    </div>
  </footer>
);

// ====================================================
// Side rail
// ====================================================
const Rail = ({ activeSection }) => {
  const items = [
    ['hero', '01 / Inicio'],
    ['pilares', '02 / Qué hacemos'],
    ['marcas', '03 / GlowFit'],
    ['contact', '04 / Aliados / contacto'],
  ];
  return (
    <div className="rail">
      {items.map(([id, label]) => (
        <a key={id} href={`#${id}`}
          className={activeSection === id ? 'active' : ''}
          onClick={(e) => { e.preventDefault(); window.cfScrollTo(id); }}>
          <span className="dash"></span>
          <span className="lab">{label}</span>
        </a>
      ))}
    </div>
  );
};

Object.assign(window, {
  Nav, Hero, Pilares, Marcas, Metrics, Contact, Footer, Rail,
  TextureBand, BotanicalEdge, PHOTOS, Img,
});