const { useState, useEffect, useRef } = React;

// ────────────────────────────────────────────────────────────────────
// Hero
// ────────────────────────────────────────────────────────────────────
function Hero(){
  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>Mașinăria noastră nu se oprește</div>
          <h1 className="display">
            Spălătorie<br/>
            <span className="underlined">industrială</span> <em>textilă</em>
          </h1>
          <div className="hero-tag">
            <span>Curat</span><span className="sep"></span>
            <span>Românesc</span><span className="sep"></span>
            <span>Sigur</span>
          </div>
          <p className="hero-lead">
            O fabrică tehnologic avansată, unde activitatea umană e susținută de inteligență
            artificială și roboți. Procesăm până la 200 de tone de textile lunar — 7/7,
            fără compromisuri.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="mailto:office@silgimar.ro">Solicită ofertă <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="https://www.youtube.com/watch?v=yDjMXjJV-N4&t=3s" target="_blank" rel="noopener">
              <span className="play-icon">
                <svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 1.5 L9 5.5 L2 9.5 Z" fill="currentColor"/></svg>
              </span>
              Vezi Manifesto
            </a>
          </div>
        </div>

        <div className="drum-wrap" aria-hidden="true">
          <img src="assets/logo-mark.png" alt="" style={{
            width:'100%', height:'100%', objectFit:'contain',
            animation: 'spin 60s linear infinite'
          }}/>
        </div>
      </div>

      <Marquee/>
    </section>
  );
}

