/* ===== Ramona Bytes v2 — Sections ===== */

function Nav() {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="brand" href="#top">
          <img src="assets/RamonaSymbol.png" alt="" className="brand-mark" aria-hidden="true"/>
          <div className="brand-text">
            RAMONA BYTES
            <small>// dev · digital · cybersec</small>
          </div>
        </a>
        <nav className="nav-links">
          <a href="#brief">Briefing</a>
          <a href="#exhibits">Disciplinas</a>
          <a href="#process">Proceso</a>
      
          <a href="#contact">Contacto</a>
        </nav>
        <a className="nav-cta" href="#contact">
          <span className="dot"/>
          Iniciar proyecto
        </a>
      </div>
    </header>
  );
}

function CursorTrail() {
  const dotRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const particles = React.useRef([]);

  React.useEffect(() => {
    const dot = dotRef.current;
    const canvas = canvasRef.current;
    if (!dot || !canvas) return;

    const ctx = canvas.getContext('2d');
    let mx = innerWidth/2, my = innerHeight/2, dx = mx, dy = my;
    let lastByte = 0, raf;

    const resize = () => { canvas.width = innerWidth; canvas.height = innerHeight; };
    resize();
    window.addEventListener('resize', resize);

    const onMove = (e) => {
      mx = e.clientX; my = e.clientY;
      const now = performance.now();
      if (now - lastByte > 20) {
        lastByte = now;
        particles.current.push({
          x: mx + (Math.random()-0.5)*12,
          y: my + (Math.random()-0.5)*12,
          size: 4 + Math.random()*6,
          rot: (Math.random()*90-45) * Math.PI/180,
          drift: (Math.random()-0.5)*30,
          lift: -10 - Math.random()*30,
          color: Math.random() < 0.7 ? '#C4525E' : '#EFEAE0',
          t0: now,
          dur: 900
        });
      }
      const isInteractive = e.target && e.target.closest("a, button, .exhibit, .tq-head, .bp-step, [data-hover]");
      dot.classList.toggle("is-hover", !!isInteractive);
    };
    window.addEventListener('mousemove', onMove);

    const tick = () => {
      dx += (mx-dx)*0.45; dy += (my-dy)*0.45;
      dot.style.transform = `translate(${dx}px, ${dy}px) translate(-50%, -50%)`;

      const now = performance.now();
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      particles.current = particles.current.filter(p => {
        const t = (now - p.t0) / p.dur;
        if (t >= 1) return false;
        const ease = 1 - Math.pow(1 - t, 2);
        const s = p.size * (1 - t * 0.8);
        ctx.save();
        ctx.globalAlpha = 1 - t;
        ctx.fillStyle = p.color;
        ctx.translate(p.x + p.drift * ease, p.y + p.lift * ease);
        ctx.rotate(p.rot + t * 0.5);
        ctx.fillRect(-s/2, -s/2, s, s);
        ctx.restore();
        return true;
      });

      raf = requestAnimationFrame(tick);
    };
    tick();

    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('resize', resize);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <>
      <canvas ref={canvasRef} style={{position:'fixed',inset:0,pointerEvents:'none',zIndex:9998}} />
      <div ref={dotRef} className="cursor-dot"/>
    </>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <h1 className="hero-title">
        Si lo construimos <br/>
        <em>lo sostenemos.</em>
      </h1>

      <p className="hero-sub">
        Estudio independiente de desarrollo de software, presencia digital y
        consultoría de ciberseguridad. Construimos producto a medida, auditamos
        lo que ya existe, y diseñamos identidad que sostiene la operación.
        Pocos proyectos a la vez, atención completa en cada uno.
      </p>
    </section>
  );
}

function Tape() {
  const items = ["Desarrollo a medida","Auditoría OWASP","Identidad digital","Pentesting","Branding","Web · App · API","ISO 27001","Threat modeling"];
  const row = <span>{items.map((it,i) => <React.Fragment key={i}><i/>{it}</React.Fragment>)}</span>;
  return <div className="tape" aria-hidden="true"><div className="tape-track">{row}{row}</div></div>;
}

function DocHead({ num, title, code, page }) {
  return (
    <div className="doc-head">
      <span className="h-num">§{num}</span>
      <span className="h-title">{title}</span>
      <span className="h-meta">
        Ref<strong>{code}</strong>
        Página<strong>{page}</strong>
      </span>
    </div>
  );
}

function Brief() {
  const BriefLoop = window.RamonaBriefLoop;
  return (
    <section className="doc-section" id="brief">
      <DocHead num="00" title="Briefing del estudio" code="RB.000" page="01"/>
      <div className="brief-grid">
        <div className="brief-text">
          <p>
            <span className="stamp">Resumen</span>
          </p>
          <p>
            Operamos como un estudio pequeño y profesional. Nuestro trabajo combina
            tres disciplinas que rara vez conviven en un mismo equipo:
            ingeniería de software a medida, consultoría de ciberseguridad y
            diseño de identidad digital.
          </p>
          <p>
            La integración importa porque las fronteras entre estas áreas son
            donde aparecen los problemas reales. Un sitio sin endurecer es una
            superficie de ataque. Una identidad sin sistema técnico no escala.
            Una arquitectura sin narrativa no se adopta. Nosotros cubrimos los
            tres ejes con la misma gente.
          </p>
          <p>
            Trabajamos por proyecto cerrado o por retainer mensual. Pocos
            clientes a la vez, comunicación directa con quien construye, sin
            project managers ni capas comerciales.
          </p>
        </div>
        <figure className="brief-loop-fig" aria-label="Animación de identidad Ramona">
          {BriefLoop ? (
            <BriefLoop />
          ) : (
            <div className="brief-loop-fallback" aria-hidden="true">
              <img src="assets/RamonaSymbol.png" alt="" />
            </div>
          )}
        </figure>
      </div>
    </section>
  );
}

function Exhibits() {
  const items = [
    {
      n: "01", tag: "EXH. A",
      title: <>Desarrollo<br/><em>de software</em></>,
      body: "Si tienes una idea, un proceso o una necesidad concreta, lo convertimos en software. Aplicaciones web, plataformas a medida, APIs e integraciones, dashboards internos y sitios con funcionalidad propia — todo construido específicamente para ti, sin plantillas. Código auditable, tests, integración continua y documentación de handoff completa."
    },
    {
      n: "02", tag: "EXH. B",
      title: <>Consultoría<br/><em>de ciberseguridad</em></>,
      body: "Pentesting, auditoría OWASP, threat modeling y respuesta a incidentes. Reportes ejecutivos para dirección y planes técnicos de remediación con estimaciones reales. Además acompañamos a tu equipo: formación interna, talleres de concienciación y todo lo que tiene que ver con gobernanza — políticas, procedimientos, controles y marcos de cumplimiento como ISO 27001 o NIST."
    },
    {
      n: "03", tag: "EXH. C",
      title: <>Presencia<br/><em>digital</em></>,
      body: "Identidad, sitio, contenido y SEO técnico. Diseño con criterio sobre stacks modernos, performance medible, analítica honesta. Hacemos también la sesión de fotos para tu sitio y gestionamos tu ficha en Google — para que cuando alguien te busque en Maps o en el buscador, lo que encuentre represente bien lo que eres. Sin templates, sin lorem ipsum."
    }
  ];
  return (
    <section className="doc-section" id="exhibits">
      <DocHead num="01" title="Disciplinas — exposición de servicios" code="RB.001" page="04"/>
      <div className="exhibits">
        {items.map(it => (
          <div className="exhibit" key={it.n}>
            <span className="ex-tag">{it.tag}</span>
            <h3>{it.title}</h3>
            <p className="ex-body">{it.body}</p>
            <span className="audit-finding" style={{top:8,left:8}}>finding · {it.n}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n:"01", t:"Descubrimiento", c:"Mapeo inicial de objetivos, riesgos y restricciones." , co:"A1·B1"},
    { n:"02", t:"Auditoría", c:"Revisión de código, infraestructura y exposición pública." , co:"A2·B1"},
    { n:"03", t:"Diseño", c:"Wireframes, threat model y selección de stack acordados." , co:"A3·B1"},
    { n:"04", t:"Construcción", c:"Sprints cortos, demos quincenales, acceso al repositorio." , co:"A4·B1"},
    { n:"05", t:"Hardening", c:"Pentest interno, runbooks, observabilidad y documentación." , co:"A5·B1"},
    { n:"06", t:"Acompañamiento", c:"Soporte continuo, retainer flexible o handoff completo." , co:"A6·B1"}
  ];
  return (
    <section className="doc-section" id="process">
      <DocHead num="02" title="Procedimiento estándar — VI fases" code="RB.002" page="09"/>
      <div className="blueprint reveal">
        <div className="bp-grid">
          {steps.map(s => (
            <div className="bp-step" key={s.n}>
              <span className="bp-bullet"/>
              <div className="bp-num">Fase {s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.c}</p>
              <span className="bp-coord">{s.co}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* TESTIMONY — comentado temporalmente
function Testimony() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "¿Trabajan con startups o sólo con empresas grandes?", a: "Ambas. Existe un track para founders early-stage, con presupuestos contenidos y scope acotado, y otro para empresas con stack legacy y cumplimiento regulatorio. Adaptamos el equipo y la metodología al tamaño del proyecto." },
    { q: "¿En qué se diferencian de una agencia tradicional?", a: "No tenemos cuentas, project managers ni capas. Hablas directamente con quien construye. El equipo es chico y profesional. Si nos contratas, nos contratas a nosotros — no a un junior subcontratado." },
    { q: "¿Pueden auditar lo que ya construyeron otros?", a: "Sí, y es de lo que más hacemos. Pentest, code review, cloud audit y reporte ejecutivo + técnico. Hallazgos priorizados y plan de remediación con estimaciones reales." },
    { q: "¿Cuánto cuesta un proyecto típico?", a: "Auditoría y consultoría parten desde 4.5k USD. Producto a medida arranca en 18k USD para MVPs y escala desde ahí. Cobramos por proyecto cerrado o por retainer mensual." },
    { q: "¿Firman NDA?", a: "Por supuesto. Antes de la primera llamada profunda si lo necesitas. También trabajamos con cláusulas de no-competencia sectorial cuando aplica." },
    { q: "¿Cómo es el handoff al equipo interno?", a: "Documentación técnica completa, runbooks operativos, sesiones de onboarding grabadas y 90 días de soporte incluidos. El objetivo es que tu equipo herede el producto sin fricción." }
  ];
  return (
    <section className="doc-section" id="faq">
      <DocHead num="03" title="Testimonio — preguntas recurrentes" code="RB.003" page="14"/>
      <div className="testimony">
        {items.map((it, i) => (
          <div className={"tq" + (open === i ? " open" : "")} key={i}>
            <button className="tq-head" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="n">§ 03.{String(i+1).padStart(2,"0")}</span>
              <span className="q">{it.q}</span>
              <span className="toggle">+</span>
            </button>
            <div className="tq-body">
              <span/>
              <div>{it.a}</div>
              <span/>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
*/

function Testimony() { return null; }

function Closing() {
  return (
    <section className="closing" id="contact">
      <div className="closing-layout">
        <div className="closing-info">
          <h2 className="closing-title">Iniciar<br/><em>proyecto.</em></h2>
          <div className="closing-grid">
            <div>
              <h5>Contacto directo</h5>
              <p>info@ramonabytes.com</p>
            </div>
           {/*  <div>
              <h5>Canales</h5>
              <p><a href="#">LinkedIn</a> · <a href="#">GitHub</a> · <a href="https://www.instagram.com/ramonabytes/" target="_blank" rel="noopener noreferrer">Instagram</a></p>
            </div>*/}
          </div>  
        </div>

        <div className="closing-contacts">
          <a className="closing-mail" href="tel:+34689999791">
            +34 689 999 791 →
          </a>
          <a className="closing-mail" href={"mailto:" + ["info", "ramonabytes.com"].join("@")}>
            info@ramonabytes.com →
          </a>
        </div>
      </div>

      {/* FORMULARIO — comentado temporalmente
      <form className="contact-form" onSubmit={handleSubmit} noValidate>
        ...ver git history para restaurar...
      </form>
      */}

      <div className="closing-foot">
        <span>© 2026 · Ramona Bytes · Todos los derechos reservados</span>
        <span>Documento RB-2026-005 · v.2026.05</span>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.CursorTrail = CursorTrail;
window.Hero = Hero;
window.Tape = Tape;
window.Brief = Brief;
window.Exhibits = Exhibits;
window.Process = Process;
window.Testimony = Testimony;
window.Closing = Closing;