// Service card + Contacts + Footer + main App composition.

const ServiceCard = ({ s }) => (
  <article className="lp-svc" id={s.id}>
    <div className="lp-svc__photo">
      <image-slot
        id={`lp-svc-${s.id}`}
        shape="rect"
        placeholder={s.photoLabel}
        style={{ width: "100%", height: "100%", display: "block" }}
      ></image-slot>
      <div className="lp-svc__num">{s.num}</div>
    </div>

    <div className="lp-svc__body">
      <div className="lp-svc__head">
        <span className="lp-svc__icon">
          <window.LandingIcon kind={s.icon} color="currentColor" size={18} strokeWidth={1.8} />
        </span>
        <div className="lp-svc__headText">
          <div className="lp-svc__eyebrow">{s.eyebrow}</div>
          <h2 className="lp-svc__title">{s.title}</h2>
        </div>
      </div>

      <p className="lp-svc__intro">{s.intro}</p>

      <ul className="lp-svc__bullets">
        {s.bullets.map((b, i) => (
          <li key={i}>
            <span className="lp-svc__bulletIcon">
              <window.LandingIcon kind="check" color="currentColor" size={12} strokeWidth={2.4} />
            </span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      <div className="lp-svc__stats">
        {s.stats.map((st, i) => (
          <div key={i} className="lp-svc__stat">
            <div className="lp-svc__statV">{st.v}</div>
            <div className="lp-svc__statL">{st.l}</div>
          </div>
        ))}
      </div>

      <a className="lp-btn lp-btn--svc" href={s.href} target="_blank" rel="noopener">
        Read more on mastms.gr
        <span className="lp-btn__circle">
          <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
            <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <path d="M8.5 6l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>
    </div>
  </article>
);

const Intro = () => (
  <section className="lp-intro">
    <div className="lp-intro__eyebrow">Who we are</div>
    <h2 className="lp-intro__title">
      Holistic Performance Engineering
    </h2>
    <p className="lp-intro__copy">
      MAST Maritime Services partners with Greek and international shipowners
      across drydocking, energy efficiency, technical consultancy and exclusive
      equipment representation — through a single, accountable desk.
    </p>
    <div className="lp-intro__chips">
      <span className="lp-chip lp-chip--ink">Athens HQ</span>
      <span className="lp-chip lp-chip--ink">Guangzhou Branch</span>
    </div>
  </section>
);

const Contacts = () => (
  <section className="lp-contacts" id="contacts">
    <div className="lp-contacts__eyebrow">Key contacts</div>
    <h2 className="lp-contacts__title">Reach us directly.</h2>
    <ul className="lp-contacts__list">
      {window.LANDING_DATA.contacts.map((c, i) => (
        <li key={i}>
          <a href={`mailto:${c.email}`} className="lp-contacts__row">
            <span className="lp-contacts__icon">
              <window.LandingIcon kind="mail" color="currentColor" size={16} strokeWidth={1.8} />
            </span>
            <span className="lp-contacts__rowText">
              <span className="lp-contacts__dept">{c.dept}</span>
              <span className="lp-contacts__email">{c.email}</span>
            </span>
            <span className="lp-contacts__arrow">
              <window.LandingIcon kind="arrow" color="currentColor" size={14} strokeWidth={2} />
            </span>
          </a>
        </li>
      ))}
    </ul>
  </section>
);

const Footer = () => (
  <footer className="lp-footer">
    <img className="lp-footer__logo" src="assets/mast-logo.jpg" alt="MAST Maritime Services" />

    <div className="lp-footer__contact">
      <div className="lp-footer__line">
        <window.LandingIcon kind="pin" color="currentColor" size={13} strokeWidth={1.8} />
        <span>Leof. Vouliagmenis 21 · Glyfada 16675 · Greece</span>
      </div>
      <div className="lp-footer__line">
        <window.LandingIcon kind="phone" color="currentColor" size={13} strokeWidth={1.8} />
        <a href="tel:+302104292939">+30 210 429 2939</a>
      </div>
      <div className="lp-footer__line">
        <window.LandingIcon kind="mail" color="currentColor" size={13} strokeWidth={1.8} />
        <a href="mailto:info@mastms.gr">info@mastms.gr</a>
      </div>
    </div>

    <div className="lp-footer__links">
      <a href="https://mastms.gr" target="_blank" rel="noopener">mastms.gr</a>
    </div>

    <div className="lp-footer__copy">
      © MAST Maritime Services SA. Posidonia 2026
    </div>
  </footer>
);

window.ServiceCard = ServiceCard;
window.Intro = Intro;
window.Contacts = Contacts;
window.Footer = Footer;