function Marquee(){
  const items = [
    { text:'Livrare 24h', thin:true },
    { text:'Medical' },
    { text:'HoReCa' },
    { text:'ISO 9001', thin:true },
    { text:'Militar' },
    { text:'Educație' },
    { text:'200 tone / lună', thin:true },
    { text:'Medico-Sociale' },
    { text:'Industrial' },
  ];
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((item,i)=>(
          <React.Fragment key={i}>
            <span className={item.thin ? 'italic' : ''}>{item.text}</span>
            <span className="dot"></span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// Metrics
// ────────────────────────────────────────────────────────────────────
function Metrics(){
  const cards = [
    { num:128, label:'Clienți', desc:'în portofoliu activ'},
    { num:9,   label:'Industrii', desc:'medical, militar, HoReCa…'},
    { num:200, label:'Tone / lună', desc:'capacitate maximă procesare', sup:'+'},
    { num:10,  label:'Ani', desc:'de experiență dedicată'},
  ];
  return (
    <section style={{ padding:'0' }}>
      <div className="wrap" style={{ paddingLeft:0, paddingRight:0, maxWidth:1320 }}>
        <div className="metrics">
          {cards.map((c,i)=>(
            <div className="metric" key={i}>
              <CountUp to={c.num} sup={c.sup}/>
              <div className="label">{c.label}</div>
              <div className="desc">{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CountUp({ to, sup }){
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const obs = new IntersectionObserver((es)=>{
      es.forEach(e=>{
        if(e.isIntersecting){
          const start = performance.now();
          const dur = 1400;
          const tick = (now)=>{
            const p = Math.min(1, (now-start)/dur);
            const eased = 1 - Math.pow(1-p, 3);
            setN(Math.floor(to * eased));
            if(p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          obs.disconnect();
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return ()=>obs.disconnect();
  }, [to]);
  return <div className="num" ref={ref}>{n}{sup && <sup>{sup}</sup>}</div>;
}

// ────────────────────────────────────────────────────────────────────
// About
// ────────────────────────────────────────────────────────────────────
function About(){
  const features = [
    { t:'Asociație om + tehnologie', d:'Roboți pentru operațiuni repetitive, oameni pentru ceea ce contează — calitate, atenție, decizie.'},
    { t:'Tunel cu UV', d:'Tunelul nostru de spălare e echipat cu dezinfecție prin ultraviolete, pe lângă tratamentul chimic și termic.'},
    { t:'7/7 fără pauză', d:'Activitate continuă, susținută de automatizare. Mașinăria nu se oprește — nici la sfârșit de săptămână.'},
    { t:'RFID — opțional', d:'Microcipuri atașate textilelor: vezi în orice moment cantitățile ridicate, spălate, livrate, facturate.'},
  ];
  return (
    <section id="despre">
      <div className="wrap split">
        <div>
          <div className="section-tag">Despre noi</div>
          <h2 className="section-title">
            Cum facem <em>țara</em> să meargă?
          </h2>
          <p style={{ marginTop:24, fontSize:17, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'52ch'}}>
            Prin automatizare, robotizare și o echipă de succes a uneia dintre cele mai
            moderne spălătorii din centrul Europei. O țară funcționează când pui accent
            pe eficiență — vrem să fim partenerii tăi.
          </p>
          <p style={{ marginTop:18, fontSize:17, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'52ch'}}>
            O echipă de <b>20 de operatori</b> spală, dezinfectează, calcă și ambalează
            până la <b>200 tone / lună</b>, cu posibilitatea de tracking RFID în timp real.
          </p>
          <div style={{ display:'flex', gap:14, marginTop:30, flexWrap:'wrap' }}>
            <a className="btn btn-primary" href="#servicii">Vezi serviciile <span className="arr">→</span></a>
            <a className="btn btn-ghost" href="#echipa">Cunoaște echipa</a>
          </div>
        </div>

        <div className="about-features">
          {features.map((f,i)=>(
            <div className="feature-card" key={i}>
              <div className="icon">
                {[
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>,
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>,
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h2M7 14h6"/></svg>,
                ][i]}
              </div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Sectie (full-width photo)
// ────────────────────────────────────────────────────────────────────
function Sectie(){
  return (
    <section className="sectie-hide" style={{ padding:'0', position:'relative' }}>
      <div style={{ maxWidth:1320, margin:'0 auto', padding:'0 32px' }}>
        <div style={{ borderRadius:'var(--radius)', overflow:'hidden', position:'relative' }}>
          <img src="assets/sectie.jpg" alt="Secția Silgimar" style={{ width:'100%', height:'auto', display:'block' }}/>
          <div style={{
            position:'absolute', bottom:0, left:0, right:0,
            padding:'40px 36px',
            background:'linear-gradient(0deg, rgba(10,37,64,0.85) 0%, transparent 100%)',
          }}>
            <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--sky)', marginBottom:8 }}>
              Spălătoria noastră
            </div>
            <div style={{ fontSize:'clamp(20px, 3vw, 32px)', fontWeight:800, color:'#fff', letterSpacing:'-0.02em' }}>
              O fabrică tehnologic avansată
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Sectie = Sectie;

// ────────────────────────────────────────────────────────────────────
// Industries
// ────────────────────────────────────────────────────────────────────
const INDUSTRIES = [
  { id:'medical', label:'Medical',
    sub:'Spitale, Clinici stomatologice',
    desc:'Proceduri conforme cu OMS 994/2004 și OMS 916/2006. Colaborare strânsă cu epidemiologi pentru a scădea riscul de infecții nosocomiale și a apropia mediul spitalicesc de un standard hotelier.',
    iso:'ISO 9001',
    photo:'assets/servicii/medical.jpg'
  },
  { id:'horeca', label:'HoReCa',
    sub:'Hoteluri, Pensiuni, Restaurante',
    desc:'Detergenți non-toxici aprobați de Ministerul Sănătății și Ministerul Mediului. Decontaminare termică prin călcare la temperaturi ridicate. Rezultatul: textile sterilizate, aspect impecabil, miros plăcut.',
    iso:'Marriott · Meridian · Excelsior',
    photo:'assets/servicii/horeca.jpg'
  },
  { id:'militar', label:'Militar',
    sub:'Unități militare',
    desc:'Servicii pentru echipamente militare, cazarmament și textile din unități militare, tabere de instruire sau cazări temporare. Ridicare, spălare și returnare în timp critic.',
    iso:'Garanție de timp',
    photo:'assets/servicii/militar.jpg'
  },
  { id:'educatie', label:'Educație',
    sub:'Școli, Grădinițe, Afterschool',
    desc:'Lenjerie, prosoape și textile pentru instituții de învățământ. Spălare separată pe categorii și ambalare individuală.',
    iso:'Procese certificate',
    photo:'assets/servicii/educatie.jpg'
  },
  { id:'medicosocial', label:'Medico-Sociale',
    sub:'Asistență persoane vârstnice',
    desc:'Mașini cu bariere igienice + călcare la temperaturi ridicate în calandre speciale. Transport în vehicule autorizate de Direcția de Sănătate Publică.',
    iso:'DSP · transport autorizat',
    photo:'assets/servicii/medicosocial.jpg'
  },
  { id:'industrial', label:'Industrial',
    sub:'Fabrici, alimentare, uniforme',
    desc:'Uniforme și echipamente de lucru pentru fabrici industriale și fabrici alimentare. Sortare separată, decontaminare adaptată tipului de murdărie.',
    iso:'Volume mari',
    photo:'assets/servicii/industrie.jpg'
  },
];

function Industries(){
  const [active, setActive] = useState('medical');
  const item = INDUSTRIES.find(i=>i.id===active);
  return (
    <section id="servicii" style={{ background:'var(--paper)' }}>
      <div className="wrap">
        <div className="section-tag">Servicii</div>
        <h2 className="section-title">Industriile pe care le <em>servim</em></h2>
        <p style={{ marginTop:20, fontSize:17, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'58ch'}}>
          Șase domenii, o singură promisiune: textile impecabile, livrate în 24h.
        </p>

        <div className="industry-tabs">
          {INDUSTRIES.map(i=>(
            <button key={i.id} className={i.id===active?'on':''} onClick={()=>setActive(i.id)}>{i.label}</button>
          ))}
        </div>

        <div className="industry-panel">
          <div className="industry-img" style={{ backgroundImage: `url(${item.photo})` }}>
          </div>
          <div className="industry-content">
            <div>
              <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--primary)', marginBottom:10 }}>
                Domeniul {item.label}
              </div>
              <h3>{item.sub}</h3>
              <p style={{ marginTop:18 }}>{item.desc}</p>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:30, flexWrap:'wrap', gap:16 }}>
              <span className="iso-pill">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M2 6l3 3 5-6"/>
                </svg>
                {item.iso}
              </span>
              <a className="btn btn-ghost" href="#contact" style={{ padding:'12px 22px', fontSize:14 }}>Discută cu noi <span className="arr">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Process
// ────────────────────────────────────────────────────────────────────
function Process(){
  const steps = [
    { t:'Identificare', d:'Sortare numerică și identificare articol cu cip RFID opțional.', icon:(
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
    )},
    { t:'Preluare', d:'Cărucioare cu huse, vehicule autorizate DSP, ridicare programată.', icon:(
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7h11l3 4h4v6h-2M3 7v10h2M3 7v0"/><circle cx="7" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>
    )},
    { t:'Spălare', d:'Tunel cu dezinfecție UV, chimică și termică. Mașini cu barieră pentru procese infecțioase.', icon:(
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg>
    )},
    { t:'Călcare', d:'Calandru cu alimentare automată, dezinfecție termică, control calitate.', icon:(
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 17h18M5 17V9c0-2 2-4 5-4h4c3 0 5 2 5 4v8"/></svg>
    )},
    { t:'Livrare 24h', d:'Ambalare, sortare numerică și livrare în maxim 24 ore de la preluare.', icon:(
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4M3 17l9 4 9-4"/></svg>
    )},
  ];
  return (
    <section className="process" id="proces">
      <div className="ring" aria-hidden="true"></div>
      <div className="wrap">
        <div className="section-tag">Ciclu complet</div>
        <h2 className="section-title">Cinci pași, <em>un singur</em> standard</h2>
        <p style={{ marginTop:20, fontSize:16, lineHeight:1.6, color:'rgba(255,255,255,.7)', maxWidth:'56ch'}}>
          De la preluare până la livrare, fiecare etapă e calibrată — pentru ca textilele
          tale să se întoarcă mai curate decât ai crezut posibil.
        </p>
        <div className="process-steps">
          {steps.map((s,i)=>(
            <div className="process-step" key={i}>
              <div className="step-icon">{s.icon}</div>
              <div className="step-num">0{i+1} / 05</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <div className="process-cta">
          <a className="btn btn-primary" style={{ background:'#fff', color:'var(--ink)'}} href="mailto:office@silgimar.ro">Solicită ofertă <span className="arr">→</span></a>
          <span style={{ fontSize:13, color:'rgba(255,255,255,.6)', fontFamily:'JetBrains Mono,monospace', letterSpacing:'0.1em'}}>
            office@silgimar.ro · 0787-741.379
          </span>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// RFID
// ────────────────────────────────────────────────────────────────────
function RFID(){
  return (
    <section id="rfid" style={{ background:'var(--paper)' }}>
      <div className="wrap">
        <div className="split" style={{ alignItems:'center' }}>
          <div>
            <div className="section-tag">Tehnologie RFID</div>
            <h2 className="section-title">Managementul <em>inteligent</em> al textilelor</h2>
            <p style={{ marginTop:20, fontSize:17, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'50ch' }}>
              CIP-uri inteligente atașate pe fiecare articol textil — trasabilitate completă,
              de la preluare până la livrare, în timp real.
            </p>

            <div className="rfid-cards">
              {[
                { n:'-98%', d:'Pierderi de inventar' },
                { n:'3 sec', d:'Bon de predare-primire' },
                { n:'10m', d:'Citire la distanță' },
                { n:'Real-time', d:'Tracking comenzi' },
              ].map((b,i)=>(
                <div key={i} style={{
                  padding:'18px 20px', borderRadius:16,
                  background:'var(--ice)', border:'1px solid var(--line)',
                }}>
                  <div style={{ fontSize:22, fontWeight:800, color:'var(--ink)', letterSpacing:'-0.02em' }}>{b.n}</div>
                  <div style={{ fontSize:12, fontWeight:600, color:'var(--ink-2)', marginTop:4, letterSpacing:'0.06em' }}>{b.d}</div>
                </div>
              ))}
            </div>

          </div>

          <div style={{ display:'flex', flexDirection:'column', gap:24 }}>
            <div style={{ borderRadius:'var(--radius)', overflow:'hidden' }}>
              <img src="assets/rfid.webp" alt="Sistem RFID Silgimar" style={{ width:'100%', height:'auto', display:'block' }}/>
            </div>
            <a className="btn btn-primary" href="mailto:office@silgimar.ro" style={{ alignSelf:'flex-start' }}>Solicită RFID <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.RFID = RFID;

// ────────────────────────────────────────────────────────────────────
// Testimonial + Clients
// ────────────────────────────────────────────────────────────────────
const TESTIMONIALS = [
  { q:'Colaborarea cu ei înseamnă profesionalism.', who:'Courtyard Hotel'},
  { q:'Mașinăria lor chiar nu se oprește — livrare în 24h, fără excepție.', who:'Hotel Meridian Mamaia'},
  { q:'Standardul de igienă pe care îl asigură ne ajută să respectăm protocoalele OMS fără efort.', who:'Centru Medico-Social'},
];

function Testimonial(){
  const [i, setI] = useState(0);
  const t = TESTIMONIALS[i];
  return (
    <section className="testimonial">
      <div className="wrap">
        <div className="testimonial-card">
          <div className="section-tag" style={{ justifyContent:'center', display:'flex' }}>Ce spun clienții</div>
          <p className="quote">{t.q}</p>
          <cite>— {t.who}</cite>
          <div className="testimonial-nav">
            <button onClick={()=>setI((i-1+TESTIMONIALS.length)%TESTIMONIALS.length)} aria-label="prev">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 2-5 5 5 5"/></svg>
            </button>
            <button onClick={()=>setI((i+1)%TESTIMONIALS.length)} aria-label="next">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 2 5 5-5 5"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Clients(){
  const logos = [
    { name:'Marriott', file:'assets/clienti/marriott.webp' },
    { name:'Hilton', file:'assets/clienti/hilton.webp' },
    { name:'Comitetul Olimpic Român', file:'assets/clienti/comitetul olimpic roman.webp' },
    { name:'Gradl Medical', file:'assets/clienti/gradl medical.webp' },
    { name:'Ophtmax', file:'assets/clienti/ophtmax.webp' },
    { name:'Schnitzel Haus', file:'assets/clienti/schnitsel haus.webp' },
    { name:null },
    { name:null },
    { name:null },
    { name:'+ 120 alții', text:true },
  ];
  return (
    <section style={{ paddingTop: 80, paddingBottom: 0 }}>
      <div className="wrap">
        <div className="section-tag">Parteneri</div>
        <h2 className="section-title" style={{ fontSize:'clamp(28px, 3.4vw, 44px)' }}>O selecție din <em>portofoliul</em> nostru</h2>
        <div className="client-strip">
          {logos.map((c,i)=>(
            <div className="client-cell" key={i}>
              {c.text ? (
                <span style={{ fontSize:16, fontWeight:700, color:'var(--primary)' }}>{c.name}</span>
              ) : c.file ? (
                <img src={c.file} alt={c.name} style={{ maxWidth:'90%', maxHeight:'100px', objectFit:'contain' }}
                />
              ) : (
                <span style={{ fontSize:12, color:'var(--ink-2)', opacity:0.4, fontFamily:'JetBrains Mono,monospace', letterSpacing:'0.1em' }}>logo</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Logo lab — show simplified mark variants
// ────────────────────────────────────────────────────────────────────
function LogoLab(){
  return (
    <section className="logo-lab" id="logo">
      <div className="wrap">
        <div className="section-tag">Identitate · 2026</div>
        <h2 className="section-title">Un <em>infinit</em> într-o mașină de spălat</h2>
        <p style={{ marginTop:18, fontSize:16, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'56ch'}}>
          Logoul original Silgimar — un infinit într-o mașină de spălat — păstrat
          ca atare. Marca rămâne ancora vizuală a redesign-ului.
        </p>
        <div className="lab-grid">
          <div className="lab-card">
            <div className="label">Logo principal</div>
            <div className="lab-mark"><SilgimarMark size={140}/></div>
            <div style={{ textAlign:'center', fontFamily:'JetBrains Mono,monospace', fontSize:11, color:'var(--ink-2)', letterSpacing:'0.14em'}}>
              identitate originală
            </div>
          </div>
          <div className="lab-card dark">
            <div className="label">Pe fundal închis</div>
            <div className="lab-mark"><SilgimarMark size={140}/></div>
            <div style={{ textAlign:'center', fontFamily:'JetBrains Mono,monospace', fontSize:11, color:'var(--sky)', letterSpacing:'0.14em'}}>
              păstrează contrastul
            </div>
          </div>
          <div className="lab-card">
            <div className="label">Cu wordmark complet</div>
            <div className="lab-mark"><SilgimarMark size={180} withWordmark={true}/></div>
            <div style={{ textAlign:'center', fontFamily:'JetBrains Mono,monospace', fontSize:11, color:'var(--ink-2)', letterSpacing:'0.14em'}}>
              variantă completă
            </div>
          </div>
        </div>

        <div style={{ marginTop:32, display:'flex', gap:8, flexWrap:'wrap' }}>
          {[
            { hex:'#0a2540', name:'Ink'},
            { hex:'#143b66', name:'Ink-2'},
            { hex:'#1a6fb5', name:'Primary'},
            { hex:'#2f8fd6', name:'Primary-2'},
            { hex:'#7cc5e8', name:'Sky'},
            { hex:'#3fb99a', name:'Mint'},
            { hex:'#e8f4fb', name:'Ice', dark:true},
          ].map((s,i)=>(
            <div className="sw" key={i} style={{ background:s.hex, color: s.dark ? 'var(--ink)' : '#fff' }}>{s.name} {s.hex}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Blog
// ────────────────────────────────────────────────────────────────────
function Blog(){
  const posts = [
    { d:'29 Dec 2023', t:'Antreprenoriatul și antreprenorul — incertitudine și „antifragilitate"', photo:'assets/blog/1.jpg', url:'blog-1.html' },
    { d:'25 Nov 2023', t:'Spălătoriile industriale — adevărate uzine ale curățeniei', photo:'assets/blog/2.jpg', url:'blog-2.html' },
    { d:'30 Oct 2023', t:'„Antreprenoriatul este despre setea de a crește" — interviu cu Ramela Lombardi', photo:'assets/blog/3.jpg', url:'blog-3.html' },
    { d:'1 Oct 2023', t:'Tur virtual al spălătoriei industriale de textile', photo:'assets/blog/4.jpg', url:'blog-4.html' },
  ];
  return (
    <section id="blog" style={{ background:'var(--paper)'}}>
      <div className="wrap">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:20 }}>
          <div>
            <div className="section-tag">Blog</div>
            <h2 className="section-title">Note din <em>spălătorie</em></h2>
          </div>
          <a className="btn btn-ghost" href="#" style={{ padding:'12px 22px', fontSize:14}}>Toate articolele <span className="arr">→</span></a>
        </div>
        <div className="blog-grid">
          {posts.map((p,i)=>(
            <a className="post" href={p.url || '#'} key={i}>
              <div className="post-img" style={{ backgroundImage:`url(${p.photo})`, backgroundSize:'cover', backgroundPosition:'center' }}></div>
              <div className="post-body">
                <div className="post-meta">{p.d}</div>
                <h4>{p.t}</h4>
                <span className="post-link">Read more <span>→</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// CTA + Footer
// ────────────────────────────────────────────────────────────────────
function CTA(){
  return (
    <section className="cta-banner" id="contact">
      <div className="wrap" style={{ position:'relative' }}>
        <div className="section-tag" style={{ color:'var(--sky)', justifyContent:'center', display:'flex' }}>
          <span style={{ background:'var(--sky)' }}></span>
          Contact
        </div>
        <h2>Mașinăria noastră <em>nu se oprește.</em></h2>
        <p className="lead">Bd-ul Republicii, Nr. 295 · Ploiești, România · Răspundem în maxim 24h</p>

        <div className="contact-details">
          <a href="mailto:office@silgimar.ro" className="contact-item">
            <div className="contact-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>
            </div>
            <div className="contact-label">Email</div>
            <div className="contact-value">office@silgimar.ro</div>
          </a>
          <a href="tel:0787741379" className="contact-item">
            <div className="contact-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            </div>
            <div className="contact-label">Telefon</div>
            <div className="contact-value">0787-741.379</div>
          </a>
          <div className="contact-item">
            <div className="contact-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </div>
            <div className="contact-label">Program</div>
            <div className="contact-value">Luni – Duminică<br/>07:00 – 20:00</div>
          </div>
        </div>

        <div className="actions">
          <a className="btn btn-primary cta-big" href="mailto:office@silgimar.ro">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>
            Scrie-ne pe email <span className="arr">→</span>
          </a>
          <a className="btn btn-ghost cta-big" href="tel:0787741379">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            Sună-ne acum
          </a>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Team
// ────────────────────────────────────────────────────────────────────
const TEAM = [
  { name:'Lombardi Ramela', role:'Fondator & CEO', photo:'assets/team/ramela.jpg' },
  { name:'Moldoveanu Florina', role:'Manager Executiv', photo:'assets/team/florina.jpg' },
  { name:'Popescu Silviu', role:'Coordonator Marketing', photo:'assets/team/silviu.jpg' },
  { name:'Banu Dorin', role:'Coordonator Tehnic', photo:'assets/team/dorin.jpg' },
  { name:'Popescu Marinela', role:'Manager Divizie Retail', photo:'assets/team/marinela.jpg' },
  { name:'Banu Oana', role:'Manager Divizie Industrial', photo:'assets/team/oana.jpg' },
];

function Team(){
  return (
    <section id="echipa" style={{ background:'var(--mist)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
      <div className="wrap">
        <div className="section-tag">Echipa</div>
        <h2 className="section-title">Oamenii din spatele <em>mașinăriei</em></h2>
        <p style={{ marginTop:20, fontSize:17, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'56ch'}}>
          O echipă dedicată, cu experiență în textile industriale, logistică și management operațional.
        </p>

        <div className="team-grid">
          {TEAM.map((m,i)=>(
            <div className="team-card" key={i}>
              <div className="team-photo">
                <img src={m.photo} alt={m.name}/>
              </div>
              <h4 className="team-name">{m.name}</h4>
              <p className="team-role">{m.role}</p>
            </div>
          ))}
        </div>

        <div className="team-video">
          <div className="section-tag" style={{ marginTop:20 }}>Meet the CEO</div>
          <h3 style={{ fontSize:'clamp(24px, 3vw, 36px)', fontWeight:800, letterSpacing:'-0.02em', marginBottom:30 }}>
            Cunoaște-o pe <em style={{ fontStyle:'italic', fontWeight:300, color:'var(--primary)' }}>Ramela Lombardi</em>
          </h3>
          <div className="video-embed">
            <iframe
              src="https://www.youtube.com/embed/NKmvFE6zBnE"
              title="Meet Ramela Lombardi — CEO Silgimar"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>
          </div>
        </div>

        <div className="team-join">
          <div>
            <h3 style={{ fontSize:'clamp(28px, 3vw, 40px)', fontWeight:800, letterSpacing:'-0.02em' }}>
              Alătură-te <em style={{ fontStyle:'italic', fontWeight:300, color:'var(--primary)' }}>echipei</em>
            </h3>
            <p style={{ marginTop:14, fontSize:16, lineHeight:1.6, color:'var(--ink-2)', maxWidth:'50ch' }}>
              Căutăm oameni dedicați care vor să facă parte dintr-o echipă în continuă creștere.
            </p>
            <a className="btn btn-primary" href="mailto:office@silgimar.ro" style={{ marginTop:24 }}>
              Trimite CV <span className="arr">→</span>
            </a>
          </div>
          <div className="team-gallery">
            <img src="assets/team/alatura-te.jpg" alt="Echipa Silgimar" style={{ width:'100%', height:'100%', objectFit:'cover', borderRadius:16 }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Team = Team;

function Footer(){
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <SilgimarLockup markSize={36}/>
            <p className="foot-info" style={{ marginTop:18, maxWidth: 320 }}>
              Spălătorie industrială textilă · O fabrică tehnologic avansată
              specializată în spălarea și dezinfectarea textilelor.
            </p>
            <p className="foot-info" style={{ marginTop:14, maxWidth: 320, fontSize:13 }}>
              Bd-ul Republicii, Nr. 295 · Ploiești, România
            </p>
            <div className="socials" style={{ marginTop:18 }}>
              <a href="https://www.facebook.com/silgimarspalatorie" target="_blank" rel="noopener" aria-label="Facebook"><span style={{ fontSize:11, fontWeight:700 }}>Fb</span></a>
              <a href="https://www.instagram.com/silgimar/?hl=ro" target="_blank" rel="noopener" aria-label="Instagram"><span style={{ fontSize:11, fontWeight:700 }}>Ig</span></a>
              <a href="https://ro.linkedin.com/company/silgimar" target="_blank" rel="noopener" aria-label="LinkedIn"><span style={{ fontSize:11, fontWeight:700 }}>Li</span></a>
              <a href="https://www.youtube.com/@Silgimar" target="_blank" rel="noopener" aria-label="YouTube"><span style={{ fontSize:11, fontWeight:700 }}>Yt</span></a>
              <a href="https://www.tiktok.com/@silgimar" target="_blank" rel="noopener" aria-label="TikTok"><span style={{ fontSize:11, fontWeight:700 }}>Tk</span></a>
            </div>
            <div style={{ display:'flex', gap:14, alignItems:'center', flexWrap:'wrap', marginTop:24 }}>
              <img src="assets/legal/fihr.webp" alt="FIHR — Membru Afiliat" style={{ height:50, width:'auto' }}/>
              <img src="assets/legal/grit.webp" alt="GRIT — Grupul Român de Îngrijire a Textilelor" style={{ height:40, width:'auto' }}/>
            </div>
          </div>
          <div className="foot">
            <h5>Navigare</h5>
            <ul>
              <li><a href="#top">Home</a></li>
              <li><a href="#despre">Despre noi</a></li>
              <li><a href="#servicii">Servicii</a></li>
              <li><a href="#proces">Proces</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="mvv.html">Misiune, Viziune, Valori</a></li>
            </ul>
          </div>
          <div className="foot">
            <h5>Legal</h5>
            <ul>
              <li><a href="termeni.html">Termeni și condiții</a></li>
              <li><a href="confidentialitate.html">GDPR</a></li>
              <li><a href="cookies.html">Politica de Cookies</a></li>
              <li><a href="confidentialitate.html">Politica de Confidențialitate</a></li>
              <li><a href="https://anpc.ro/ce-este-sal/" target="_blank" rel="noopener">ANPC · SAL</a></li>
              <li><a href="https://consumer-redress.ec.europa.eu/site-relocation_en?event=main.home2.show&lng=RO" target="_blank" rel="noopener">SOL</a></li>
            </ul>
          </div>
          <div className="foot">
            <h5>Documente</h5>
            <ul>
              <li><a href="assets/legal/comunicat-poim-160820.pdf" target="_blank">Comunicat POIM 160820</a></li>
              <li><a href="assets/legal/comunicat-158716.pdf" target="_blank">Comunicat Proiect 158716</a></li>
              <li><a href="assets/legal/descriere-poim-160820.pdf" target="_blank">Descriere POIM 160820</a></li>
              <li><a href="assets/legal/descriere-158716.pdf" target="_blank">Descriere Proiect 158716</a></li>

            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>Copyright © 2023 SILGIMAR PROD. All rights reserved</span>
          <span style={{ fontFamily:'JetBrains Mono,monospace', letterSpacing:'0.1em' }}>
            Web Design by <a href="https://asap-hub.com" target="_blank" rel="noopener" style={{ color:'var(--primary)', fontWeight:600 }}>ASAP HUB</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Hero = Hero;
window.Metrics = Metrics;
window.About = About;
window.Industries = Industries;
window.Process = Process;
window.Testimonial = Testimonial;
window.Clients = Clients;
window.LogoLab = LogoLab;
window.Blog = Blog;
window.CTA = CTA;
window.Footer = Footer;