/* CONTACT — editorial slate panel, hairline form, generous whitespace */

function Contact({ t }) {
  const [step, setStep] = React.useState("intro");
  const [data, setData] = React.useState({ name: "", email: "", service: "", date: "", message: "" });

  return (
    <section className="section bg-cocoa contact" data-screen-label="06 Contact" id="contact">
      <div className="section-inner">
        <header className="contact-head">
          <div className="sec-badge contact-badge">
            <span className="num">06</span>
            <span className="bar" />
            <span>{t.contactEyebrow}</span>
          </div>
          <div className="contact-loc mono">{t.contactLoc}</div>
        </header>

        <div className="contact-body">
          <div className="contact-left">
            <h2 className="contact-title display">
              <span>{t.contactTitle1}</span>{" "}
              <span className="italic-serif">{t.contactTitle2}</span>
            </h2>
            <p className="contact-lead italic-serif">{t.contactLead}</p>

            <div className="contact-channels">
              <div className="channel">
                <span className="channel-label mono">{t.chanWrite}</span>
                <a href="mailto:hello@hearthycoconut.com" className="display channel-val">hello@hearthycoconut.com</a>
              </div>
              <div className="channel">
                <span className="channel-label mono">{t.chanFollow}</span>
                <a href="#" className="display channel-val">@hearthycoconut</a>
              </div>
              <div className="channel">
                <span className="channel-label mono">{t.chanCall}</span>
                <a href="#" className="display channel-val">+34 · on request</a>
              </div>
            </div>
          </div>

          <div className="contact-right">
            {step !== "sent" ? (
              <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setStep("sent"); }}>
                <div className="form-head">
                  <span className="mono">{t.formNum} · 0{step === "intro" ? 1 : 2} / 02</span>
                  <span className="italic-serif">{t.formStep}</span>
                </div>

                {step === "intro" ? (
                  <div className="form-stage">
                    <label className="field">
                      <span className="f-lab mono">{t.fieldName}</span>
                      <input type="text" value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} placeholder="Natalia García" required />
                    </label>
                    <label className="field">
                      <span className="f-lab mono">{t.fieldEmail}</span>
                      <input type="email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} placeholder="hello@example.com" required />
                    </label>
                    <div className="field">
                      <span className="f-lab mono">{t.fieldService}</span>
                      <div className="chips">
                        {t.serviceChips.map((c) => (
                          <button type="button" key={c} className={`chip ${data.service === c ? "on" : ""}`} onClick={() => setData({ ...data, service: c })}>{c}</button>
                        ))}
                      </div>
                    </div>
                    <button type="button" className="btn btn-filled" onClick={() => setStep("form")} disabled={!data.name || !data.email || !data.service}>
                      <span>{t.btnNext}</span><span className="arrow">→</span>
                    </button>
                  </div>
                ) : (
                  <div className="form-stage">
                    <label className="field">
                      <span className="f-lab mono">{t.fieldDate}</span>
                      <input type="text" value={data.date} onChange={(e) => setData({ ...data, date: e.target.value })} placeholder="July 2026 · Mallorca" />
                    </label>
                    <label className="field">
                      <span className="f-lab mono">{t.fieldMsg}</span>
                      <textarea rows={4} value={data.message} onChange={(e) => setData({ ...data, message: e.target.value })} placeholder={t.fieldMsgPh} />
                    </label>
                    <div className="form-actions">
                      <button type="button" className="btn" onClick={() => setStep("intro")}><span>← {t.btnBack}</span></button>
                      <button type="submit" className="btn btn-filled"><span>{t.btnSend}</span><span className="arrow">→</span></button>
                    </div>
                  </div>
                )}
              </form>
            ) : (
              <div className="form-sent">
                <h3 className="display sent-title">{t.sentTitle}</h3>
                <p className="italic-serif sent-msg">{t.sentMsg}</p>
                <button className="btn" onClick={() => { setStep("intro"); setData({ name: "", email: "", service: "", date: "", message: "" }); }}><span>{t.btnAnother}</span></button>
              </div>
            )}
          </div>
        </div>

        <footer className="footer">
          <div className="foot-row">
            <span className="foot-brand display">Hearthy Coconut</span>
            <span className="italic-serif foot-tag">— {t.footTag}</span>
          </div>
          <div className="foot-row foot-meta mono">
            <span>© 2026 · Hearthy Coconut</span>
            <span>Málaga · Mediterranean · Worldwide</span>
            <span>{t.footRights}</span>
          </div>
        </footer>
      </div>

      <style>{`
        .contact { color: var(--bone); }
        .contact-head { display: flex; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid oklch(0.78 0.012 75 / 0.2); }
        .contact-badge { color: oklch(0.78 0.012 75 / 0.7); }
        .contact-badge .num { color: var(--bone); }
        .contact-loc { color: oklch(0.78 0.012 75 / 0.7); }

        .contact-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); padding: 96px 0; align-items: start; }
        @media (max-width: 900px) { .contact-body { grid-template-columns: 1fr; } }

        .contact-title { font-size: clamp(48px, 8vw, 120px); font-weight: 300; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 36px; color: var(--bone); }
        .contact-title .italic-serif { color: oklch(0.78 0.012 75 / 0.7); font-weight: 300; }
        .contact-lead { font-size: 20px; line-height: 1.5; color: oklch(0.95 0.012 80 / 0.85); max-width: 42ch; margin-bottom: 56px; font-weight: 300; }

        .contact-channels { display: flex; flex-direction: column; gap: 0; padding-top: 36px; border-top: 1px solid oklch(0.78 0.012 75 / 0.2); }
        .channel { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid oklch(0.78 0.012 75 / 0.15); }
        .channel-label { font-size: 10px; color: oklch(0.78 0.012 75 / 0.7); }
        .channel-val { font-size: 20px; transition: color 0.4s var(--ease-out); color: var(--bone); font-weight: 300; }
        .channel-val:hover { color: oklch(0.85 0.018 80); }

        .contact-form {
          background: var(--slate-deep);
          padding: 48px;
          border: 1px solid oklch(0.78 0.012 75 / 0.15);
          border-radius: 0;
        }
        .form-head { display: flex; justify-content: space-between; opacity: 0.7; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid oklch(0.78 0.012 75 / 0.15); font-size: 12px; }
        .form-head .mono { color: var(--bone); }
        .form-head .italic-serif { color: oklch(0.78 0.012 75 / 0.7); }

        .form-stage { display: flex; flex-direction: column; gap: 24px; }
        .field { display: flex; flex-direction: column; gap: 10px; }
        .f-lab { color: oklch(0.78 0.012 75 / 0.7); font-size: 10px; }
        .field input, .field textarea {
          background: transparent; border: none; border-bottom: 1px solid oklch(0.78 0.012 75 / 0.25);
          color: var(--bone); font-family: var(--display); font-size: 22px; padding: 12px 0; outline: none;
          transition: border-color 0.4s var(--ease-out);
          font-weight: 300;
        }
        .field input::placeholder, .field textarea::placeholder { color: oklch(0.78 0.012 75 / 0.35); font-family: var(--serif); font-style: italic; font-weight: 300; }
        .field input:focus, .field textarea:focus { border-color: var(--bone); }
        .field textarea { resize: vertical; }

        .chips { display: flex; flex-wrap: wrap; gap: 0; }
        .chip {
          font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
          padding: 10px 14px; background: transparent; color: oklch(0.85 0.018 80);
          border: 1px solid oklch(0.78 0.012 75 / 0.25); border-right: none; border-radius: 0; cursor: pointer;
          transition: all 0.4s var(--ease-out);
          font-weight: 400;
        }
        .chip:last-child { border-right: 1px solid oklch(0.78 0.012 75 / 0.25); }
        .chip:hover { color: var(--bone); border-color: oklch(0.78 0.012 75 / 0.5); }
        .chip.on { background: var(--bone); color: var(--slate-ink); border-color: var(--bone); }

        .form-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
        .btn-filled[disabled] { opacity: 0.4; cursor: not-allowed; }
        .contact .btn-filled { background: transparent; color: var(--bone); border-color: var(--bone); }
        .contact .btn-filled span:not(.arrow) { color: var(--bone); }
        .contact .btn-filled .arrow { color: var(--bone); }
        .contact .btn-filled:hover { background: var(--bone); color: var(--slate-ink); border-color: var(--bone); }
        .contact .btn-filled:hover span:not(.arrow) { color: var(--slate-ink); }
        .contact .btn-filled:hover .arrow { color: var(--slate-ink); }
        .contact .btn { color: var(--bone); border-color: oklch(0.78 0.012 75 / 0.5); }

        .form-sent { background: var(--slate-deep); padding: 80px 48px; border: 1px solid oklch(0.78 0.012 75 / 0.15); border-radius: 0; text-align: left; }
        .sent-title { font-size: 56px; margin-bottom: 16px; color: var(--bone); font-weight: 300; letter-spacing: -0.025em; }
        .sent-msg { color: oklch(0.95 0.012 80 / 0.8); margin-bottom: 36px; font-size: 18px; max-width: 38ch; }

        .footer { padding-top: 48px; border-top: 1px solid oklch(0.78 0.012 75 / 0.2); }
        .foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; flex-wrap: wrap; }
        .foot-brand { font-size: 28px; color: var(--bone); font-weight: 300; }
        .foot-tag { font-size: 14px; color: oklch(0.78 0.012 75 / 0.7); }
        .foot-meta { color: oklch(0.78 0.012 75 / 0.5); font-size: 10px; }
      `}</style>
    </section>
  );
}

window.Contact = Contact;