// Cook Street Sourcing v2 — Sections 3: Regions, Technology, Contact, Footer

// ── Regions (off-white) ──────────────────────────────────────────────────────
function Regions() {
  const ref = useReveal(0.08); const t = useT(); const rg = t.regions;
  return (
    <section id="regions" ref={ref} style={{ backgroundColor:"#FAFAF7", padding:"140px 0" }}>
      <div className="cs-container">
        <div className="section-header-split" style={{ marginBottom:80 }}>
          <div>
            <div className="fu" style={{ ...fu, display:"flex", alignItems:"center", gap:12, marginBottom:24 }}>
              <div style={{ width:40, height:1, backgroundColor:"#9B7B52" }} />
              <span className="cs-label">{rg.label}</span>
            </div>
            <h2 className="fu" style={{ ...fu, fontFamily:"'Playfair Display',serif", fontSize:"clamp(3rem,6vw,5.5rem)", fontWeight:400, color:"#1E1B18", lineHeight:1.05, letterSpacing:"-0.01em" }}>
              {rg.headline1}<br /><em style={{ fontStyle:"italic", color:"#9B7B52" }}>{rg.headline2}</em>
            </h2>
          </div>
          <p className="fu" style={{ ...fu, fontFamily:"'Raleway',sans-serif", fontSize:16, fontWeight:300, color:"#6B6560", lineHeight:1.9, maxWidth:320, alignSelf:"flex-end" }}>{rg.sub}</p>
        </div>

        <div className="regions-grid">
          {rg.items.map((r,i) => (
            <div key={i} className="fu" style={{ ...fu, backgroundColor:"#F3F0EA", border:"1px solid #E8DFD0", padding:"48px 44px", transition:"border-color 0.3s", cursor:"default" }}
              onMouseEnter={e=>e.currentTarget.style.borderColor="rgba(155,123,82,0.5)"}
              onMouseLeave={e=>e.currentTarget.style.borderColor="#E8DFD0"}>
              <div style={{ marginBottom:32 }}>
                <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:600, letterSpacing:"0.18em", textTransform:"uppercase", color:"#9B7B52", marginBottom:10 }}>{r.label}</div>
                <h3 style={{ fontFamily:"'Playfair Display',serif", fontSize:38, color:"#1E1B18", fontWeight:400, lineHeight:1, letterSpacing:"-0.01em" }}>{r.country}</h3>
              </div>
              <div style={{ width:40, height:1, backgroundColor:"rgba(155,123,82,0.3)", marginBottom:24 }} />
              <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:15, fontWeight:300, color:"#6B6560", lineHeight:1.85, marginBottom:28 }}>{r.desc}</p>
              <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
                {r.strengths.map((s,j) => (
                  <div key={j} style={{ display:"flex", alignItems:"center", gap:12 }}>
                    <div style={{ width:4, height:4, backgroundColor:"#9B7B52", flexShrink:0 }} />
                    <span style={{ fontFamily:"'Raleway',sans-serif", fontSize:13, color:"#6B6560", fontWeight:300 }}>{s}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ── Technology (beige) ───────────────────────────────────────────────────────
function Technology() {
  const ref = useReveal(0.08); const t = useT(); const tc = t.technology;
  return (
    <section id="technology" ref={ref} style={{ backgroundColor:"#E8DFD0", padding:"140px 0" }}>
      <div className="cs-container">
        <div className="tech-header">
          <div>
            <div className="fu" style={{ ...fu, display:"flex", alignItems:"center", gap:12, marginBottom:24 }}>
              <div style={{ width:40, height:1, backgroundColor:"#9B7B52" }} />
              <span className="cs-label">{tc.label}</span>
            </div>
            <h2 className="fu" style={{ ...fu, fontFamily:"'Playfair Display',serif", fontSize:"clamp(3rem,6vw,5.5rem)", fontWeight:400, color:"#1E1B18", lineHeight:1.05, letterSpacing:"-0.01em" }}>
              {tc.headline1}<br /><em style={{ fontStyle:"italic", color:"#9B7B52" }}>{tc.headline2}</em>
            </h2>
          </div>
          <div className="fu" style={{ ...fu }}>
            <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:16, fontWeight:300, color:"#6B6560", lineHeight:1.9, marginBottom:32 }}>{tc.desc}</p>
            <div style={{ borderLeft:"2px solid #9B7B52", paddingLeft:24 }}>
              <p style={{ fontFamily:"'Playfair Display',serif", fontSize:21, color:"#4A5240", fontStyle:"italic", lineHeight:1.6, fontWeight:400 }}>{tc.quote}</p>
            </div>
          </div>
        </div>

        {/* Features — Process style */}
        <div style={{ marginTop:72 }}>
          {/* Desktop: horizontal row */}
          <div className="process-desktop-v2">
            <div style={{ display:"grid", gridTemplateColumns:"repeat(6,1fr)", gap:0, borderTop:"1px solid rgba(155,123,82,0.2)" }}>
              {tc.features.map((f,i) => (
                <div key={i} className="fu" style={{ ...fu, padding:"40px 28px 0 0", position:"relative" }}>
                  <div style={{ fontFamily:"'Playfair Display',serif", fontSize:"clamp(4rem,6vw,6rem)", color:"rgba(155,123,82,0.18)", fontWeight:400, lineHeight:1, marginBottom:16, letterSpacing:"-0.04em" }}>{f.n}</div>
                  {i < tc.features.length-1 && <div style={{ position:"absolute", right:0, top:56, height:1, width:28, backgroundColor:"rgba(155,123,82,0.2)" }} />}
                  <h3 style={{ fontFamily:"'Playfair Display',serif", fontSize:18, color:"#1E1B18", fontWeight:500, marginBottom:12, lineHeight:1.3 }}>{f.title}</h3>
                  <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:13, color:"#6B6560", lineHeight:1.8, fontWeight:300 }}>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
          {/* Mobile: vertical */}
          <div className="process-mobile-v2">
            {tc.features.map((f,i) => (
              <div key={i} className="fu" style={{ ...fu, display:"flex", gap:0, borderTop:"1px solid rgba(155,123,82,0.2)", paddingTop:28, paddingBottom:28 }}>
                <div style={{ flexShrink:0, width:64 }}>
                  <span style={{ fontFamily:"'Playfair Display',serif", fontSize:"clamp(2.5rem,7vw,3.5rem)", color:"rgba(155,123,82,0.22)", fontWeight:400, lineHeight:1, letterSpacing:"-0.03em" }}>{f.n}</span>
                </div>
                <div style={{ paddingTop:6 }}>
                  <h3 style={{ fontFamily:"'Playfair Display',serif", fontSize:20, color:"#1E1B18", fontWeight:500, marginBottom:10 }}>{f.title}</h3>
                  <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:14, color:"#6B6560", lineHeight:1.85, fontWeight:300 }}>{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyUs() { return null; }

// ── Contact (dark) ───────────────────────────────────────────────────────────
function Contact() {
  const ref = useReveal(0.08); const t = useT(); const ct = t.contact;
  const [data, setData] = React.useState({ name:"", company:"", email:"", category:"", message:"" });
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { setSent(false); }, [t]);

  const iStyle = { width:"100%", background:"transparent", border:"none", borderBottom:"1px solid rgba(155,123,82,0.35)", padding:"12px 0", fontFamily:"'Raleway',sans-serif", fontSize:15, color:"rgba(255,255,255,0.85)", outline:"none", transition:"border-color 0.2s" };
  const lStyle = { fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:600, letterSpacing:"0.16em", textTransform:"uppercase", color:"#9B7B52", display:"block", marginBottom:10 };

  return (
    <section id="contact" ref={ref} style={{ backgroundColor:"#1E1B18", padding:"140px 0" }}>
      <div className="cs-container">
        <div className="contact-layout">
          {/* Left */}
          <div>
            <div className="fu" style={{ ...fu, display:"flex", alignItems:"center", gap:12, marginBottom:24 }}>
              <div style={{ width:40, height:1, backgroundColor:"#9B7B52" }} />
              <span className="cs-label" style={{ color:"#9B7B52" }}>{ct.label}</span>
            </div>
            <h2 className="fu" style={{ ...fu, fontFamily:"'Playfair Display',serif", fontSize:"clamp(3rem,6vw,5.5rem)", fontWeight:400, color:"#FAFAF7", lineHeight:1.05, letterSpacing:"-0.01em", marginBottom:32 }}>
              {ct.headline1}<br /><em style={{ fontStyle:"italic", color:"#9B7B52" }}>{ct.headline2}</em>
            </h2>
            <p className="fu" style={{ ...fu, fontFamily:"'Raleway',sans-serif", fontSize:16, fontWeight:300, color:"rgba(255,255,255,0.65)", lineHeight:1.9, maxWidth:300, marginBottom:64 }}>{ct.sub}</p>
            <div className="fu" style={{ ...fu }}>
              {ct.details.map((item,i) => (
                <div key={i} style={{ borderTop:"1px solid rgba(255,255,255,0.07)", paddingTop:20, marginBottom:20 }}>
                  <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:600, letterSpacing:"0.16em", textTransform:"uppercase", color:"#9B7B52", marginBottom:6 }}>{item.label}</div>
                  <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:15, color:"rgba(255,255,255,0.72)", fontWeight:300 }}>{item.val}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Form */}
          <div className="fu" style={{ ...fu }}>
            {sent ? (
              <div style={{ paddingTop:48 }}>
                <div style={{ width:40, height:1, backgroundColor:"#9B7B52", marginBottom:28 }} />
                <h3 style={{ fontFamily:"'Playfair Display',serif", fontSize:38, color:"#FAFAF7", fontWeight:400, marginBottom:16, letterSpacing:"-0.01em" }}>{ct.form.thanks}</h3>
                <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:16, color:"rgba(255,255,255,0.65)", lineHeight:1.9, fontWeight:300 }}>{ct.form.thanksMsg}</p>
              </div>
            ) : (
              <form onSubmit={e=>{e.preventDefault();setSent(true);}} style={{ display:"flex", flexDirection:"column", gap:32 }}>
                <div className="form-row">
                  <div>
                    <label style={lStyle}>{ct.form.name}</label>
                    <input type="text" required placeholder={ct.form.namePh} value={data.name} onChange={e=>setData({...data,name:e.target.value})} style={iStyle}
                      onFocus={e=>e.target.style.borderColor="#9B7B52"} onBlur={e=>e.target.style.borderColor="rgba(155,123,82,0.35)"} />
                  </div>
                  <div>
                    <label style={lStyle}>{ct.form.company}</label>
                    <input type="text" placeholder={ct.form.companyPh} value={data.company} onChange={e=>setData({...data,company:e.target.value})} style={iStyle}
                      onFocus={e=>e.target.style.borderColor="#9B7B52"} onBlur={e=>e.target.style.borderColor="rgba(155,123,82,0.35)"} />
                  </div>
                </div>
                <div>
                  <label style={lStyle}>{ct.form.email}</label>
                  <input type="email" required placeholder={ct.form.emailPh} value={data.email} onChange={e=>setData({...data,email:e.target.value})} style={iStyle}
                    onFocus={e=>e.target.style.borderColor="#9B7B52"} onBlur={e=>e.target.style.borderColor="rgba(155,123,82,0.35)"} />
                </div>
                <div>
                  <label style={lStyle}>{ct.form.category}</label>
                  <select value={data.category} onChange={e=>setData({...data,category:e.target.value})} style={{ ...iStyle, appearance:"none", cursor:"pointer", color: data.category ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.3)" }}>
                    <option value="" disabled>{ct.form.categoryPh}</option>
                    {ct.form.categories.map(o=><option key={o} value={o.toLowerCase()}>{o}</option>)}
                  </select>
                </div>
                <div>
                  <label style={lStyle}>{ct.form.message}</label>
                  <textarea rows={5} placeholder={ct.form.messagePh} value={data.message} onChange={e=>setData({...data,message:e.target.value})} style={{ ...iStyle, resize:"none" }}
                    onFocus={e=>e.target.style.borderColor="#9B7B52"} onBlur={e=>e.target.style.borderColor="rgba(155,123,82,0.35)"} />
                </div>
                <div>
                  <button type="submit" style={{ padding:"15px 40px", backgroundColor:"#4A5240", color:"#fff", fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:500, letterSpacing:"0.14em", textTransform:"uppercase", border:"none", cursor:"pointer", transition:"background 0.3s" }}
                    onMouseEnter={e=>e.currentTarget.style.backgroundColor="#5a6450"} onMouseLeave={e=>e.currentTarget.style.backgroundColor="#4A5240"}>
                    {ct.form.submit}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────────────────
function Footer() {
  const t = useT(); const f = t.footer;
  const navLinks = [
    [t.nav.about,"#about"],[t.nav.services,"#services"],[t.nav.categories,"#categories"],
    [t.nav.process,"#process"],[t.nav.regions,"#regions"],[t.nav.cta,"#contact"],
  ];
  return (
    <footer style={{ backgroundColor:"#1E1B18", padding:"80px 0 40px", borderTop:"1px solid rgba(255,255,255,0.06)" }}>
      <div className="cs-container">
        <div className="footer-grid-v2" style={{ marginBottom:64 }}>
          <div>
            <img src="logo.png" alt="Cook Street Sourcing" style={{ height:36, width:"auto", filter:"brightness(0) invert(1)", marginBottom:24, display:"block" }} />
            <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:14, color:"rgba(255,255,255,0.55)", lineHeight:1.8, maxWidth:260, fontWeight:300 }}>{f.desc}</p>
          </div>
          <div>
            <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:600, letterSpacing:"0.18em", textTransform:"uppercase", color:"#9B7B52", marginBottom:20 }}>{f.nav}</div>
            {navLinks.map(([l,h])=>(
              <a key={h} href={h} style={{ display:"block", fontFamily:"'Raleway',sans-serif", fontSize:14, color:"rgba(255,255,255,0.55)", textDecoration:"none", marginBottom:12, fontWeight:300, transition:"color 0.2s" }}
                onMouseEnter={e=>e.currentTarget.style.color="rgba(255,255,255,0.65)"}
                onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.55)"}>{l}</a>
            ))}
          </div>

          <div>
            <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:11, fontWeight:600, letterSpacing:"0.18em", textTransform:"uppercase", color:"#9B7B52", marginBottom:20 }}>{f.contactLabel}</div>
            <div style={{ marginBottom:18 }}>
              <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:11, color:"rgba(255,255,255,0.45)", fontWeight:300, marginBottom:4, letterSpacing:"0.08em", textTransform:"uppercase" }}>{f.emailLabel}</div>
              <div style={{ fontFamily:"'Raleway',sans-serif", fontSize:14, color:"rgba(255,255,255,0.62)", fontWeight:300 }}>contato@cookstreet.com.br</div>
            </div>
          </div>
        </div>
        <div style={{ borderTop:"1px solid rgba(255,255,255,0.06)", paddingTop:28, display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:12 }}>
          <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:12, color:"rgba(255,255,255,0.4)", fontWeight:300 }}>© {new Date().getFullYear()} Cook Street Sourcing. {f.rights}</p>
          <p style={{ fontFamily:"'Raleway',sans-serif", fontSize:12, color:"rgba(255,255,255,0.3)", fontWeight:300 }}>{f.tagline}</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Regions, WhyUs, Technology, Contact, Footer });