/* global React, Placeholder, PWOOD_IMAGES */
const { useState: useStateSC } = React;

/* ============================================================
   Models / Products
   ============================================================ */
function Models({ t, lang }) {
  return (
    <section className="section" id="models" style={{ background: "var(--surface-warm)" }}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.models.eyebrow}</span>
            <h2 className="h2 sec-head__title">
              {t.models.title.split(",")[0]},<br/>
              <span className="italic">{t.models.title.split(",").slice(1).join(",")}</span>
            </h2>
          </div>
          <p className="lead sec-head__lead">{t.models.lead}</p>
        </div>

        <div className="models">
          {t.models.items.map((m, i) => {
            const imgKey = "model-" + m.name.toLowerCase();
            const imgSrc = PWOOD_IMAGES[imgKey] || ("https://www.p-wood.com/i/w800-h600/uploads/projects/" + m.img + ".jpg");
            return (
              <div className="model" key={m.name}>
                <div className="model__visual">
                  <img
                    src={imgSrc}
                    alt={m.name}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    loading="lazy"
                  />
                </div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <span className="eyebrow" style={{color:"var(--oak-deep)"}}>{m.tag}</span>
                  <span style={{fontSize:"12px",color:"var(--muted)",fontFamily:"var(--font-mono)"}}>0{i+1}</span>
                </div>
                <div className="model__meta">
                  <h3 className="model__name italic">{m.name}</h3>
                  <span className="model__price">{m.price}</span>
                </div>
                <div className="model__specs">
                  <span><strong>{m.sqm}</strong></span>
                  <span>{m.rooms}</span>
                  <span>{m.floors}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Process timeline
   ============================================================ */
function Process({ t }) {
  return (
    <section className="section" id="process">
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.process.eyebrow}</span>
            <h2 className="h2 sec-head__title">{t.process.title}</h2>
          </div>
          <p className="lead sec-head__lead">{t.process.lead}</p>
        </div>

        <div className="process">
          {t.process.steps.map((s) => (
            <div className="step" key={s.num}>
              <div className="step__num">— {s.num}</div>
              <h3 className="step__title italic">{s.title}</h3>
              <p className="step__desc">{s.desc}</p>
              <div className="step__time">{s.time}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Materials
   ============================================================ */
function Materials({ t, lang }) {
  return (
    <section className="section" id="materials" style={{ background: "var(--surface-warm)" }}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.materials.eyebrow}</span>
            <h2 className="h2 sec-head__title">{t.materials.title}</h2>
          </div>
          <p className="lead sec-head__lead">{t.materials.lead}</p>
        </div>

        <div className="materials">
          <div className="materials__visual">
            <img
              src="https://www.p-wood.com/i/w800-h1000/uploads/projects/3ardcoejv8mcwowkwk.jpg"
              alt={lang === "el" ? "Κορμόσπιτο Progress Wood" : "Log House Progress Wood"}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              loading="lazy"
            />
          </div>
          <div className="materials__list">
            {t.materials.items.map((it) => (
              <div className="material-row" key={it.num}>
                <span className="material-row__num">{it.num}</span>
                <div className="material-row__body">
                  <h4>{it.title}</h4>
                  <p>{it.desc}</p>
                </div>
                <div className="material-row__icon">{it.icon}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Testimonials
   ============================================================ */
function Testimonials({ t }) {
  return (
    <section className="section" id="testimonials">
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.testimonials.eyebrow}</span>
            <h2 className="h2 sec-head__title">
              <span className="italic">{t.testimonials.title}</span>
            </h2>
          </div>
          <span></span>
        </div>

        <div className="testimonials">
          {t.testimonials.items.map((it, i) => (
            <figure className="testi" key={i} style={{margin:0}}>
              <div style={{fontFamily:"var(--font-display)",fontSize:"48px",lineHeight:1,color:"var(--oak)"}}>"</div>
              <blockquote className="testi__quote" style={{margin:0}}>{it.quote}</blockquote>
              <figcaption className="testi__author">
                <div className="testi__avatar"></div>
                <div>
                  <div className="testi__name">{it.name}</div>
                  <div className="testi__loc">{it.loc}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ({ t }) {
  const [open, setOpen] = useStateSC(0);
  return (
    <section className="section" id="faq">
      <div className="shell">
        <div className="faq">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.faq.eyebrow}</span>
            <h2 className="h2"><span className="italic">{t.faq.title}</span></h2>
          </div>
          <div className="faq__list">
            {t.faq.items.map((it, i) => (
              <div className={"faq__item"} key={i} {...(open === i ? { open: "" } : {})}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq__icon">+</span>
                </button>
                <div className="faq__a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Blog teaser
   ============================================================ */
function BlogTeaser({ t, lang }) {
  return (
    <section className="section" id="blog" style={{ background: "var(--surface-warm)" }}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px"}}>{t.blog.eyebrow}</span>
            <h2 className="h2 sec-head__title">{t.blog.title}</h2>
          </div>
          <div>
            <p className="lead sec-head__lead">{t.blog.lead}</p>
            <a href="#" className="btn btn--text" style={{marginTop:"20px"}}>
              {t.blog.viewAll} →
            </a>
          </div>
        </div>

        <div className="blog-grid">
          {t.blog.items.map((p, i) => (
            <a className="blog-card" href={p.href} key={i}>
              <div className="blog-card__visual">
                <img
                  src={"https://www.p-wood.com/i/w800-h600/uploads/projects/" + p.img + ".jpg"}
                  alt={p.title}
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                  loading="lazy"
                />
              </div>
              <span className="blog-card__tag">— {p.tag}</span>
              <h3 className="blog-card__title italic">{p.title}</h3>
              <div className="blog-card__meta">
                <span>{p.date}</span>
                <span>·</span>
                <span>{p.meta}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Lead form / Contact
   ============================================================ */
function LeadForm({ t }) {
  const [submitted, setSubmitted] = useStateSC(false);
  function onSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
  }
  return (
    <section className="section" id="contact" style={{paddingBottom:0}}>
      <div className="shell">
        <div className="lead-form">
          <div>
            <span className="eyebrow" style={{display:"block",marginBottom:"24px",color:"rgba(255,255,255,.55)"}}>{t.lead.eyebrow}</span>
            <h2 className="h2" style={{marginBottom:"24px"}}>
              {t.lead.title.split(" ").slice(0,-1).join(" ")}{" "}
              <span className="italic">{t.lead.title.split(" ").slice(-1)}</span>
            </h2>
            <p className="lead">{t.lead.lead}</p>

            <div style={{marginTop:"32px",display:"flex",flexDirection:"column",gap:"12px"}}>
              <a href="tel:+306932320666" style={{display:"flex",alignItems:"center",gap:"10px",color:"rgba(255,255,255,.8)",fontSize:"15px",fontWeight:500}}>
                <span style={{fontSize:"18px"}}>📞</span> +30 6932 320666
              </a>
              <a href="tel:+302394022244" style={{display:"flex",alignItems:"center",gap:"10px",color:"rgba(255,255,255,.8)",fontSize:"15px",fontWeight:500}}>
                <span style={{fontSize:"18px"}}>📞</span> +30 23940 22244
              </a>
              <a href="mailto:info@p-wood.com" style={{display:"flex",alignItems:"center",gap:"10px",color:"rgba(255,255,255,.8)",fontSize:"15px",fontWeight:500}}>
                <span style={{fontSize:"18px"}}>✉️</span> info@p-wood.com
              </a>
              <span style={{display:"flex",alignItems:"center",gap:"10px",color:"rgba(255,255,255,.6)",fontSize:"14px"}}>
                <span style={{fontSize:"16px"}}>📍</span> 4χλμ Λαγκαδά–Θεσσαλονίκης
              </span>
            </div>
          </div>

          {submitted ? (
            <div className="success">
              <h3 className="h3" style={{color:"var(--bg)",margin:0}}>
                <span className="italic">{t.lead.successTitle}</span>
              </h3>
              <p style={{margin:0,color:"rgba(255,255,255,.85)"}}>{t.lead.successBody}</p>
            </div>
          ) : (
            <form className="form-grid" onSubmit={onSubmit}>
              <div className="field">
                <label>{t.lead.fields.name}</label>
                <input type="text" required />
              </div>
              <div className="field">
                <label>{t.lead.fields.email}</label>
                <input type="email" required />
              </div>
              <div className="field">
                <label>{t.lead.fields.phone}</label>
                <input type="tel" />
              </div>
              <div className="field">
                <label>{t.lead.fields.area}</label>
                <input type="number" min="10" max="500" placeholder="80" />
              </div>
              <div className="field full">
                <label>{t.lead.fields.location}</label>
                <input type="text" />
              </div>
              <div className="field full">
                <label>{t.lead.fields.message}</label>
                <textarea rows="2"></textarea>
              </div>
              <div className="form-submit-row">
                <span className="legal">{t.lead.legal}</span>
                <button type="submit" className="btn btn--primary btn--lg">
                  {t.lead.submit} <span className="arr">→</span>
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Models, Process, Materials, Testimonials, FAQ, BlogTeaser, LeadForm });