// Trust signals + pricing + about Ivan + final CTA + footer

function Trust() {
  const { t } = useLang();
  const tr = t.trust;
  return (
    <section className="section trust">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{tr.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {tr.title} <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)', fontWeight: 500 }}>{tr.titleEm}</em>
            </h2>
          </div>
          <p>{tr.sub}</p>
        </div>

        <div className="trust-cards">
          {tr.reviews.map((r, i) => <ReviewCard key={i} {...r} />)}
        </div>

        <div className="trust-creds">
          {tr.credentials.map((c, i) => (
            <div key={i} className="cred">
              <div className="cred-label">{c.l}</div>
              <div className="cred-sub mono">{c.s}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .trust-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; }
        @media (min-width: 880px) { .trust-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
        .trust-creds {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
          background: var(--hairline);
          border: 1px solid var(--hairline);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        @media (min-width: 880px) { .trust-creds { grid-template-columns: repeat(4, 1fr); } }
        .cred { padding: 18px 16px; background: var(--card); }
        @media (min-width: 700px) {
          .cred { padding: 24px 20px; }
        }
        .cred-label { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
        .cred-sub { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; }
      `}</style>
    </section>
  );
}

function ReviewCard({ name, loc, stars, text, tag }) {
  return (
    <div className="rv-card">
      <div className="rv-head">
        <div className="rv-stars">
          {Array.from({ length: stars }).map((_, i) => (
            <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="var(--sun)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
          ))}
        </div>
        <span className="rv-tag mono">{tag}</span>
      </div>
      <p className="rv-text">"{text}"</p>
      <div className="rv-foot">
        <div className="rv-name">{name}</div>
        <div className="rv-loc mono">{loc}</div>
      </div>
      <style>{`
        .rv-card {
          padding: 18px;
          background: var(--card);
          border: 1px solid var(--hairline);
          border-radius: var(--r-lg);
          display: flex; flex-direction: column; gap: 12px;
        }
        @media (min-width: 700px) {
          .rv-card { padding: 24px; gap: 16px; }
        }
        .rv-head { display: flex; align-items: center; justify-content: space-between; }
        .rv-stars { display: inline-flex; gap: 2px; }
        .rv-tag {
          font-size: 10px; letter-spacing: 0.14em;
          color: var(--ink-soft);
          padding: 3px 8px;
          border: 1px solid var(--hairline-strong);
          border-radius: 999px;
        }
        .rv-text { font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0; flex: 1; }
        .rv-foot {
          display: flex; align-items: baseline; justify-content: space-between;
          padding-top: 16px;
          border-top: 1px solid var(--hairline);
        }
        .rv-name { font-weight: 600; font-size: 14.5px; }
        .rv-loc { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.06em; }
      `}</style>
    </div>
  );
}

function Pricing() {
  const { t } = useLang();
  const p = t.pricing;
  return (
    <section className="section pricing" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{p.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {p.title} <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)', fontWeight: 500 }}>{p.titleEm}</em>
            </h2>
          </div>
          <p>{p.sub}</p>
        </div>

        <div className="pr-grid">
          {p.tiers.map((tier, i) => <PriceTier key={i} {...tier} />)}
        </div>
      </div>
      <style>{`
        .pr-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 880px) { .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
      `}</style>
    </section>
  );
}

function PriceTier({ name, desc, from, unit, bullets, featured, flag }) {
  return (
    <div className={"pr-tier " + (featured ? "pr-tier-featured" : "")}>
      {featured && <div className="pr-flag mono">{flag}</div>}
      <div className="pr-name">{name}</div>
      <div className="pr-desc">{desc}</div>
      <div className="pr-price">
        <span className="pr-price-from mono">from</span>
        <span className="pr-price-n">{from}</span>
        <span className="pr-price-unit mono">{unit}</span>
      </div>
      <ul className="pr-bullets">
        {bullets.map((b, i) => (
          <li key={i}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            {b}
          </li>
        ))}
      </ul>
      <style>{`
        .pr-tier {
          padding: 22px 20px;
          background: var(--card);
          border: 1px solid var(--hairline);
          border-radius: var(--r-lg);
          position: relative;
        }
        @media (min-width: 700px) {
          .pr-tier { padding: 32px 28px; }
        }
        .pr-tier-featured { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        [data-theme="dark"] .pr-tier-featured { background: var(--sun); color: #15110a; }
        .pr-flag {
          position: absolute; top: -10px; left: 28px;
          padding: 4px 10px;
          background: var(--sun); color: #15110a;
          font-size: 10px; letter-spacing: 0.14em;
          border-radius: 999px;
        }
        .pr-name {
          font-family: var(--display);
          font-size: 24px; font-weight: 600;
          letter-spacing: -0.02em; margin-bottom: 6px;
        }
        .pr-desc { font-size: 14px; opacity: 0.7; margin-bottom: 24px; min-height: 42px; }
        .pr-price {
          display: flex; align-items: baseline; gap: 6px;
          padding-bottom: 24px;
          border-bottom: 1px solid currentColor;
          opacity: 0.95; margin-bottom: 24px;
        }
        .pr-tier-featured .pr-price { border-bottom-color: rgba(255,255,255,0.2); }
        [data-theme="dark"] .pr-tier-featured .pr-price { border-bottom-color: rgba(0,0,0,0.2); }
        .pr-price-from { font-size: 11px; opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; }
        .pr-price-n {
          font-family: var(--display);
          font-size: 56px; font-weight: 600;
          letter-spacing: -0.04em; line-height: 1;
        }
        .pr-price-unit { font-size: 13px; opacity: 0.7; }
        .pr-bullets {
          list-style: none; padding: 0; margin: 0;
          display: flex; flex-direction: column; gap: 10px;
          font-size: 14px;
        }
        .pr-bullets li { display: flex; gap: 8px; align-items: center; }
      `}</style>
    </div>
  );
}

function About() {
  const { t } = useLang();
  const a = t.about;
  return (
    <section className="section about" id="about">
      <div className="wrap about-wrap">
        <div className="about-photo">
          <image-slot
            id="ivan-portrait"
            shape="rounded"
            radius="20"
            placeholder={a.placeholder}
            style={{ width: '100%', aspectRatio: '3 / 4' }}
          />
          <div className="about-photo-tag mono">{a.tag}</div>
        </div>
        <div className="about-text">
          <span className="eyebrow">{a.eyebrow}</span>
          <h2 className="about-h">{a.quote}</h2>
          <p className="about-body">{a.body}</p>
          <div className="about-sig mono">{a.sig}</div>
        </div>
      </div>
      <style>{`
        .about-wrap {
          display: grid; grid-template-columns: 1fr;
          gap: 48px; align-items: center;
        }
        @media (min-width: 880px) { .about-wrap { grid-template-columns: 0.8fr 1fr; gap: 80px; } }
        .about-photo { position: relative; max-width: 420px; }
        .about-photo-tag {
          position: absolute; top: 16px; left: 16px;
          padding: 6px 10px;
          background: rgba(255,255,255,0.92);
          border-radius: 999px;
          font-size: 10px; letter-spacing: 0.16em;
          color: var(--ink); z-index: 1;
        }
        .about-h {
          font-size: clamp(28px, 3.4vw, 44px);
          font-weight: 500; font-style: italic;
          line-height: 1.15; letter-spacing: -0.02em;
          margin: 16px 0 24px; max-width: 30ch;
        }
        .about-body {
          font-size: 17px; color: var(--ink-soft);
          line-height: 1.55; margin: 0 0 24px; max-width: 56ch;
        }
        .about-sig { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; }
      `}</style>
    </section>
  );
}

function FinalCTA({ onBookClick }) {
  const { t } = useLang();
  const f = t.finalcta;
  return (
    <section className="section finalcta">
      <div className="wrap">
        <div className="fc-card">
          <div className="fc-rays" />
          <div className="fc-inner">
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>{f.eyebrow}</span>
            <h2 className="fc-h">
              {f.title1}<br/>
              <span style={{ color: 'var(--sun)' }}>{f.title2}</span>
            </h2>
            <p className="fc-p">{f.sub}</p>
            <div className="fc-cta">
              <button className="btn btn-sun" onClick={onBookClick}>
                {f.cta} <Arrow />
              </button>
              <a href={"tel:+1" + f.phone.replace(/\D/g,'')} className="btn btn-ghost fc-call">
                {f.callShort} {f.phone}
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .fc-card {
          position: relative;
          background: var(--glass);
          color: #fff;
          border-radius: var(--r-xl);
          padding: 40px 22px;
          overflow: hidden;
          box-shadow: var(--shadow);
        }
        @media (min-width: 700px) { .fc-card { padding: 64px 32px; } }
        @media (min-width: 880px) { .fc-card { padding: 100px 80px; } }
        .fc-rays {
          position: absolute; inset: 0;
          background:
            radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--sun) 60%, transparent), transparent 50%),
            radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sun) 30%, transparent), transparent 50%);
          opacity: 0.7;
        }
        .fc-inner { position: relative; }
        .fc-h {
          font-size: clamp(48px, 8vw, 96px);
          font-weight: 600; letter-spacing: -0.035em;
          line-height: 0.95; margin: 16px 0 24px;
        }
        .fc-p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 36ch; margin: 0 0 32px; }
        .fc-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; }
        .fc-call { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
        .fc-call:hover { border-color: rgba(255,255,255,0.4); }
      `}</style>
    </section>
  );
}

function Footer() {
  const { t } = useLang();
  const f = t.footer;
  return (
    <footer className="ft">
      <div className="wrap ft-wrap">
        <div className="ft-brand">
          <Wordmark />
          <p className="ft-tag">{f.tag}</p>
        </div>
        <div className="ft-cols">
          <div>
            <div className="ft-col-h mono">{f.services}</div>
            {f.servicesItems.map((s, i) => <a key={i} href="#">{s}</a>)}
          </div>
          <div>
            <div className="ft-col-h mono">{f.area}</div>
            {f.areaItems.map((s, i) => <a key={i} href="#">{s}</a>)}
          </div>
          <div>
            <div className="ft-col-h mono">{f.contact}</div>
            {f.contactItems.map((c, i) => <a key={i} href={c.href}>{c.label}</a>)}
          </div>
        </div>
      </div>
      <div className="wrap ft-bottom">
        <div className="mono">{f.copyright}</div>
        <div className="mono">{f.credit} <a href="#" style={{ textDecoration: 'underline' }}>{f.creditLink}</a></div>
      </div>
      <style>{`
        .ft {
          padding-top: 80px; padding-bottom: 40px;
          border-top: 1px solid var(--hairline);
          background: var(--bg-2);
        }
        .ft-wrap {
          display: grid; grid-template-columns: 1fr;
          gap: 48px; padding-bottom: 64px;
        }
        @media (min-width: 880px) { .ft-wrap { grid-template-columns: 1.2fr 2fr; gap: 80px; } }
        .ft-tag { font-size: 14px; color: var(--ink-soft); margin-top: 16px; line-height: 1.5; max-width: 28ch; }
        .ft-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
        @media (min-width: 700px) { .ft-cols { grid-template-columns: repeat(3, 1fr); } }
        .ft-col-h {
          font-size: 11px; letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-soft);
          margin-bottom: 16px;
        }
        .ft-cols a { display: block; font-size: 14.5px; padding: 6px 0; color: var(--ink); }
        .ft-cols a:hover { color: var(--sun-deep); }
        .ft-bottom {
          display: flex; align-items: center; justify-content: space-between;
          padding-top: 24px;
          border-top: 1px solid var(--hairline);
          font-size: 11px; color: var(--ink-soft);
          letter-spacing: 0.06em;
          flex-wrap: wrap; gap: 12px;
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Trust, Pricing, About, FinalCTA, Footer });