From 0a2ce665b2d9dde594f5f53346cd939aabef0239 Mon Sep 17 00:00:00 2001
From: MichalC <103170279+wSBMichalee@users.noreply.github.com>
Date: Thu, 3 Sep 2026 12:44:39 +0200
Subject: [PATCH] feat(contact): remove eyebrow, add service select field and
 align rounded-none styling

---
 src/blocks/ContactInfo/Component.tsx | 67 +++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/blocks/ContactInfo/Component.tsx b/src/blocks/ContactInfo/Component.tsx
index 99fd480..6fbc190 100644
--- a/src/blocks/ContactInfo/Component.tsx
+++ b/src/blocks/ContactInfo/Component.tsx
@@ -15,12 +15,18 @@ export const ContactInfoBlock: React.FC<Props> = ({
   const pathname = usePathname()
   const isDe = pathname?.startsWith('/de')
 
-  const [formData, setFormData] = useState({ name: '', email: '', message: '' })
+  const [formData, setFormData] = useState({
+    service: '',
+    name: '',
+    email: '',
+    message: '',
+  })
   const [submitted, setSubmitted] = useState(false)
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    // TODO: Podłączyć logikę wysyłki formularza przez backend API (np. Resend / SMTP / Payload custom endpoint)
+    // TODO: Podłączyć logikę wysyłki formularza przez backend API (np. Resend / SMTP / Payload custom endpoint).
+    // Pamiętać o przekazaniu w payloadzie: formData.service (wybrana usługa), formData.name, formData.email, formData.message.
     setSubmitted(true)
   }
 
@@ -31,7 +37,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
           
           {/* Kolumna 1: Dane kontaktowe + WhatsApp CTA (Główna opcja) */}
           <div className="lg:col-span-5 flex flex-col gap-8">
-            <div className="bg-card border border-border p-8 rounded-2xl shadow-sm flex flex-col gap-6">
+            <div className="bg-card border border-border p-8 rounded-none shadow-sm flex flex-col gap-6">
               <h2 className="font-heading text-2xl font-bold text-foreground">
                 {isDe ? 'Direkter Kontakt' : 'Bezpośredni kontakt'}
               </h2>
@@ -39,7 +45,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
               <ul className="flex flex-col gap-5 text-foreground/80 text-base">
                 {address && (
                   <li className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
+                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                       <MapPin size={20} />
                     </div>
                     <div>
@@ -53,7 +59,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
 
                 {phone && (
                   <li className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
+                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                       <Phone size={20} />
                     </div>
                     <div>
@@ -69,7 +75,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
 
                 {email && (
                   <li className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
+                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                       <Mail size={20} />
                     </div>
                     <div>
@@ -85,7 +91,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
 
                 {hours && (
                   <li className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
+                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                       <Clock size={20} />
                     </div>
                     <div>
@@ -100,7 +106,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
             </div>
 
             {/* Główne CTA: WhatsApp */}
-            <div className="p-8 bg-card border-2 border-green-500/20 rounded-2xl flex flex-col gap-4">
+            <div className="p-8 bg-card border-2 border-green-500/20 rounded-none flex flex-col gap-4">
               <span className="inline-block text-xs font-bold uppercase tracking-widest text-green-600 dark:text-green-400">
                 {isDe ? 'Empfohlen & Am schnellsten' : 'Zalecany i najszybszy kontakt'}
               </span>
@@ -125,11 +131,8 @@ export const ContactInfoBlock: React.FC<Props> = ({
           </div>
 
           {/* Kolumna 2: Prosty formularz kontaktowy (Drugorzędna opcja) */}
-          <div className="lg:col-span-7 bg-card border border-border p-8 md:p-10 rounded-2xl shadow-sm">
+          <div className="lg:col-span-7 bg-card border border-border p-8 md:p-10 rounded-none shadow-sm">
             <div className="mb-8">
-              <span className="text-xs uppercase tracking-widest text-foreground/50 font-semibold block mb-2">
-                {isDe ? 'Nachricht senden' : 'Napisz wiadomość'}
-              </span>
               <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground">
                 {isDe ? 'Kontaktformular' : 'Formularz kontaktowy'}
               </h2>
@@ -141,7 +144,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
             </div>
 
             {submitted ? (
-              <div className="p-6 bg-accent/10 border border-accent/20 rounded-xl text-center">
+              <div className="p-6 bg-accent/10 border border-accent/20 rounded-none text-center">
                 <h3 className="font-heading font-bold text-lg text-foreground mb-2">
                   {isDe ? 'Vielen Dank für Ihre Nachricht!' : 'Dziękujemy za wiadomość!'}
                 </h3>
@@ -153,6 +156,38 @@ export const ContactInfoBlock: React.FC<Props> = ({
               </div>
             ) : (
               <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+                <div>
+                  <label htmlFor="service" className="block text-sm font-semibold text-foreground mb-2">
+                    {isDe ? 'Worum geht es?' : 'Czego dotyczy zapytanie?'} <span className="text-accent">*</span>
+                  </label>
+                  <select
+                    id="service"
+                    required
+                    value={formData.service}
+                    onChange={(e) => setFormData({ ...formData, service: e.target.value })}
+                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
+                  >
+                    <option value="" disabled>
+                      {isDe ? '— Bitte auswählen —' : '— Wybierz temat zapytania —'}
+                    </option>
+                    {isDe ? (
+                      <>
+                        <option value="Steuererklärung">Steuererklärung</option>
+                        <option value="Steuerbescheidprüfung">Steuerbescheidprüfung</option>
+                        <option value="Kindergeld / Riester-Rente">Kindergeld / Riester-Rente</option>
+                        <option value="Sonstiges">Sonstiges</option>
+                      </>
+                    ) : (
+                      <>
+                        <option value="Rozliczenie roczne (Steuererklärung)">Rozliczenie roczne (Steuererklärung)</option>
+                        <option value="Sprawdzenie decyzji podatkowej (Steuerbescheid)">Sprawdzenie decyzji podatkowej (Steuerbescheid)</option>
+                        <option value="Zasiłki i dopłaty (Kindergeld, Riester-Rente)">Zasiłki i dopłaty (Kindergeld, Riester-Rente)</option>
+                        <option value="Inna sprawa">Inna sprawa</option>
+                      </>
+                    )}
+                  </select>
+                </div>
+
                 <div>
                   <label htmlFor="name" className="block text-sm font-semibold text-foreground mb-2">
                     {isDe ? 'Vor- und Nachname' : 'Imię i nazwisko'} <span className="text-accent">*</span>
@@ -164,7 +199,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
                     value={formData.name}
                     onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                     placeholder={isDe ? 'z. B. Jan Kowalski' : 'np. Jan Kowalski'}
-                    className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
+                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                   />
                 </div>
 
@@ -179,7 +214,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
                     value={formData.email}
                     onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                     placeholder="kontakt@example.com"
-                    className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
+                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                   />
                 </div>
 
@@ -194,7 +229,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
                     value={formData.message}
                     onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                     placeholder={isDe ? 'Wie können wir Ihnen helfen?' : 'W czym możemy Ci pomóc? Opisz krótko swoją sprawę...'}
-                    className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-y"
+                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-y"
                   />
                 </div>