const PSCore=window.LANAProductionCore;

function PSIcon({name,size=20}){
  const common={width:size,height:size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true"};
  const icons={
    arrow:<><path d="M5 12h14"/><path d="m14 7 5 5-5 5"/></>,
    check:<><path d="m5 12 4 4L19 6"/></>,
    menu:<><path d="M4 8h16M4 16h16"/></>,
    close:<><path d="m6 6 12 12M18 6 6 18"/></>,
    thread:<><path d="M8 4h8M7 7h10l-1 13H8L7 7Z"/><path d="M9 10h6M9 13h6M9 16h6"/></>,
    print:<><rect x="4" y="7" width="16" height="10" rx="2"/><path d="M7 7V3h10v4M7 17v4h10v-4M8 11h.01"/></>,
    layers:<><path d="m12 3 8 4-8 4-8-4 8-4Z"/><path d="m4 12 8 4 8-4M4 17l8 4 8-4"/></>,
    package:<><path d="m4 7 8-4 8 4-8 4-8-4Z"/><path d="M4 7v10l8 4 8-4V7M12 11v10"/></>,
    shield:<><path d="M12 3 5 6v5c0 4.6 2.8 8 7 10 4.2-2 7-5.4 7-10V6l-7-3Z"/><path d="m9 12 2 2 4-5"/></>,
    phone:<><path d="M7 3h4l2 5-3 2a15 15 0 0 0 4 4l2-3 5 2v4c0 2-2 4-4 4C9.3 21 3 14.7 3 7c0-2 2-4 4-4Z"/></>,
    ruler:<><path d="m4 18 14-14 2 2L6 20l-2-2Z"/><path d="m13 7 2 2M10 10l2 2M7 13l2 2"/></>
  };
  return <svg {...common}>{icons[name]||icons.arrow}</svg>;
}

function PSBrand({tenant,footer=false}){
  return <a className={"ps-brand"+(footer?" ps-brand--footer":"")} href="#inicio" aria-label={"Inicio de "+tenant.businessName}>
    {tenant.logoUrl?<img src={tenant.logoUrl} alt={"Logotipo de "+tenant.businessName}/>:<span className="ps-brand-mark" aria-hidden="true">{String(tenant.businessName||"L").slice(0,1)}</span>}
    <span><strong>{tenant.businessName}</strong><small>Producción y personalización</small></span>
  </a>;
}

function PSHeader({tenant,config}){
  const[open,setOpen]=React.useState(false);
  React.useEffect(()=>{const close=()=>setOpen(false);window.addEventListener("hashchange",close);return()=>window.removeEventListener("hashchange",close)},[]);
  return <>
    <div className="ps-utility"><div className="ps-shell"><span>{config.brand.utilityText}</span><span>{config.brand.availabilityText}</span><a href="#contacto">Hablar con producción <PSIcon name="arrow" size={15}/></a></div></div>
    <header className="ps-header"><div className="ps-shell ps-header-inner">
      <PSBrand tenant={tenant}/>
      <button className="ps-menu" type="button" aria-expanded={open} aria-controls="ps-navigation" onClick={()=>setOpen(value=>!value)}>
        <span className="ps-sr-only">{open?"Cerrar menú":"Abrir menú"}</span><PSIcon name={open?"close":"menu"} size={24}/>
      </button>
      <nav id="ps-navigation" className={"ps-nav"+(open?" is-open":"")} aria-label="Navegación principal">
        {config.nav.map(item=><a key={item.id} href={item.href}>{item.label}</a>)}
        <a className="ps-nav-action" href="#contacto">Cotizar <PSIcon name="arrow" size={16}/></a>
      </nav>
    </div></header>
  </>;
}

function PSTechnicalPolo({tenant,config}){
  return <div className="ps-hero-visual" aria-label="Ficha técnica ilustrada de una prenda en producción">
    <div className="ps-registration ps-registration-a" aria-hidden="true"><span/></div>
    <div className="ps-registration ps-registration-b" aria-hidden="true"><span/></div>
    <article className="ps-production-sheet">
      <div className="ps-sheet-head"><span>{config.hero.sheetTitle}</span><strong>OT · 001</strong></div>
      <div className="ps-sheet-stage">
        <svg className="ps-garment" viewBox="0 0 520 520" role="img" aria-label="Polo técnico de frente">
          <path className="ps-garment-body" d="M178 94 224 70h72l46 24 91 61-44 105-51-24v215H182V236l-51 24-44-105 91-61Z"/>
          <path className="ps-garment-panel" d="m224 70 36 57 36-57-16-18h-40l-16 18Z"/>
          <path className="ps-garment-line" d="M260 126v166M182 236l-4-142M338 236l4-142M129 158l52 47M391 158l-52 47"/>
          <path className="ps-garment-cuff" d="m91 158 41 98M429 158l-41 98"/>
          <circle className="ps-garment-button" cx="260" cy="157" r="4"/><circle className="ps-garment-button" cx="260" cy="181" r="4"/><circle className="ps-garment-button" cx="260" cy="205" r="4"/>
          <rect className="ps-logo-zone" x="292" y="151" width="68" height="54" rx="4"/>
          <text x="326" y="174" textAnchor="middle">LOGO</text><text x="326" y="189" textAnchor="middle">8 × 5 CM</text>
        </svg>
        <div className="ps-spec ps-spec-a"><span>Prenda</span><strong>Polo ejecutivo</strong><small>Vista frontal · escala 1:4</small></div>
        <div className="ps-spec ps-spec-b"><span>Aplicación</span><strong>Bordado directo</strong><small>Pecho izquierdo · 8 × 5 cm</small></div>
        <div className="ps-approval"><span>Arte</span><strong>Aprobado</strong><small>Revisión 02</small></div>
      </div>
      <div className="ps-sheet-foot"><span><i className="ps-swatch ps-swatch-blue"/> Azul de marca</span><span><i className="ps-swatch ps-swatch-lime"/> Hilo contraste</span><strong>{config.hero.sheetStatus}</strong></div>
    </article>
    <aside className="ps-thread-card"><span>Muestra de hilo</span><div className="ps-spool"><i/><i/><i/><i/><i/><b/></div><small>Color orientativo · validar muestra física</small></aside>
    <div className="ps-visual-caption"><span>{tenant.businessName}</span><strong><PSIcon name="ruler" size={17}/></strong></div>
  </div>;
}

function PSHero({tenant,config,catalogUrl}){
  return <section id="inicio" className="ps-hero"><div className="ps-shell ps-hero-grid">
    <div className="ps-hero-copy">
      <span className="ps-kicker"><i/> {config.hero.eyebrow}</span>
      <h1>{config.hero.title}</h1>
      <p className="ps-hero-lead">{config.hero.description}</p>
      <div className="ps-actions"><a className="ps-button ps-button-primary" href="#contacto">{config.hero.primaryLabel}<PSIcon name="arrow" size={18}/></a><a className="ps-text-link" href="#capacidades">{config.hero.secondaryLabel}<PSIcon name="arrow" size={17}/></a></div>
      <div className="ps-hero-facts">{config.hero.facts.map((fact,index)=><article key={index}><strong>{fact.value}</strong><span>{fact.label}</span></article>)}</div>
      <a className="ps-catalog-link" href={catalogUrl}>Explorar productos publicados <PSIcon name="arrow" size={17}/></a>
    </div>
    <PSTechnicalPolo tenant={tenant} config={config}/>
  </div>
  <div className="ps-ticker" aria-hidden="true"><div><span>Bordado</span><i>•</i><span>DTF</span><i>•</i><span>Serigrafía</span><i>•</i><span>Sublimación</span><i>•</i><span>Gran formato</span><i>•</i><span>Promocionales</span><i>•</i><span>Bordado</span><i>•</i><span>DTF</span><i>•</i><span>Serigrafía</span><i>•</i><span>Sublimación</span><i>•</i></div></div>
  </section>;
}

function PSManifesto({config}){
  if(!config.sections.manifesto)return null;
  return <section className="ps-shell ps-manifesto">
    <span className="ps-section-index">01 / {config.manifesto.label}</span>
    <div><h2>{config.manifesto.title}</h2><p>{config.manifesto.description}</p></div>
    <aside><span>Criterio de producción</span><strong>{config.manifesto.note}</strong><PSIcon name="thread" size={66}/></aside>
  </section>;
}

function PSCapabilityArt({id}){
  if(id==="bordado")return <div className="ps-cap-art ps-art-embroidery"><div className="ps-fabric"/><div className="ps-stitch-mark"><PSIcon name="thread" size={66}/><span>Bordado</span></div><small>Textura · relieve · permanencia</small></div>;
  if(id==="dtf")return <div className="ps-cap-art ps-art-dtf"><i/><i/><i/><strong>CMYK</strong><small>Capas de color y blanco</small></div>;
  if(id==="serigrafia")return <div className="ps-cap-art ps-art-screen"><div><span/></div><i/><small>Registro de tinta</small></div>;
  return <div className="ps-cap-art ps-art-promo"><div className="ps-tumbler"><span>Marca</span></div><div className="ps-patch">Pieza<br/>especial</div></div>;
}

function PSCapabilities({config}){
  if(!config.sections.capabilities)return null;
  return <section id="capacidades" className="ps-shell ps-capabilities">
    <div className="ps-section-head"><span className="ps-section-index">02 / Capacidades</span><h2>Una técnica para cada intención.</h2><p>Producción textil, gráfica y promocional coordinada desde una misma conversación.</p></div>
    <div className="ps-cap-grid">{config.capabilities.map((cap,index)=><article className={"ps-cap-card "+(index===0?"ps-cap-card--wide ":"")+(index===3?"ps-cap-card--dark":"")} key={cap.id}>
      <div className="ps-cap-top"><span>{cap.code}</span><small>Capacidad activa</small></div>
      <PSCapabilityArt id={cap.id}/>
      <div className="ps-cap-copy"><h3>{cap.title}</h3><p>{cap.description}</p><ul>{cap.tags.map(tag=><li key={tag}>{tag}</li>)}</ul></div>
    </article>)}</div>
  </section>;
}

function PSSegment({value,onChange,options,label}){
  return <fieldset className="ps-selector-group"><legend>{label}</legend><div className="ps-segments">{options.map(option=><button type="button" key={option.value} className={value===option.value?"is-active":""} aria-pressed={value===option.value} onClick={()=>onChange(option.value)}>{option.label}</button>)}</div></fieldset>;
}

function PSSelector({config}){
  const[quantity,setQuantity]=React.useState("mid");
  const[design,setDesign]=React.useState("simple");
  const[product,setProduct]=React.useState("garment");
  const result=PSCore.recommendTechnique({quantity,design,product});
  if(!config.sections.selector)return null;
  return <section id="selector" className="ps-selector"><div className="ps-shell ps-selector-grid">
    <div className="ps-selector-intro"><span className="ps-section-index">03 / {config.selector.label}</span><h2>{config.selector.title}</h2><p>{config.selector.description}</p><div className="ps-selector-note"><i/>{config.selector.disclaimer}</div></div>
    <div className="ps-selector-panel">
      <div className="ps-selector-progress"><span className="is-active"/><span className="is-active"/><span className="is-active"/></div>
      <PSSegment label="Cantidad aproximada" value={quantity} onChange={setQuantity} options={[{value:"low",label:"1–24 piezas"},{value:"mid",label:"25–99 piezas"},{value:"high",label:"100+ piezas"}]}/>
      <PSSegment label="Tipo de diseño" value={design} onChange={setDesign} options={[{value:"simple",label:"Simple"},{value:"complex",label:"Full color"},{value:"relief",label:"Con relieve"}]}/>
      <fieldset className="ps-selector-group"><legend>Producto principal</legend><div className="ps-option-cards">
        {[["garment","Prenda","Playeras, polos y uniformes","thread"],["cap","Gorra","Panel frontal o parche","shield"],["object","Objeto","Termos, placas y regalos","package"]].map(([id,title,copy,icon])=><button type="button" key={id} className={product===id?"is-active":""} aria-pressed={product===id} onClick={()=>setProduct(id)}><span><PSIcon name={icon} size={24}/></span><b>{title}</b><small>{copy}</small></button>)}
      </div></fieldset>
      <article className="ps-recommendation" aria-live="polite"><div className="ps-recommendation-head"><span>Ruta recomendada</span><strong>{result.code}</strong></div><div className="ps-recommendation-body"><span>{result.icon}</span><div><h3>{result.title}</h3><p>{result.copy}</p></div></div><div className="ps-recommendation-foot"><span>{result.note}</span><a href="#contacto">Validar con producción <PSIcon name="arrow" size={15}/></a></div></article>
    </div>
  </div></section>;
}

function PSApplicationVisual({id}){
  if(id==="uniformes")return <div className="ps-project-art ps-project-uniform"><div className="ps-uniform-object"><span>Equipo</span></div></div>;
  if(id==="campanas")return <div className="ps-project-art ps-project-campaign"><div className="ps-campaign-shirt"><span><b>Color</b>en acción</span></div></div>;
  return <div className="ps-project-art ps-project-cap"><div className="ps-cap-object"><span>3D</span></div></div>;
}

function PSApplications({config}){
  if(!config.sections.applications)return null;
  return <section id="aplicaciones" className="ps-shell ps-projects">
    <div className="ps-section-head ps-projects-head"><span className="ps-section-index">04 / Aplicaciones</span><h2>Casos pensados desde el uso real.</h2><p>No son adornos: cada decisión visual responde a lectura, duración y contexto.</p></div>
    <div className="ps-project-list">{config.applications.map(item=><article className="ps-project-row" key={item.id}>
      <div className="ps-project-index"><span>Caso</span><strong>{item.code}</strong></div><PSApplicationVisual id={item.id}/>
      <div className="ps-project-copy"><div className="ps-project-meta"><span>{item.technique}</span><span>{item.use}</span></div><h3>{item.title}</h3><p>{item.description}</p><dl><div><dt>Técnica</dt><dd>{item.technique}</dd></div><div><dt>Volumen</dt><dd>{item.volume}</dd></div><div><dt>Uso</dt><dd>{item.use}</dd></div></dl></div>
    </article>)}</div>
  </section>;
}

function PSMethod({config}){
  if(!config.sections.method)return null;
  return <section id="metodo" className="ps-method"><div className="ps-shell ps-method-grid">
    <div><span className="ps-section-index">05 / Método</span><h2>Orden antes de producir.</h2><p>Un proyecto bien coordinado reduce retrabajos, dudas y sorpresas. Estas cinco etapas mantienen la conversación enfocada.</p><a className="ps-button ps-button-light" href="#contacto">Empezar un proyecto <PSIcon name="arrow" size={18}/></a></div>
    <article className="ps-method-ticket"><div className="ps-ticket-head"><span>Ruta de producción</span><strong>5 etapas</strong></div><ol>{config.method.map(step=><li key={step.code}><span>{step.code}</span><div><b>{step.title}</b><p>{step.description}</p></div><i>Validación</i></li>)}</ol><div className="ps-ticket-foot"><span>Del brief a la entrega</span><b>{config.brand.studioLabel}</b></div></article>
  </div></section>;
}

function PSProof({config}){
  if(!config.sections.proof)return null;
  return <section className="ps-shell ps-proof"><div className="ps-proof-head"><span className="ps-section-index">06 / Calidad</span><h2>Los detalles pequeños sostienen el resultado completo.</h2></div><div className="ps-proof-grid">{config.proof.map(item=><article key={item.code}><span>{item.code}</span><h3>{item.title}</h3><p>{item.description}</p></article>)}</div></section>;
}

function PSQuote({tenant,config,catalogUrl}){
  const initial={name:"",phone:"",product:"",quantity:"",date:"",city:"",details:""};
  const[form,setForm]=React.useState(initial);
  const[technique,setTechnique]=React.useState("Por definir");
  const[errors,setErrors]=React.useState({});
  const[status,setStatus]=React.useState("");
  if(!config.sections.quote)return null;
  const update=(key,value)=>{setForm(current=>({...current,[key]:value}));setErrors(current=>({...current,[key]:""}));setStatus("")};
  const submit=event=>{
    event.preventDefault();
    const next={};
    ["name","phone","product","quantity"].forEach(key=>{if(!String(form[key]||"").trim())next[key]="Este dato es necesario."});
    if(Object.keys(next).length){setErrors(next);setStatus("Revisa los campos marcados para continuar.");return}
    const message=PSCore.buildQuoteMessage({tenant,form,technique});
    const target=PSCore.contactTarget(tenant);
    if(target.type==="whatsapp"){
      const url=target.href+"?text="+encodeURIComponent(message);
      window.open(url,"_blank","noopener,noreferrer");
      setStatus("Abrimos WhatsApp con tu solicitud lista para enviar.");
    }else if(target.type==="email"){
      window.location.href=target.href+"?subject="+encodeURIComponent("Solicitud de cotización")+"&body="+encodeURIComponent(message);
      setStatus("Abrimos tu correo con el resumen de la solicitud.");
    }else if(target.type==="phone"){
      window.location.href=target.href;
      setStatus("Puedes continuar la solicitud por teléfono.");
    }else{
      window.location.href=catalogUrl;
    }
  };
  const field=(label,key,props={})=><label className={"ps-field"+(errors[key]?" has-error":"")}><span>{label}{["name","phone","product","quantity"].includes(key)&&" *"}</span><input {...props} value={form[key]} onChange={event=>update(key,event.target.value)} aria-invalid={!!errors[key]} aria-describedby={errors[key]?"ps-error-"+key:undefined}/>{errors[key]&&<small id={"ps-error-"+key}>{errors[key]}</small>}</label>;
  return <section id="contacto" className="ps-quote"><div className="ps-shell ps-quote-grid">
    <div className="ps-quote-copy"><span className="ps-section-index">07 / {config.quote.label}</span><h2>{config.quote.title}</h2><p>{config.quote.description}</p><div className="ps-contact-block"><span>Canales del negocio</span>{tenant.whatsapp&&<a href={"https://wa.me/"+PSCore.cleanPhone(tenant.whatsapp)}>WhatsApp <b>{tenant.whatsapp}</b></a>}{tenant.phone&&<a href={"tel:"+tenant.phone}>Teléfono <b>{tenant.phone}</b></a>}{tenant.email&&<a href={"mailto:"+tenant.email}>Correo <b>{tenant.email}</b></a>}{tenant.address&&<p>{tenant.address}</p>}</div><div className="ps-hours"><div><span>{config.quote.hoursLabel}</span><strong>{config.quote.hoursValue}</strong></div><small>La confirmación final depende de disponibilidad y revisión técnica.</small></div></div>
    <form className="ps-quote-form" onSubmit={submit} noValidate><div className="ps-form-head"><span>Solicitud inicial</span><strong>Respuesta humana</strong></div>
      <div className="ps-field-row">{field("Nombre","name",{autoComplete:"name",placeholder:"Tu nombre"})}{field("WhatsApp de contacto","phone",{autoComplete:"tel",inputMode:"tel",placeholder:"33 0000 0000"})}</div>
      {field("Producto o proyecto","product",{placeholder:"Ej. 40 polos para uniforme"})}
      <div className="ps-field-row">{field("Cantidad","quantity",{inputMode:"numeric",placeholder:"Ej. 40"})}{field("Fecha ideal","date",{type:"date"})}</div>
      {field("Ciudad de entrega","city",{autoComplete:"address-level2",placeholder:"Ciudad, estado"})}
      <fieldset className="ps-tech-choice"><legend>Técnica de interés</legend><div>{["Por definir","Bordado","DTF","Serigrafía"].map(value=><label key={value}><input type="radio" name="technique" checked={technique===value} onChange={()=>setTechnique(value)}/><span>{value}</span></label>)}</div></fieldset>
      <label className="ps-field"><span>Detalles adicionales</span><textarea value={form.details} onChange={event=>update("details",event.target.value)} placeholder="Uso, colores, medidas, archivo disponible o cualquier dato útil."/></label>
      <button className="ps-button ps-button-primary ps-submit" type="submit">{config.quote.submitLabel}<PSIcon name="arrow" size={18}/></button>
      <p className="ps-privacy">Tus datos se usan únicamente para responder esta solicitud.</p><p className="ps-form-status" role="status">{status}</p>
    </form>
  </div></section>;
}

function PSFooter({tenant,config,catalogUrl}){
  return <footer className="ps-footer"><div className="ps-shell ps-footer-main"><div><PSBrand tenant={tenant} footer/><p>{config.hero.description}</p></div><nav aria-label="Enlaces del pie"><div><span>Explora</span><a href="#capacidades">Capacidades</a><a href="#selector">Recomendador</a><a href={catalogUrl}>Catálogo</a></div><div><span>Proceso</span><a href="#aplicaciones">Aplicaciones</a><a href="#metodo">Método</a><a href="#contacto">Cotizar</a></div><div><span>Contacto</span>{tenant.email&&<a href={"mailto:"+tenant.email}>{tenant.email}</a>}{tenant.phone&&<a href={"tel:"+tenant.phone}>{tenant.phone}</a>}{tenant.address&&<p>{tenant.address}</p>}</div></nav></div><div className="ps-shell ps-footer-bottom"><span>© {new Date().getFullYear()} {tenant.businessName}</span><span>Experiencia pública conectada con LANA</span></div></footer>;
}

function ProductionStudioPage({tenant,products,services}){
  const[previewTenant,setPreviewTenant]=React.useState(tenant);
  const[config,setConfig]=React.useState(()=>PSCore.normalizeConfig(tenant.landing&&tenant.landing.productionStudio));
  React.useEffect(()=>{
    const receive=event=>{
      if(!event.data||event.data.type!=="lana-landing-preview")return;
      const landing=event.data.landing||{};
      setPreviewTenant(current=>({...current,
        businessName:landing.businessName||current.businessName,
        logoUrl:landing.logoUrl!==undefined?landing.logoUrl:current.logoUrl,
        whatsapp:landing.whatsapp!==undefined?landing.whatsapp:current.whatsapp,
        phone:landing.phone!==undefined?landing.phone:current.phone,
        email:landing.email!==undefined?landing.email:current.email,
        address:landing.address!==undefined?landing.address:current.address,
        landing:{...current.landing,...landing}
      }));
      if(landing.productionStudio)setConfig(PSCore.normalizeConfig(landing.productionStudio));
    };
    window.addEventListener("message",receive);
    return()=>window.removeEventListener("message",receive);
  },[]);
  React.useEffect(()=>{
    const root=document.documentElement;
    root.dataset.template=PSCore.TEMPLATE_ID;
    Object.keys(config.palette).forEach(key=>root.style.setProperty("--ps-"+key.replace(/[A-Z]/g,letter=>"-"+letter.toLowerCase()),config.palette[key]));
    document.title=previewTenant.businessName+" — Producción y personalización";
  },[config.palette,previewTenant.businessName]);
  const catalogUrl=previewTenant.id?window.resolverUrlCatalogo(previewTenant):"catalogo.html";
  const wa=PSCore.cleanPhone(previewTenant.whatsapp);
  return <div className="production-studio-page" data-template="production-studio">
    <a className="ps-skip" href="#contenido">Saltar al contenido</a>
    <PSHeader tenant={previewTenant} config={config}/>
    <main id="contenido"><PSHero tenant={previewTenant} config={config} products={products} catalogUrl={catalogUrl}/><PSManifesto config={config}/><PSCapabilities config={config}/><PSSelector config={config}/><PSApplications config={config}/><PSMethod config={config}/><PSProof config={config}/><PSQuote tenant={previewTenant} config={config} catalogUrl={catalogUrl}/></main>
    <PSFooter tenant={previewTenant} config={config} catalogUrl={catalogUrl}/>
    {wa&&<a className="ps-floating-contact" href={"https://wa.me/"+wa} target="_blank" rel="noopener noreferrer"><span>WhatsApp</span><b><PSIcon name="phone" size={18}/></b></a>}
  </div>;
}

window.LANAProductionTemplate={ProductionStudioPage};